Leaflet.js：地图容器外的弹出窗口

Question

我需要打开一个类似于这样的地图容器之外的弹出窗口： 弹出窗口在地图容器和其他div之上，我在.leaflet-popup-content-wrapper中使用了z-index，但没有成功。

我还使用了L.marker([14, -45]).bindPopup(content,{autoPan:false}).addTo(map);，但总是在容器内显示弹出窗口。

- BryGom

Answer 1

编辑

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

您需要实现标记移动跟踪，但使用Leaflet相当容易：

1. 使用地图的"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被添加到地图元素中。因此，默认情况下，它不能超出地图容器的范围。

但是，您可以尝试通过检索相关的HTML元素并将其附加到外部DOM父节点来“提取”它（在Leaflet 1.0中使用popup.getElement()），以便您不再受地图容器的限制。

- ghybs

---

这正是我尝试过的...但并不是一个好答案，因为“克隆”元素是可能实现的，但它的定位不好且没有绑定到地图。我认为最好的答案是：很遗憾，这是不可能的。:( +1给@ghybs - Louys Patrice Bessette

太好了！我理解得更好了，感谢您提供的解决方案！ - BryGom