傳單中心彈出窗口和地圖標記

Question

我想讓我的標記在彈出窗口中居中打開......並且將地圖居中不在標記 latlng 中，而是在標記和彈出窗口的中心！ 問題是彈出窗口有動態內容（點擊加載）。

地圖大小是移動設備中的完整顯示大小！ 我只是在彈出窗口中使用了 autoPanPadding 選項但還不夠

參考下圖：

Answer 1

使用fitzpaddy的回答，我能夠使這段代碼有效並且更加靈活。

map.on('popupopen', function(e) {
    var px = map.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is
    px.y -= e.target._popup._container.clientHeight/2; // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
    map.panTo(map.unproject(px),{animate: true}); // pan to new center
});

Answer 2

喬斯特凡諾，

這是未經測試的偽代碼，但 Leaflet項目/取消項目功能應該提供幫助。

IE;

// Obtain latlng from mouse event
var latlng;
// Convert latlng to pixels
var px = project(latlng);
// Add pixel height offset to converted pixels (screen origin is top left)
px.y -= mypopup.height/2
// Convert back to coordinates
latlng = unproject(px);
// Pan map
map.panTo(latlng,{animate: true});

這取決於在計算過程中縮放比例是恆定的，因此您可能需要平移地圖，然后計算平移偏移量才能正確更新（使用animation ，這將只是一個溫和的過渡）。

祝你好運！

Answer 3

這是一個簡單的解決方案：

首先，您將地圖居中到您的標記處。

map.setView(marker.latLng);

然后你打開彈出窗口。

var popup.openOn(map); = L.popup()
    .setLatLng(marker.latLng)
    .setContent(dynamic-content)
    .openOn(map);

Leaflet 將自動平移地圖，以便彈出窗口適合地圖。 為了使它看起來更漂亮，您可以使用 CSS 在彈出窗口中添加邊距頂部。

Answer 4

我非常簡單的解決方案保持當前的縮放級別以及更好的可用性。

map.on('popupopen', function (e) {
    map.setView(e.target._popup._latlng, e.target._zoom);
});