javascript - 传单.js : Popup outside map container

Question

我需要像这样在 map 容器之外打开一个弹出窗口:

在 map 容器和另一个 div 上弹出，总是在顶部，我使用了 z-index在.leaflet-popup-content-wrapper没有成功。

我也用过L.marker([14, -45]).bindPopup(content,{autoPan:false}).addTo(map);但始终在容器内显示弹出窗口。

Answer 1

编辑

解决方法是自己实现“弹出窗口”，使其属于 map 容器父级，而不是 map 容器内部。

您需要实现标记移动跟踪，但使用 Leaflet 这很容易:

1. 使用 map 的"move"事件
2. 使用 map.latLngToContainerPoint() 检索标记当前位置
3. 使用 L.DomUtil.setTransform() 移动您的弹出窗口应用 translate3d(硬件加速翻译)的方法。

map.on("move", function () {
  movePopup();
});

function movePopup() {
  var mapContainerRelativePos = map.latLngToContainerPoint(mymarker.getLatLng()),
    x = mapContainerPos.left + mapContainerRelativePos.x,
    y = mapContainerPos.top + mapContainerRelativePos.y;

  L.DomUtil.setTransform(mypopup, {x: x, y: y}, 1);
}

演示:https://jsfiddle.net/3v7hd2vx/54/

然后剩下的就是打开和关闭弹出窗口。

---

原始答案

L.Popup 被添加到 map 元素中。所以默认情况下它不能扩展到 map 容器之外。

但是您可以尝试通过检索关联的 HTML 元素并将其附加到外部 DOM 父节点来“提取”它(Leaflet 1.0 中的 popup.getElement())，这样您就不会不再绑定(bind)到 map 容器。