vue 结合百度地图（vue-baidu-map）点聚合，并点击开启信息窗口

一、需要注意的是，不能在点聚合的标签上使用 v-for 否则点聚合无效，所以在点聚合标签下定义一个 div 如代码所示，图标也可以自定义，具体看代码注释

<template>
  <div class="mapbox">
    <baidu-map
      class="map"
      @ready="handler"
      center="中国"
      :map-click="false">
      <bml-marker-clusterer
        :averageCenter="true"
      >
        <div
          v-for="(marker, i) of markers"
          :key="i">
          <bm-marker
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
            :icon="{url: marker.url, size: { width: 300, height: 171 }}"
            :position="{lng: marker.lng, lat: marker.lat}"
            @click="infoWindowOpen(marker)"
          >
            <bm-info-window
              title="弹窗信息"
              :position="{lng: marker.lng, lat: marker.lat}"
              :show="marker.showFlag"
              @close="infoWindowClose(marker)"
              @open="infoWindowOpen(marker)"
            >
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
              <p>123456789</p>
            </bm-info-window>
          </bm-marker>
        </div>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
// 按需引入点聚合
import { BmlMarkerClusterer } from 'vue-baidu-map'
// 引入marker
import BmMarker from 'vue-baidu-map/components/overlays/Marker'

// 插入 100 个随机点
const markers = []
for (let i = 0; i < 100; i++) {
  const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21, url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', showFlag: false }
  const position1 = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21, url: 'https://cdn.tipe.io/tipe/tipe-cat-no-text.svg', showFlag: false }
  if (i % 2 === 0) {
    markers.push(position)
  } else {
    markers.push(position1)
  }
}
const carList = [
  {}
]
export default {
  name: 'Bmaptrace',
  components: {
    BmlMarkerClusterer,
    BmMarker
  },
  data () {
    return {
      BMap: '',
      map: '',
      markers,
      carList,
      show: false
    }
  },
  methods: {
    handler ({ BMap, map }) {
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青岛市', 13)
      // 赋值，方便调用，本节没用到
      this.BMap = BMap
      this.map = map
    },
    // 关闭信息窗口 @close 自带的方法
    infoWindowClose (marker) {
      marker.showFlag = false
      console.log(marker)
    },
    // 首先点击marker时开启信息窗口，其实没必要在 bm-info-window 上写 @open 因为如果是关闭状态根本就点不到，所以就无法触发 @open
    // 如果在 bm-info-window 上写了 @open 在点击marker时会触发两次infoWindowOpen函数，而且可以很明显的看到有延时
    infoWindowOpen (marker) {
      marker.showFlag = true
      console.log(marker)
    }
  }
}
</script>
<style scoped>
.map {
  height:800px;
}
</style>

效果如图所示