Не понимаю как сделать так, чтобы когда открыт попап маркера - при нажатии на нужную мне кнопку закрыть его. Как то Vue должен знать об открытом попапе, чтобы закрыть именно его.
Также нужно, чтобы при нажатии на некую карточку - открывался нужный попап, связанный с ней скажем по id.
Здесь создаю карту и маркеры:
this.markers = DG.featureGroup()
this.popups = DG.featureGroup()
this.map = DG.map("map", {
center: [54.98, 82.89],
zoom: 13,
minZoom: 7
});
this.getUsersinGroup()
.then(response => {
this.residentials.forEach(residential =>{
let myDivIcon = DG.divIcon({
iconSize: [30, 30],
className: 'marker-custom',
html: `<div class="marker-wrapper" data-id="${data.id}">
<div class="mini-marker-wrapper">
<div class="mini-marker"></div>
</div>
<div class="marker-info-wrapper">
<div class="marker-title">${data.title}</div>
<div class="marker-price">от ${priceMinFormatted} ₽</div>
<div class="marker-decor"></div>
</div>
</div>`
});
this.pointPopup = DG.point(0, 1);
this.popupMap = DG.popup({
className: 'test-name',
closeButton: false,
offset: this.pointPopup,
setZoomMarker: false
})
.setContent(`<div class="marker-wrapper" data-id="${data.id}">
<div class="mini-marker-wrapper">
<div class="mini-marker"></div>
</div>
<div class="marker-info-wrapper">
<div class="marker-title">${data.title}</div>
<div class="marker-price">от ${priceMinFormatted} ₽</div>
<div class="marker-decor"></div>
</div>
</div>`)
this.coordinates = [residential.latitude, residential.longitude];
DG.marker(this.coordinates, { icon: myDivIcon }).addTo(this.markers)
.bindPopup(this.popupMap)
})
this.markers.addTo(this.map);
