Leaflet.js：地图容器外弹出

我需要打开一个弹出窗口，像这样的地图容器外： Leaflet.js：地图容器外弹出

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

我以前太L.marker([14, -45]).bindPopup(content,{autoPan:false}).addTo(map);但始终显示容器内弹出。

来源

2016-07-30 BryGom

编辑

一种解决方法是实行“弹出”自己，所以它属于地图容器父而不是内地图容器。

您需要实现标记的运动跟踪，但传单，这是相当容易：

使用地图的"move"事件
检索使用map.latLngToContainerPoint()
使用移动您的弹出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父节点来“提取”它（popup.getElement()在Leaflet 1.0中），以便不再绑定到地图容器。

来源

2016-07-30 04:59:21 ghybs

这正是我想......但没有一个很好的答案，因为一个“克隆”元素是可以实现的，但它的positionning不无界的地图好+。我认为最好的答案是：不幸的是，这是不可能的。 :(+1 @ghybs –

这似乎是一个解决方案，虽然，仍然无法正常工作。 – BryGom

增加了一个解决方法。 – ghybs

Leaflet.js：地图容器外弹出

回答

相关问题