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)//参数:窗口、点 根据点击的点出现对应的窗口 }) } }