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：地圖容器外彈出

回答

相關問題