vue中百度地图使用及自定义点聚合样式

百度地图使用及点聚合功能

由于后台固定了百度地图，百度地图和高德地图经纬度转换有次数限制，不能满足项目的正常运行，所以切换了百度地图，下面对使用中遇到的问题进行记录：

安装及使用百度地图：

1. npm install vue-baidu-map --save

2. 在main.js中引入

    import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, {
      ak: ''// 在百度地图申请的key
    })

3. 在界面中引用

     <baidu-map
      id="map"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    />

4. 在data中定义center和zoom，分别是地图的中心点和’层级深度’

 center: { lng: 0, lat: 0 }
 zoom: 3

5. ready事件中可以取到 BMap类和map，从而对地图进行控制

    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      map.setMapStyleV2({
        styleId: ''//设置自定义样式
      })
      map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom()// 可拖拽
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }

• 修改地图的中心点和层级方法 this.map.centerAndZoom(new BMap.Point(lng, lat), zoom)

点聚合

创建点聚合实例

 this.pointSimplifierList = new BMapLib.MarkerClusterer(this.map, {
    markers: [],
    styles: [{
      url: require('../../assets/fullPage/distributed/12.png'),//点聚合图标背景图
      size: new BMap.Size(190, 36)//点聚合图标大小
    }]
  })

为点聚和填入点数据

drawClusterer(markerArr) {//markerArr是所有点的数组，其中包含了经纬度，点的图标，类型等
  const markarr = []
  for (let i = 0; i < markerArr.length; i++) {
    const point = new BMap.Point(markerArr[i].lng, markerArr[i].lat) // 循环生成新的地图点
    const icon = new BMap.Icon(markerArr[i].icon, new BMap.Size(48, 48))
    const marker = new BMap.Marker(point, { icon }) // 按照地图点坐标生成标记
    marker.info = markerArr[i]
    const that = this
    marker.addEventListener('click', function(e) {
      //这里可以做点击效果，如点击出现详情弹窗等
    })
    markarr.push(marker)
  }
  this.pointSimplifierList.addMarkers(markarr)
}

修改聚合点样式，增加聚合点其他触发效果

• 在index.html中引入两个文件,这里我是把这两个文件放在和index.html同级了

    <script src="/TextIconOverlay.js"></script>
    <script src="/MarkerClusterer.js"></script>

• 修改这两个文件

1. MarkerClusterer.js中，找到原本带有的click事件，在下面照着写一个mouseover事件

 this._clusterMarker.addEventListener('mouseover', function(event) {
  // that._markers 这个是所有的点，在drawClusterer中给他塞了一个info字段，在这里遍历这个数组就能拿到这个点的info
  // 如触摸展示弹窗，我是手写了一段html放在liHtml中，样式可以写在地图的vue文件里
  // same_data这个div写在地图的vue里
  let liHtml = ''
  const div = document.getElementById('same_data')
  div.style.left = event.pixel.x + 'px'
  div.style.top = event.pixel.y + 'px'
  div.style.display = 'block'
  div.innerHTML = liHtml
 })
 // 和他对应的还会监听一个mouseout事件同理。

2. TextIconOverlay.js中，修改的点聚合的样式，找到 _updateText 方法，对这段html进行修改，改为UI的样式，样式也是在写在vue中就可以；
3. 这里的this._text默认只有聚合点的数量，如果要其他信息，可以在 MarkerClusterer.js中this._clusterMarker.setText 赋值的地方给修改一下

this._domElement.innerHTML = '<div class="amap-marker-content"><div class="info-name">' + this._text.name + '</div>' + '<div class="info-num">' + this._text.value + '</div><div>'