|
1、安装百度地图依赖
yarn install vue-baidu-map --save
2、在全局（main.js）中引用百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'your_ak',
})
3、在页面使用百度地图
<baidu-map zoom="13" @ready="handler" style="height:calc(100vh - 250px)" :scroll-wheel-zoom='true'></baidu-map>
handler({ BMap, map }) {
let mapStyle = { style: 'midnight' }
map.setMapStyle(mapStyle)
let point = new BMap.Point(121.34113, 31.19590)//标注点的经纬度
map.centerAndZoom(point, 13)
let marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
let mapPoints = [
{ x: 31.19590, y: 121.34113, title: '地点1', con: '地点1说明', branch: '1' },
{ x: 31.18015, y: 121.174968, title: '地点2', con: '地点2说明', branch: '2' },
{ x: 31.24884, y: 121.305074, title: '地点3', con: '地点3说明', branch: '3' }
]
map.enableScrollWheelZoom(true)
for (let i = 0; i < mapPoints.length; i++) {
let points = new BMap.Point(mapPoints[i].y, mapPoints[i].x)//创建坐标点
let opts = {
width: 250,
height: 100,
title: mapPoints[i].title
}
let label = new BMap.Label(mapPoints[i].branch, {
offset: new BMap.Size(25, 5)
})
let infoWindows = new BMap.InfoWindow(mapPoints[i].con, opts)
// //添加标记样式
// let myIcon = new BMap.Icon(this.mapIcon,new BMap.Size(23,25),{
// imageSize: new BMap.Size(144,92),
// imageOffset: new BMap.Size(0, 0 - 25)
// })
//创建多个标注
let markers = new BMap.Marker(points)
map.addOverlay(markers)
markers.setLabel(label)
markers.addEventListener('click', function(event) {
map.openInfoWindow(infoWindows, points)//参数：窗口、点 根据点击的点出现对应的窗口
})
}
} | 
转播
