D
D
danilr2019-04-07 17:27:52
Vue.js
danilr, 2019-04-07 17:27:52

How to understand the popup of which marker is open in the 2gis API in order to programmatically close it?

I don’t understand how to make it so that when the marker popup is open, when I click on the button I need, close it. Somehow Vue needs to know about the open popup in order to close it.
It is also necessary that when you click on a certain card, the desired popup opens, associated with it, say, by id.
Here I create a map and markers:

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);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-04-07
@danilr

You don't need to understand anything this.map.closePopup().
UPD. Taken from the comments:

And if several pop-ups of different markers are open? <...> how to open the necessary marker popup (without clicking on the marker itself, of course)

https://jsfiddle.net/Lmkbq54p/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question