Dynami c якорное всплывающее окно открывается вне контейнера карты - PullRequest
Новая
       5

Dynami c якорное всплывающее окно открывается вне контейнера карты

0 голосов
/ 30 марта 2020

У нас всплывающие окна отображаются вне контейнера карты, когда они открываются по краю карты. Однако, если карта перемещена, всплывающие окна будут отображаться с правильной привязкой, чтобы поместиться внутри контейнера карты.

Когда мы проверяем DOM, мы видим, что всплывающие окна не всегда имеют правильный «якорный класс» снизу (см. Скриншоты). 

// init Map
let map = new mapboxgl.Map({
        container: "map", // container id
        // style: "mapbox://styles/mapbox/streets-v11"
        style: "mapbox://styles/kevin-fabre/ck8a28d160noh1imv3a9abrlu", // stylesheet location
        bounds: [
          [bbox[0], bbox[1]],
          [bbox[2], bbox[3]]
        ],
        maxBounds: this.bboxToBounds(this.getMaxBbox()),
      });

//Popups
let hoverPopup = new mapboxgl.Popup({
        offset: 32,
        closeButton: false,
        closeOnClick: true
      });
      let clickPopup = new mapboxgl.Popup({
        offset: 32,
        closeButton: false,
        closeOnClick: true
      });

// how we add popup to the map
map.on("displayClickPopup", e => {
    layerIpPopUp = e.features[0].properties.apiId;
    let coordinates = e.features[0].geometry.coordinates.slice();
    // Ensure that if the map is zoomed out such that multiple
    // copies of the feature are visible, the popup appears
    // over the copy being pointed to.
    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }
    clickPopup
      .setHTML('<div id="vue-popup-content"></div>')
      .setLngLat(coordinates)
      .addTo(map);
    const popupInstance = new CarouselPopUpClass({
      store,
      i18n,
      router,
      propsData: {
        posts: JSON.parse(e.features[0].properties.posts),
        currentApiId: e.features[0].properties.apiId
      }
    });
    popupInstance.$mount("#vue-popup-content");
  });

Мы также используем vuejs и vuetify внутри всплывающих окон .

Мы сделали что-то, что заставляет якорь всегда "опускаться" при открытии всплывающих окон?

Спасибо

screenshoot popup element mapcontainer

1 Ответ

0 голосов
/ 30 марта 2020

Я вернулся к статье, которая помогла нам добавить vuejs компонент во всплывающем окне. В конце статьи описывается, что нам нужно обновить всплывающее окно «после монтирования» 

popup._update();

Статья

...