vue 使用BaiduMap

在vue 中使用Baidu Map 需要引入 vue-baidu-map包
该项目是使用地图标注获取经纬度

npm install vue-baidu-map

html:

<baidu-map
     class="bm-view"
     :zoom="zoom"
     :center="center"
     inertial-dragging
     :ak="selfKey"
     @zoomend="getZoomend"
     :scroll-wheel-zoom="true"
     @ready="mapReady"
     @click="selectPoint"
 >
     <bm-marker :position="center"  :dragging="true" animation="BMAP_ANIMATION_DROP" @dragend="getdragend" @click="getClickMarker">
         <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{ruleForm.name}}</bm-info-window>
     </bm-marker>
     <!-- 定位控件 -->
     <!-- <bm-geolocation
     anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
     :showAddressBar="true"
     :autoLocation="true"
     ></bm-geolocation> -->
     <!-- 地区检索 -->
     <!-- <bm-view class="map"></bm-view> -->
     <bm-control :offset="{width: '10px', height: '10px'}">
         <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 99999}">
             <!-- <search-field placeholder="请输入地名关键字"></search-field> 这里指代一个自定义搜索框组件 -->
             <el-input size="mini" v-model="keyword" style="width:240px" @input="getKeyWord"></el-input>
             <!-- <el-autocomplete
                 class="inline-input"
                 v-model="keyword"
                 size="mini"
                 :fetch-suggestions="querySearch"
                 placeholder="请输入内容"
                 :trigger-on-focus="false"
                 style="width:140px"
                 @select="handleSelect"
             ></el-autocomplete> -->
         </bm-auto-complete>
     </bm-control>
     <bm-local-search v-if="isSearch" :keyword="keyword" :autoViewport="true" :panel="false" :selectFirstResult="true" @searchcomplete="getSearch" :auto-viewport="true"></bm-local-search>
     <!-- <bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"></bm-local-search> -->
     <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
 </baidu-map>

JS:

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmGeolocation, BmLocalSearch, BmNavigation, BmMarker, BmAutoComplete} from 'vue-baidu-map'
export default {
   name:'addBranch',
   components:{
       BaiduMap,
       // BmGeolocation,
       BmLocalSearch,
       BmNavigation,
       BmMarker,
       BmAutoComplete
   },
   data(){
     return {
     	keyword:'',
        search:'',
        point:{
            lng:null,
            lat:null
        },
        center:{},
        sqPoint:{}, //搜索时获取到经纬度
        restaurants:[],
     }
   },
   methods:{
 		// 控制地图级别
      getZoomend(type, target){
          console.log(type, target)
          this.zoom = type.Na
      },
      handleClose(done) {
          done();
      },
      setMap(){
          // this.zoom = 15
          this.dialogVisible = true
      },
      handleChange (value) {
          // console.log(value,this.selectedOptions)
          this.provinces=''
          value.map(res=>{
              this.provinces+=CodeToText[res]+'-'
          })
          console.log(this.provinces)
      },
      back(){
          window.close()
      },
      shuaNew(){
          this.getDaet();
      },
      // 点击标注
      getClickMarker(){
          console.log('aaaaaaa')
      },
      // 移动标注
      getdragend(type, target, pixel, point){
          console.log(type, target, pixel, point)
          console.log(type.point)
          // this.isSearch = false
          this.point = type.point
      },
      selectPoint ({ type, target, point, pixel, overlay }) {
          // this.isSearch = false
          // this.point = point
          const _this = this
          this.center = point
          console.log(point)
          // 根据坐标逆解析获取地址详细描述
          this.myGeo.getLocation(point, function (result) {
              if (result) {
                  _this.city = result.addressComponents.city //市
                  _this.province = result.addressComponents.province //省
                  _this.district = result.addressComponents.district  //区
              }
          })
      },
      mapReady ({ BMap, map }) {
          console.log('初始化',map)
          const _this = this
          // 获取自动定位方法
          // var geolocation = new BMap.Geolocation()
          
          // // 获取逆解析方法实例
          this.myGeo = new BMap.Geocoder()
          // // 获取自动定位获取的坐标信息
          // geolocation.getCurrentPosition(
          //     function (r) {
          //         _this.center = {
          //             lng: r.point.lng,
          //             lat: r.point.lat
          //         }
          //         _this.point = {
          //             lng: r.point.lng,
          //             lat: r.point.lat
          //         }
          //     },
          //     { enableHighAccuracy: true }
          // )
      },
      // 搜索
      getKeyWord(){
          this.isSearch = true
      },
      // 地区检索
      getSearch(val){
          console.log(val)
          this.isSearch = true
          if(val){
              let Hr = val.Hr[0]
              this.restaurants = val.Hr
              // console.log(val.Hr[0])
              this.point = Hr.point
              const _this = this
              // 根据坐标逆解析获取地址详细描述
              this.myGeo.getLocation(Hr.point, function (result) {
                  if (result) {
                      _this.city = result.addressComponents.city //市
                      _this.province = result.addressComponents.province //省
                      _this.district = result.addressComponents.district  //区
                  }
                  console.log(result,_this.city,_this.province,_this.district)
              })
              
              // province
              // city
              // keyword
          }
      },
      onDetermine(){
          if(this.point){
              this.jd = this.point.lng
              this.wd = this.point.lat
              console.log(TextToCode[this.province])
              let province = TextToCode[this.province].code
              let city = TextToCode[this.province][this.city].code
              let county = TextToCode[this.province][this.city][this.district].code
              this.selectedOptions = [province,city,county]
          }
          console.log('经度纬度',this.point)
          this.dialogVisible = false
      },
      handleSelect(item) {
          console.log(item);
      },
      infoWindowClose () {
          this.show = false
      },
      infoWindowOpen () {
          this.show = true
      },
   }
}