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

  • Z时代
  • 2024-02-29
  • 分类：IT

这三个点坐标值不存在重复，聚合点clusterData有值的
高德地图聚合点放大后clusterData没有数据
但是放大到单个点时就没有值了
高德地图聚合点放大后clusterData没有数据
别的点就不存在这个情况，请问有没有大神遇到这种情况呀

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()
    }

以上是 高德地图聚合点放大后clusterData没有数据 的全部内容， 来源链接： utcz.com/p/936251.html

回到顶部