vue对百度地图的使用

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