web-dev-qa-db-ja.com

リーフレットセンターのポップアップと地図へのマーカー

マーカーをポップアップの中央に配置したいのですが、地図をマーカーの緯度ではなく、マーカーとポップアップの中央に配置します。問題は、ポップアップに動的コンテンツ（クリック時にロードされる）があることです。

マップサイズは、モバイルデバイスでのフルディスプレイサイズです。ポップアップでautoPanPaddingオプションを使用しましたが、十分ではありません

次の図を参照してください。

popup centered in leaflet map

javascriptdictionaryleaflet
19
stefcud

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
});
37
Dan Mandle

簡単な解決策は次のとおりです。

まず、マップをマーカーの中央に配置します。

map.setView(marker.latLng);

次に、ポップアップを開きます。

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

リーフレットはポップアップがマップに収まるように自動的にマップをパンします。より美しく見せるために、CSSを使用してポップアップにmargin-topを追加できます。

5
Titsjmen

チャオステファノ、

これはテストされていない擬似コードですが、Leaflet project/unproject 関数が支援を提供する必要があります。

つまり;

// 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 を使用すると、これは穏やかな遷移になります）。

幸運を！

5
fitzpaddy