Closed kirillkushpel closed 2 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>
Сделайте без локальных зависимостей, просто чтобы воспроизвести проблему.
Проблема возникает из-за того, что балун открывается через свойство карты, а не через свойство маркера.
Добрый день! Столкнулся с проблемой, что при открытии балуна сам маркер не исчезает, остается только его спрятать под "хвостом" балуна. Используется последняя версия плагина и дефолтные![image](https://user-images.githubusercontent.com/47214006/92076833-e84d3100-edc3-11ea-84dd-39e3dfeb1b3f.png)
options
. Это может быть связано с тем, что на маркерах висит дополнительное@click
?