在地图容器外打开动态锚点弹出窗口答案

【问题标题】：Dynamic anchor popup open outside of map container在地图容器外打开动态锚点弹出窗口
【发布时间】：2020-07-10 16:57:22
【问题描述】：

当它们在地图边缘打开时，我们会在地图容器之外显示弹出窗口。但是，如果地图被移动，弹出窗口将显示正确的锚点以适合地图容器。

当我们检查 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。

我们有没有做一些事情导致弹出窗口打开时锚总是“向下”？

谢谢

【问题讨论】：

CarouselPopUpClass 是什么？
嗨 Zim，这是一个挂载到
的 vuejs 实例，它是这样启动的： const CarouselPopUpClass = Vue.extend(CarouselPopUp);
我很难理解您想要实现的目标以及出了什么问题。你能用不同的方式表达前两个句子吗？
您好史蒂夫，当然，正如您在屏幕截图中看到的那样，如果我们单击地图边界旁边的符号，将显示一个带有底部锚点的弹出窗口。我们还没有为 popus 设置锚位置。现在，如果我们移动地图，同一个弹出窗口的锚属性将发生变化，弹出窗口将出现在地图视图中。我们的问题是，如果符号要靠近地图边界，为什么当我们单击符号时不会发生锚点位置的动态变化？

标签： javascript vue.js vuetify.js mapbox-gl-js

【解决方案1】：

我回到了帮助我们在弹出窗口中添加 vuejs 组件的文章。文末有说明我们需要“挂载后”更新弹窗

popup._update();

The article

【讨论】：