google-maps - 有没有办法使用 vue2-google-maps 和 marker-clusterer-plus 来判断哪些标记正在被聚类

Question

大家好，我想知道是否有一种方法可以判断哪些自定义标记正在被聚类，以及是否有一种方法可以在放大时听取被分散的标记的变化？

<template>
<gmap-map
  ref="gmap"
  :options="{
    disableDefaultUi: true,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,
    scrollwheel: false,
    clickableIcons: false
  }"
  :center="center.hasOwnProperty('lat') ? center : markers[0].position"
  :zoom="10"
  :style="{ width: width, height: height }"
>
   <gmap-cluster
      :gridSize="30"
      :zoomOnClick="true"
      :enableRetinaIcons="true"
      :minimumClusterSize="3"
      ref="cluster"
      @click="clusteredMarkers($event)"
    >
      <gmap-custom-marker
        v-for="(m, index) in markers"
        :key="index"
        :id="index"
        :marker="m.position"
        ref="marker"
       >
        <v-avatar color="primary" size="25">
          <span
            @click="center = m.position"
            @mouseover="$emit('changeEl', index + 1)"
            @mouseleave="$emit('changeEl', '')"
            size="15"
            :class="
              hoveringEl - 1 === index ? 'white--text' : 'white--text'
            "
            >{{ index + 1 }}</span
          >
        </v-avatar>
      </gmap-custom-marker>
    </gmap-cluster>
</gmap-map>
</template>

我的脚本是这样的:

<script>
import GmapCustomMarker from 'vue2-gmap-custom-marker';
import GmapCluster from 'vue2-google-maps/dist/components/cluster';

export default {
  name: 'GoogleMap',

  components: {
    GmapCustomMarker,
    GmapCluster
  },

  props: {
    markers: {
      type: [Object, Array],
      required: false
    },
  },

  data() {
    return {
      center: {},
      places: [],
      currentPlace: null
    };
  },

  methods: {
    clusteredMarkers(event) {
      console.log(event.getMarkers());
    }
  }
};
</script>

我不得不删除敏感信息并留下我认为需要查看问题的全部范围的内容。如果您需要更多信息，请告诉我。

在我的控制台上，当我点击集群时，我得到了适量的标记，但不确定如何在我的标记中识别它们。我还向 gmap-custom-marker 添加了一个 Id，当我使用 console.log(this.$refs.marker) 时，我可以访问该 Id，但不确定如何识别它是否在集群上。关于如何进行的任何想法？

Answer 1

我解决了 gmap-marker 的问题 - 这对我有用，可能也与自定义标记组件相关。

在群集对象的 @click 事件的方法中 - 处理程序方法接收 Cluster 对象，该对象包含返回标记列表的函数 getMarkers以某种晦涩的格式，而不是实际的标记列表。但是这些标记有 getTitle 方法，它会提取模板中 gmap-marker 组件的 title 属性设置的信息。因此，通过在该 prop plus 为每个标记设置某种 id，可以将集群的“标记”映射到您的标记。

脚本示例:

  toggleClusterInfo(cluster: Cluster) {
    //* Extract markers id list from cluster
    const markersIdList: string[] = []
    const gmapMarkers: { getTitle: () => string }[] = cluster.getMarkers()
    gmapMarkers.forEach((m) => markersIdList.push(m.getTitle()))

    // TODO: markersIdList contains list of values at `title` prop for each marker
    // use it to map to objects itself.
  }

和模板示例(重要的是将 title 属性设置为标记):

  <GmapCluster @click="toggleClusterInfo">
    <GmapMarker
      v-for="m in markers"
      :key="m.id"
      :title="m.id"
      :position="m.position"
      :clickable="true"
    ></GmapMarker>
  </GmapCluster>

这个问题的相关信息:

how to find the markers in the individual clusters in a marker cluster object in google maps api v3?