vue 使用百度地图

npm install vue-baidu-map --save

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

components: { BaiduMap },

<el-form-item label="地址：" class="search_form_item" >
  <div class="amap-page-container-input">
	<el-autocomplete popper-class="select-option" :popper-append-to-body="false" 
	v-model="toHaveForm.address" :fetch-suggestions="querySearch" placeholder="请输入地址" 
	style="width:400px" :trigger-on-focus="false" @select="handleSelect" />
  </div>
</el-form-item>
	              
<el-form-item  class="search_form_item">
  <div class="amap-page-container">
	<baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true"
	 ak="p6GWQwADe68quEnEgTjTHFF9z4UTTLQM" @ready="handlerBMap" />
	<div class="res">确定坐标：{{mapCenter}}</div>
  </div>
</el-form-item>

data(){
	return{
		//地图参数
      	mapZoom: 10,
      	mapCenter: { lng: 0, lat: 0 },
      	mapLocation: {
        	address: undefined,
        	coordinate: undefined
      	},
	}
}

/* 关键词搜索 */
    querySearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function (point) {
        if (point) {
          that.mapLocation.coordinate = point;
          that.makerCenter(point)
        } else {
          that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      
      var options = {
        onSearchComplete: function (results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point }
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },

handleSelect(item) {
	var { point } = item
	this.mapLocation.coordinate = point
	this.makerCenter(point)
},

makerCenter(point) {
  if (this.map) {
   this.map.clearOverlays()
   this.map.addOverlay(new this.BMap.Marker(point))
   this.mapCenter.lng = point.lng
   this.mapCenter.lat = point.lat
   this.toHaveForm.lat = this.mapCenter.lat
   this.toHaveForm.lon = this.mapCenter.lng
   this.mapZoom = 15
  }
},