Bmap地图自定义图片撒点的图标和聚合的图标以及添加点位的方法（分多种类别撒点，比如大哥大的小弟。大姐头的小弟，聚合和撒点颜色都不一样）

本文链接：https://blog.csdn.net/Blue54/article/details/129876356

这段代码展示了如何在百度地图API中创建不同类型的标记（Marker），基于item.icon的值使用不同的图标，并添加点击事件监听器显示地图信息。同时，它使用MarkerClusterer将相似位置的标记进行分组，每个分组具有特定的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例loadXXXX方法：

  loadXXXX(map) {
      const markers_one = []
      const markers_twe = []
      const markers_three = []
      const markers_fore = []
      this.points.forEach((item, index) => {
        let pt = null
        if (item.icon === 0) {
          pt = new window.BMap.Point(item.lng, item.lat)
          var myIcon = new window.BMap.Icon(`./img/icon${item.icon}.png`, new window.BMap.Size(38, 40))
          const cretePoint = new window.BMap.Marker(pt, { icon: myIcon })
          cretePoint.addEventListener('click', (eee) => {
            this.showMapMessage(item, eee)
          })
          markers_one.push(cretePoint)
        } else if (item.icon === 1) {
          pt = new window.BMap.Point(item.lng, item.lat)
          var myIcon1 = new window.BMap.Icon(`./img/icon${item.icon}.png`, new window.BMap.Size(38, 40))
          const cretePoint = new window.BMap.Marker(pt, { icon: myIcon1 })
          cretePoint.addEventListener('click', (eee) => {
            this.showMapMessage(item, eee)
          })
          markers_twe.push(cretePoint)
        } else if (item.icon === 2) {
          pt = new window.BMap.Point(item.lng, item.lat)
          var myIcon2 = new window.BMap.Icon(`./img/icon${item.icon}.png`, new window.BMap.Size(38, 40))
          const cretePoint = new window.BMap.Marker(pt, { icon: myIcon2 })
          cretePoint.addEventListener('click', (eee) => {
            this.showMapMessage(item, eee)
          })
          markers_three.push(cretePoint)
        } else if (item.icon === 3) {
          pt = new window.BMap.Point(item.lng, item.lat)
          var myIcon3 = new window.BMap.Icon(`./img/icon${item.icon}.png`, new window.BMap.Size(38, 40))
          const cretePoint = new window.BMap.Marker(pt, { icon: myIcon3 })
          cretePoint.addEventListener('click', (eee) => {
            this.showMapMessage(item, eee)
          })
          markers_fore.push(cretePoint)
        }
      })
      this.markerClusterer = new window.BMapLib.MarkerClusterer(window.map, { markers: markers_one,
        styles: [
          {
            url: '/img/clustererone.png',
            size: new window.BMap.Size(49, 49),
            textSize: 12,
            textColor: '#fff',
            fontFamily: 'DIN'
          }
        ] })
      this.markerClusterer1 = new window.BMapLib.MarkerClusterer(window.map, { markers: markers_twe,
        styles: [
          {
            url: '/img/clustererfore.png',
            size: new window.BMap.Size(49, 49),
            textSize: 12,
            textColor: '#fff',
            fontFamily: 'DIN'
          }
        ] })
      this.markerClusterer2 = new window.BMapLib.MarkerClusterer(window.map, { markers: markers_three,
        styles: [
          {
            url: '/img/clustererthree.png',
            size: new window.BMap.Size(49, 49),
            textSize: 12,
            textColor: '#fff',
            fontFamily: 'DIN'
          }
        ] })
      this.markerClusterer3 = new window.BMapLib.MarkerClusterer(window.map, { markers: markers_fore,
        styles: [
          {
            url: '/img/clusterertwe.png',
            size: new window.BMap.Size(49, 49),
            textSize: 12,
            textColor: '#fff',
            fontFamily: 'DIN'
          }
        ] })
    },