1. 安装
$ npm install vue-baidu-map --save
在main.js注册 使用
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '此处为百度地图申请的密钥'
})
2. 简单使用
<template>
<baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
</baidu-map>
</template>
export default {
data() {
return {
center: {lng: 0, lat: 0}, // 设置中心点信息
zoom: 3, // 地图初始放大倍数
}
},
methods: {
// 创建地图
handler({BMap, map}) {
this.center.lng = 118.7995
this.center.lat = 31.9663
this.zoom = 16
},
// 拖拽地图时触发此事件
syncCenterAndZoom(event) {
// console.log(event);
}
}
}
dragging属性为是否允许拖拽
3. 使用自定义坐标点bm-marker
<template>
<baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
<bm-marker :position="markerPoint" :dragging="dragging" :raiseOnDrag="raiseOnDrag" animation="BMAP_ANIMATION_BOUNCE" :icon="{url: pointIcon, size: {width: 30, height: 30}}"> </bm-marker>
</baidu-map>
</template>
export default {
data() {
return {
center: {lng: 0, lat: 0}, // 设置中心点信息
zoom: 3, // 地图初始放大倍数
markerPoint: {lng: 118.7995, lat: 31.9663}, // 点的位置
dragging: true, // 是否可以拖拽点
raiseOnDrag: true, // 拖拽时是否有动画效果
pointIcon: require('自定义的点的图片地址')
}
},
methods: {
// 创建地图
handler({BMap, map}) {
this.center.lng = 118.7995
this.center.lat = 31.9663
this.zoom = 16
},
// 拖拽地图时触发此事件
syncCenterAndZoom(event) {
// console.log(event);
}
}
}
animation属性 点拖拽效果动画 BMAP_ANIMATION_BOUNCE为 鼠标按下点抬起,松开点放下
预览效果:
4. 设置范围圆圈bm-circle
<template>
<baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
<bm-circle :center="circlePath.center" :radius="circlePath.radius" stroke-color="#EC4141" :stroke-opacity="0.9" :stroke-weight="2" @lineupdate="updateCirclePath"></bm-circle>
</baidu-map>
</template>
export default {
data() {
return {
center: {lng: 0, lat: 0}, // 设置中心点信息
zoom: 3, // 地图初始放大倍数
circlePath: { // 圆圈范围信息
center: {
lng: 118.7995,
lat: 31.9663
},
radius: 300 // 圆圈范围半径
},
}
},
methods: {
// 创建地图
handler({BMap, map}) {
this.center.lng = 118.7995
this.center.lat = 31.9663
this.zoom = 16
},
// 拖拽地图时触发此事件
syncCenterAndZoom(event) {
// console.log(event);
},
// 设置圆圈范围及半径
updateCirclePath() {
this.circlePath.center.lng = 118.7995
this.circlePath.center.lat = 31.9663
this.circlePath.radius = 300
},
}
}
stroke-color属性: 圆圈的边框颜色
stroke-opacity属性:圆圈内的 透明度
stroke-weight属性:圆圈边框的宽度
预览效果: