1、安装
npm install vue-baidu-map
2、全局注册,在main.js中引入以下代码
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你申请的key'
})
3、界面
<template>
<div>
<baidu-map :zoom="zoom" @ready="handler" class="bm-view" :scroll-wheel-zoom='true'>
<!-- scroll-wheel-zoom:能否通过滚轮缩放地图 -->
</baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
// 缩放级别
zoom: 17
};
},
mounted() {
},
methods: {
handler({ BMap, map }) {
// 标注点的经纬度
var point = new BMap.Point(123.403032, 41.799835)
map.centerAndZoom(point, 13)
// 创建标注
var marker = new BMap.Marker(point)
// 将标注添加到地图中
map.addOverlay(marker)
var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
map.addOverlay(circle)
},
},
};
</script>
<style lang="less" scoped>
.bm-view {
width: 100%;
height: 85vh;
}
</style>