安装
$ npm install vue-baidu-map --save
全局注册
在main.js 里面引入以下代码
在你新增的页面map.vue输入以下内容
<div class="mapbox">
<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:800px" @click="getClickInfo">
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT">
export default {
name:'mapbox',
data () {
return {
center: {lng:0, lat:0},
zoom:13,
}
},
mounted:function () {
// this.enableScrollWheelZoom(true);
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng =113.822348
this.center.lat =22.635538
this.zoom =this.zoom
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
}
}
.bm-view {
width:100%;
height:300px;
}
