markers is not defined

[cnpczhangyuepeng]

若干个marker的坐标相同，点击时只能放大，我想获取该聚合点下有哪些marker，然后用infowindow展示，但是调用天地图中提到的方法时报错，求各位大神指导

[bienvenidoY]

+1

[zhongjiabao]

+1

[bienvenidoY]

思路

通过查找天地图中调试代码，确定clusterclick聚合点点击事件,重写这个事件拿到需要的点位列表信息，希望对你有帮助

demo 代码

<template>
...
       <tdt-marker-clusterer
        :markers="markers"
        :styles="state.styles"
        @click="onAction"
        @init="initMarkerClusterer"
      />
...
</template>
<script>
  export default {
    ...
    methods: {
      // 自定义 clusterclick 聚合点点击事件
      initMarkerClusterer(markerClusterer) {
      this.markerClusterer = markerClusterer
      Object.entries(markerClusterer).forEach(([, val]) => {
        if(val.clusterclick) {
          val.clusterclick.shift()
        }
      })
      markerClusterer.addEventListener('clusterclick', this.onClusterclick)
    },
       onClusterclick(e) {
      // 地图进行放大
      if(this.map.getZoom() < 18) {
        this.map.centerAndZoom(e.lnglat, this.map.getZoom() + 1)
        return
      }

      // 在地图放至最大时进行重复点位的展示
      const { layer } = e
      // 1. 需要在layer中检索出 options.childCount
      let childCount = 0
      Object.entries(layer).forEach(([, val]) => {
        // 天地图重新编译字段变量会有变化，所以使用对象遍历
        if(isObject(val) && !!val.options) {
          childCount = val.options.childCount || 0
        }
      })
      // 2. 需要在layer中检索出重叠的点位
      let markerList = []
      Object.entries(layer).forEach(([, val]) => {
        // 天地图重新编译字段变量会有变化，所以使用对象遍历
        if(Array.isArray(val) && childCount === val.length) {
          markerList = val
        }
      })
      // 3. 当前聚合点位对应的点位列表
      console.log(e, markerList)

    },
    }
  }
</script>   

[SoulLyoko]

思路

通过查找天地图中调试代码，确定clusterclick聚合点点击事件,重写这个事件拿到需要的点位列表信息，希望对你有帮助

demo 代码

<template>
...
       <tdt-marker-clusterer
        :markers="markers"
        :styles="state.styles"
        @click="onAction"
        @init="initMarkerClusterer"
      />
...
</template>
<script>
  export default {
    ...
    methods: {
      // 自定义 clusterclick 聚合点点击事件
      initMarkerClusterer(markerClusterer) {
      this.markerClusterer = markerClusterer
      Object.entries(markerClusterer).forEach(([, val]) => {
        if(val.clusterclick) {
          val.clusterclick.shift()
        }
      })
      markerClusterer.addEventListener('clusterclick', this.onClusterclick)
    },
       onClusterclick(e) {
      // 地图进行放大
      if(this.map.getZoom() < 18) {
        this.map.centerAndZoom(e.lnglat, this.map.getZoom() + 1)
        return
      }

      // 在地图放至最大时进行重复点位的展示
      const { layer } = e
      // 1. 需要在layer中检索出 options.childCount
      let childCount = 0
      Object.entries(layer).forEach(([, val]) => {
        // 天地图重新编译字段变量会有变化，所以使用对象遍历
        if(isObject(val) && !!val.options) {
          childCount = val.options.childCount || 0
        }
      })
      // 2. 需要在layer中检索出重叠的点位
      let markerList = []
      Object.entries(layer).forEach(([, val]) => {
        // 天地图重新编译字段变量会有变化，所以使用对象遍历
        if(Array.isArray(val) && childCount === val.length) {
          markerList = val
        }
      })
      // 3. 当前聚合点位对应的点位列表
      console.log(e, markerList)

    },
    }
  }
</script> 

感谢分享！实际项目中可以按照这样的思路根据实际需求进行改造。但如果我在组件中重写官方的api，那就违背了封装的初衷了。

[SoulLyoko]

v2.7.5新增了clusterclick事件