百度地图点位渲染及点位聚合封装的方法

function myMarkerClusterer(
  { map, // 地图实例(必传)
    BMap, // 地图方法(必传)
    BMapLib, // 地图方法(必传)
    markerImg, // marker的图片(必传)
    markerImgJU, // 聚合后的图片(必传)
    markerData, // 所有点位的数据(必传)
    markerSize = new BMap.Size(24, 32), // marker的size
    markerAnchor = new BMap.Size(15, 55), // marker的偏移度
    labelOffset = new BMap.Size(5, -35), // label的偏移度
    labelStyle = { // label的样式
      color: '#fff',
      backgroundColor: 'rgba(254,127,42)',
      borderRadius: '2px',
      padding: '0 10px',
      fontSize: '12px',
      lineHeight: '20px',
      border: '0',
      transform: 'translateX(-50%)'
    },
    markerClustererStyle = [// 聚合后的样式
      {
        url: markerImgJU,
        size: new BMap.Size(33, 47),
        anchor: new BMap.Size(6, 0.1),
        textColor: '#fff'
      }
    ],
    markerClickFuction = function (e) { // marker点击方法
      console.log(e)
    },
    markerClickArgument = 'name', // marker点击获取的参数
    hasLabel = true
  } = {}
) {
  let ptMarker = null// 转换格式后的marker点位
  const markers = []// 所有的marker
  const markerIcon = new BMap.Icon(markerImg, markerSize, { // marker图标及样式
    anchor: markerAnchor
  })
  for (let i = 0; i < markerData.length; i++) {
    ptMarker = new BMap.Point(markerData[i].lng, markerData[i].lat)// 将传入的数据转换为需要的点位格式
    // 以下是marker的代码
    const marker = new BMap.Marker(ptMarker, { // marker
      icon: markerIcon
    })
    if (hasLabel) {
      // 以下是label的代码
      const label = new BMap.Label(markerData[i].name, { // label
        position: ptMarker, // 指定文本标注所在的地理位置
        offset: labelOffset // 设置文本偏移量
      })
      label.setStyle(labelStyle)// 设置label样式
      marker.setLabel(label)// 将label绑定到marker上
    }

    marker[markerClickArgument] = markerData[i][markerClickArgument]// marker点击所需要的参数
    marker.addEventListener('click', markerClickFuction)// marker点击事件

    map.addOverlay(marker)// 将marker渲染到地图上
    markers.push(marker)// 收集所有的marker以便聚合
  }

  // 最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
  const markerClusterer = new BMapLib.MarkerClusterer(map, { // 聚合后的markerClusterer
    markers
  })
  markerClusterer.setStyles(markerClustererStyle)// 设置聚合样式（可以按照层级设置多种）
  return {
    markers,
    markerClusterer
  }
}
export default myMarkerClusterer