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和methodsdata(){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].lngthis.center.lat = this.resultData[0].lat},}//css.bm-view {width: 100%;height: 100%;}
说明: