1.效果：

2.代码：

<template>
  <div>
    <baidu-map class='mapView' :center="center" :zoom="zoom" :autoLocation="true" :scroll-wheel-zoom="true"
      @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">



      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">
      </bm-map-type>

      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
      </bm-geolocation>

      <bml-marker-clusterer :averageCenter="true" :styles='mystyle1'>
        <bm-marker v-for="(marker,index) of listPointData1" :key='marker.id'
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
        </bm-marker>
      </bml-marker-clusterer>

      <bml-marker-clusterer :averageCenter="true" :styles='mystyle2'>
        <bm-marker v-for="(marker,index) of listPointData2" :key='marker.id'
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
        </bm-marker>
      </bml-marker-clusterer>

      <bml-marker-clusterer :averageCenter="true" :styles='mystyle3'>
        <bm-marker v-for="(marker,index) of listPointData3" :key='marker.id'
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
        </bm-marker>
      </bml-marker-clusterer>

      <bml-marker-clusterer :averageCenter="true" :styles='mystyle4'>
        <bm-marker v-for="(marker,index) of listPointData4" :key='marker.id'
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
        </bm-marker>
      </bml-marker-clusterer>

      <bml-marker-clusterer :averageCenter="true" :styles='mystyle5'>
        <bm-marker v-for="(marker,index) of listPointData5" :key='marker.id'
          :position="{lng: marker.lng, lat: marker.lat}"
          :icon="{url:iconSelect(marker.type), size: {width: 80, height: 80}}" @click="clickHandler(marker)">
        </bm-marker>
      </bml-marker-clusterer>

      <bm-view class='mapContent'>
      </bm-view>
    </baidu-map>
  </div>
</template>

<script>
  import mapIconPath1 from "../../../assets/image/dw1.png"
  import mapIconPath2 from "../../../assets/image/dw2.png"
  import mapIconPath3 from "../../../assets/image/dw3.png"
  import mapIconPath4 from "../../../assets/image/dw4.png"
  import mapIconPath5 from "../../../assets/image/dw5.png"
  import {
    BmlMarkerClusterer
  } from 'vue-baidu-map'

  export default {
    components: {
      BmlMarkerClusterer,
    },



    data() {
      return {
        listPointData1: [],
        listPointData2: [],
        listPointData3: [],
        listPointData4: [],
        listPointData5: [],
        mystyle1: [{
          url: mapIconPath1,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#ffffff',
          opt_textSize: 10
        }],
        mystyle2: [{
          url: mapIconPath2,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#ffffff',
          opt_textSize: 10
        }],
        mystyle3: [{
          url: mapIconPath3,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#ffffff',
          opt_textSize: 10
        }],
        mystyle4: [{
          url: mapIconPath4,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#ffffff',
          opt_textSize: 10
        }],
        mystyle5: [{
          url: mapIconPath5,
          size: {
            width: 48,
            height: 48,
          },
          textColor: '#ffffff',
          opt_textSize: 10
        }],
        zoom: 6,
        center: {
          lng: 118.196,
          lat: 33.011265
        },
        mapIcon1: mapIconPath1, //自定义map maker icon
        mapIcon2: mapIconPath2, //自定义map maker icon
        mapIcon3: mapIconPath3, //自定义map maker icon
        mapIcon4: mapIconPath4, //自定义map maker icon
        mapIcon5: mapIconPath5, //自定义map maker icon
      }
    },

    created() {
      this.getData()
    },


    methods: {
      //点聚合单个点点击事件
      clickHandler(e) {
        console.log("类型", e.type);
      },
      getData() {
        // 插入 10 个随机点
        const listPointData1 = []
        const listPointData2 = []
        const listPointData3 = []
        const listPointData4 = []
        const listPointData5 = []

        const num = 100

        for (let i = 1; i < num; i++) {
          const position = {
            lng: Math.random() * 40 + 85,
            lat: Math.random() * 30 + 21,
            id: i,
            type: 1
          }
          this.listPointData1.push(position)
        }
        for (let i = 1; i < num; i++) {
          const position = {
            lng: Math.random() * 40 + 85,
            lat: Math.random() * 30 + 21,
            id: i,
            type: 2
          }
          this.listPointData2.push(position)
        }
        for (let i = 1; i < num; i++) {
          const position = {
            lng: Math.random() * 40 + 85,
            lat: Math.random() * 30 + 21,
            id: i,
            type: 3
          }
          this.listPointData3.push(position)
        }
        for (let i = 1; i < num; i++) {
          const position = {
            lng: Math.random() * 40 + 85,
            lat: Math.random() * 30 + 21,
            id: i,
            type: 4
          }
          this.listPointData4.push(position)
        }
        for (let i = 1; i < num; i++) {
          const position = {
            lng: Math.random() * 40 + 85,
            lat: Math.random() * 30 + 21,
            id: i,
            type: 5
          }
          this.listPointData5.push(position)
        }

      },

      iconSelect(value) {
        if (value == 1) {
          return mapIconPath1
        } else if (value == 2) {
          return mapIconPath2
        } else if (value == 3) {
          return mapIconPath3
        } else if (value == 4) {
          return mapIconPath4
        } else if (value == 5) {
          return mapIconPath5
        } else {
          return mapIconPath
        }

      },
      syncCenterAndZoom(e) {
        const {
          lng,
          lat
        } = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      },
    },
  }
</script>

<style>
  .mapView {
    width: 100%;
    height: 850px;
    position: relative;
  }

  .mapContent {
    width: 100%;
    height: 850px;
  }
</style>

3.图标资源