Leaflet.js：弹出地图容器外部

Question

我需要在地图容器外打开一个弹出窗口，如下所示：

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

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

Answer 1

修改

解决方法是实现＆＃34; popup＆＃34;你自己，所以它属于地图容器 parent ，而不是里面地图容器。

您需要实现标记移动跟踪，但使用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。因此，默认情况下，它不能扩展到地图容器之外。

但是你可以尝试提取＆＃34;它（Leaflet 1.0中的popup.getElement()）通过检索关联的HTML元素并将其附加到外部DOM父节点，以便您不再绑定到地图容器。