vue-baidu-map 点聚合bml-marker-clusterer根据不同类型设置聚合图标

1.效果： 2.代码：

  
    



      
      

      
      

      
        
        
      

      
        
        
      

      
        
        
      

      
        
        
      

      
        
        
      

      
      
    
  



  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