есть ли способ узнать, какие маркеры кластеризованы, используя vue2- google-maps и marker-clusterterer-plus - PullRequest
Новая
       43

есть ли способ узнать, какие маркеры кластеризованы, используя vue2- google-maps и marker-clusterterer-plus

1 голос
/ 06 мая 2020

Привет всем! Я хотел бы узнать, есть ли способ узнать, какие пользовательские маркеры кластеризованы, а также есть ли способ прослушать изменение декластерируемых маркеров при увеличении масштаба? 

<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, и когда я console.log (this. $ Refs.marker), я получаю доступ к этому идентификатору, но не знаю, как определить, находится ли он в кластере или нет. Есть идеи, как действовать?

1 Ответ

0 голосов
/ 25 августа 2020

Я решил проблему для gmap-marker - это то, что у меня сработало, может быть актуально и для пользовательского компонента маркера.

В методе при @click событии объекта кластера - метод обработчика получает Cluster, который содержит функцию getMarkers, которая возвращает список маркеров в неясном формате, а не фактический список маркеров. Но у этих маркеров есть метод getTitle, который извлекает информацию, которая была установлена ​​как title prop компонента gmap-marker в шаблоне. Итак, установив какой-то идентификатор в этой опоре плюс для каждого маркера, можно сопоставить «маркеры» кластера с вашими маркерами.

Пример сценария: 

  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:

как найти маркеры в отдельных кластерах в объекте кластера маркеров в Google Maps API v3?

...