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%;
}
说明: