Merkblatt center popup UND marker auf der Karte

Ich soll Mitte meine Markierung auf popup öffnen.. und das zentrieren der Karte nicht in marker, latlng, aber auf center marker und popup -!
Das problem ist, dass popup-Fenster dynamische Inhalte(geladen auf klicken).

Die map-Größe ist die display-Größe in einem mobilen Gerät!
Ich bin nur verwendet autoPanPadding option im popup, aber nicht ausreichend

Finden Folgen Sie Bild:

Merkblatt center popup UND marker auf der Karte

diese Lösung ist integriert in KeplerJs framework-code.

InformationsquelleAutor StefanoCudini | 2014-03-20
  1. 37

    Mit fitzpaddy's Antwort, die ich war in der Lage, diese code funktioniert und ist viel flexibler.

    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
});
    • Das ist genial, vielen Dank
    InformationsquelleAutor Dan Mandle
  2. 5

    Ciao Stefano,

    Dies ist ungetestet pseudocode, aber Faltblatt Projekt/unproject Funktionen sollten Hilfe anbieten.

    ich.e;

    //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});

    Diese hängt vom zoom-Maßstab konstant während der Berechnung, so dass Sie erforderlich sein könnten, um den Kartenausschnitt zu und berechnen dann die pan offset korrekt aktualisiert (mit animation, das nur ein sanfter übergang).

    Glück!

    InformationsquelleAutor fitzpaddy
  3. 5

    Hier eine einfache Lösung:

    Erste man Mitte der Karte, um Ihre Markierung.

    map.setView(marker.latLng);

    Dann öffnen Sie das popup.

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

    Broschüre wird automatisch verschieben Sie die Karte so, dass das popup-passt auf die Karte. Machen Sie mehr schön Aussehen, können Sie einen margin-top für das popup mit CSS.

    • Vielen Dank! War auf der Suche für eine automatische Antwort wie diese. Die anderen Antworten, dass berechnet, dass die popup Höhe waren nicht für mich arbeiten.
    • Das problem bei dieser Lösung ist, dass es nicht die center, die popup-und marker. Es wird nur machen Sie sicher, dass das popup wird innerhalb der sichtbaren Karte.
    • Ich denke, dass, wenn Sie möchten hinzufügen top: 50%; übersetzen: transformY(-50%); in der CSS wäre es eigentlich in der Mitte der Karte.
    InformationsquelleAutor Titsjmen
Schreibe einen Kommentar