有没有办法告诉使用 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 属性的信息。因此，通过为每个标记在该道具加上某种 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>

此 SO 问题的相关信息：

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