vue如何引入百度地图

首先安装依赖
npm i vue-baidu-map
然后在man.js引入
import BaiduMap from ‘vue-baidu-map’
Vue.use(BaiduMap, {
ak: ‘YOUR_APP_KEY’
});

在页面写入
<baidu-map
:center=“center”
:zoom=“zoom”
@ready=“handler”
style=“height: 100vh”
@click=“getClickInfo”
:scroll-wheel-zoom=“true”
>

data() {
return {
center: {lng: 116, lat: 39},
zoom: 19
}
},
methods: {
handler({BMap, map}) {
var point = new BMap.Point(116,39)
map.centerAndZoom(point, 19)
var marker = new BMap.Marker(point)
map.addOverlay(marker)
var circle = new BMap.Circle(point, 1, {
strokeColor: ‘Red’,
strokeWeight: 1,
strokeOpacity: 1,
Color: ‘Red’,
fillColor: ‘#f03’
})
map.addOverlay(circle)
},
getClickInfo(e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
},