高德地图聚合点放大后clusterData没有数据

这三个点坐标值不存在重复,聚合点clusterData有值的
image.png
但是放大到单个点时就没有值了
image.png
别的点就不存在这个情况,请问有没有大神遇到这种情况呀

drawCluster() {
      const scope = this
      const { GDMap, bridgePoints } = scope
      const count = bridgePoints.length

      function _renderClusterMarker(context) {
        var factor = Math.pow(context.count / count, 1 / 18)
        var div = document.createElement('div')
        var Hue = 180 - factor * 180
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)'
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'
        div.style.backgroundColor = bgColor
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
        div.style.width = div.style.height = size + 'px'
        div.style.border = 'solid 1px ' + borderColor
        div.style.borderRadius = size / 2 + 'px'
        div.style.boxShadow = '0 0 5px ' + shadowColor
        div.innerHTML = context.count
        div.style.lineHeight = size + 'px'
        div.style.color = fontColor
        div.style.fontSize = '14px'
        div.style.textAlign = 'center'
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
        context.marker.setContent(div)
      }
      function _renderMarker(context) {
        var content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>'
        var offset = new AMap.Pixel(-9, -9)
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      }
      const cluster = new AMap.MarkerCluster(GDMap, bridgePoints,
        {
          gridSize: 60,
          averageCenter: true,
          renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
          renderMarker: _renderMarker // 自定义非聚合点样式
        }
      )

      // 点击散开的功能https://blog.csdn.net/qq_39157025/article/details/120287561
      cluster.on('click', (opt) => {
        console.log(opt)

        if (opt.clusterData.length === 1) {
          const marker = opt.clusterData[0]
          console.log(marker)
        //   const lnglat = [marker.lnglat.lng, marker.lnglat.lat]
        //   const content = scope.$refs.planMapInfoWindow
        //   const infoWindow = new AMap.InfoWindow(
        //     {
        //       content,
        //       autoMove: true, // 是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示)
        //       offset: [0, -25] // 信息窗体显示位置偏移量。默认基准点为信息窗体的底部中心。默认值: [0, 0]
        //     }
        //   )
        //   infoWindow.open(GDMap, lnglat) // 打开信息窗体
        } else {
          GDMap.zoomIn()
        }
      })
      return Promise.resolve()
    }
阅读 2.6k
1 个回答
新手上路,请多包涵

原因是因为MarkerCluster的maxZoom控制了聚合点有效的层级,地图层级大于这个的时候clusterData里就没数据了,应该去cluster里去取,打印的opt里可以看到这些信息。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题