vue中百度地图标注

npm install vue-baidu-map --save 

// main.js中引用，注册全局组件
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '3mn83YpfI9VdPSZg1DfuK7lg0UqRljwt'
})

//直接调用组件使用即可

<baidu-map class="bm-view" ak="你的Key" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
   <!--缩放控件-->
   <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
   <!--定位-->
   <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
   <!--点-->
   <div v-for="(point,index) in resultData">
      <bm-marker :position="{lng:point.lng,lat:point.lat}" :dragging="true">
          <bm-label :content="point.locale" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
    </div>
</baidu-map>


// data和methods
 data(){
    return {
      resultData:[{locale:'目标名称',lng: 120.2108, lat: 30.3274}],//目标标注经纬度
      center: {lng: 0, lat: 0},
      zoom: 18,
      points: [],
    }
  },
  methods:{
    handler ({BMap, map}) {
      this.center.lng = this.resultData[0].lng
      this.center.lat = this.resultData[0].lat
    },
  }



//css

.bm-view {
        width: 100%;
        height: 100%;
      }

说明：

经纬度是有偏差的，需要都加上0.006