yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS
MIT License
358 stars 103 forks source link

Не исчезачет маркер при открытии балуна #267

Closed kirillkushpel closed 2 years ago

kirillkushpel commented 4 years ago

Добрый день! Столкнулся с проблемой, что при открытии балуна сам маркер не исчезает, остается только его спрятать под "хвостом" балуна. Используется последняя версия плагина и дефолтные options. Это может быть связано с тем, что на маркерах висит дополнительное @click? image

PNKBizz commented 4 years ago

Добрый день! Сделайте пример в песочнице

kirillkushpel commented 4 years ago

Не могу выложить в песочницу, есть локальные зависимости. Но сам компонент выглядит вот так


<template>
  <div :class="b()">
    <yandex-map
      :coords="mapCoordinates"
      :zoom="mapZoom"
      :controls="[]"
      :show-all-markers="isShowAllMarkers"
      @map-was-initialized="mapInitialized"
    >
      <ymap-marker
        v-for="(boutique, key) in boutiques"
        :key="key"
        :marker-id="key"
        :coords="boutique.coordinates"
        :icon="markerIcon"
        @click="updatePickupPoint(boutique.id)"
      />
    </yandex-map>
  </div>
</template>

<script>
  import { yandexMap, ymapMarker } from 'vue-yandex-maps';
  import purchaseCheckoutPickupMixin from './purchase-checkout-pickup-mixin';

  export default {
    name: 'purchase-checkout-pickup-map',
    components: {
      yandexMap,
      ymapMarker
    },
    inject: ['settings'],
    mixins: [purchaseCheckoutPickupMixin],
    props: {
      boutiques: Array,
      storeId: Number,
      mapCoordinates: Array
    },
    data() {
      return {
        mapZoom: 10,
        pickupMap: {},
        markerIcon: this.settings.pickupMapMarkerSettings
      };
    },
    computed: {
      isShowAllMarkers() {
        return !this.isOneBoutique;
      },
      isOneBoutique() {
        return this.boutiques.length === 1;
      }
    },
    watch: {
      boutiques: {
        handler() {
          this.closeBalloon();
          this.clearMap();
        },
        deep: true
      },
      storeId() {
        this.openBoutiqueBalloon();
        this.openBalloonOnSingleBoutique();
      }
    },
    methods: {
      mapInitialized(map) {
        this.pickupMap = map;
        this.selectSinglePickupPoint();
        this.openBoutiqueBalloon();
        this.openBalloonOnSingleBoutique();
      },
      balloonTemplate(item) {
        return `
          <div>Выбранный бутик:</div>
          <div class="title">${item.name}</div>
          <div class="address">${item.address}</div>
        `;
      },
      openBalloon(boutique) {
        this.pickupMap.balloon.open(boutique?.coordinates, this.balloonTemplate(boutique));
      },
      async openBoutiqueBalloon() {
        if (!this.storeId || this.isOneBoutique) {
          return;
        }
        const boutique = this.boutiques.find(item => item.id === this.storeId);
        this.openBalloon(boutique);
      },
      async openBalloonOnSingleBoutique() {
        if (!this.isOneBoutique) {
          return;
        }
        const boutique = this.boutiques[0];
        this.openBalloon(boutique);
        await this.centerMapOnBoutique(boutique);
      },
      closeBalloon() {
        this.pickupMap.balloon.close();
      },
      clearMap() {
        this.pickupMap.geoObjects.removeAll();
      },
      selectSinglePickupPoint() {
        if (!this.isOneBoutique) {
          return;
        }

        this.updatePickupPoint(this.boutiques[0].id);
      },
      async centerMapOnBoutique(boutique) {
        const mapZoom = 12;
        this.pickupMap.setCenter(boutique.coordinates, mapZoom);
      },
      updatePickupPoint(newStoreId) {
        this.$emit('update-store-id', newStoreId);
      }
    }
  };
</script>
PNKBizz commented 4 years ago

Сделайте без локальных зависимостей, просто чтобы воспроизвести проблему.

agent-bo-007 commented 2 years ago

Проблема возникает из-за того, что балун открывается через свойство карты, а не через свойство маркера.