Ändern der Popup-Position in der Broschürenmarkierung?

Ich möchte ein Popup am unteren Rand meines Markierungssymbols in der Broschüre öffnen.

mein Code:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

So bekomme ich ein Popup oben auf meinem Marker.

Ich möchte ein Popup unten wie folgt erhalten:

Es gibt keine native Packungsbeilage.

Eine andere Möglichkeit ist die Verwendung von https://github.com/erictheise/rrose

Schöne Demo:

http://jsfiddle.net/asleepwalker/6m81vtad/

Sie können die Offsets mithilfe der popupAnchorOptionen angeben , jedoch nicht dort, wo Sie dies erwarten würden. Zunächst müssen Sie ein Symbol wie das folgende angeben:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

Sie können dieses Symbol dann in Ihren Markierungsoptionen verwenden:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

Nun öffnet sich Ihr Popup 30 px über Ihrem Marker. Dies ist nicht genau das, wonach Sie gefragt haben, da Sie auch das kleine Pfeildreieck oben auf Ihrem Popup platzieren müssen, aber ich denke, es ist immer noch erwähnenswert.

Ich weiß, dass dies eine alte Frage ist, aber Sie müssen nicht den in seiner Antwort beschriebenen Umweg über @Robert nehmen.

Wie beim PopupErben von DivOverlaykönnen Sie die Versatzoption direkt beim Initialisieren der Popupfolgenden Elemente festlegen :

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

Lesen Sie die Dokumente: https://leafletjs.com/reference-1.5.0.html#popup

Dies scheint nur in CSS möglich zu sein. Unten überschreibe ich (mit !important) nur drei CSS-Elementen und füge ein :beforePseudoelement hinzu . Ich reihe das Popup im Wesentlichen zuerst mit dem oberen statt dem unteren Rand ein , wobei es 55px nur auf den von Ihnen gewählten Marker und den persönlichen Geschmack ankommt.

Dann bewege ich die "Spitze" des Popups auf ähnliche Weise von unten nach unten top:0pxund stelle fest, dass sie nicht mit dem "normalen" Trick erstellt wurde (das heißt: Zuerst am Rand der Blase ein Pseudoelement der Größe 0x0 mit einem dicken transparenten Rand positionieren und dann ausmalen Element gegenüber dem Rand, auf den Sie zeigen möchten (in unserem Fall der untere Rand). Stattdessen scheint es aus einem Rechteck zu bestehen, das von oben links gedreht wurde (vielleicht, weil es den Browser dazu zwingt, die GPU zu verwenden und damit alles zu beschleunigen?), Und ich verstehe den Punkt (entschuldigen Sie das Wortspiel) nicht gut genug ( mein tipp ist am richtigen ort aber unsichtbar); Also entferne ich einfach den Kastenschatten, der sich jetzt an der falschen Stelle befindet, und lasse alles so wie es ist. Wer den "alten Tipp" versteht, passt das bitte an.

Also mache ich stattdessen meinen eigenen Tipp mit dem "normalen" Prozess (wenn Sie sich nicht sicher sind, ändern Sie die vier Rahmenfarben unten, anstatt 3x transparent und 1x weiß --- zB border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red).

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

Wie dieses JSFiddle zeigt, ist es kein Problem mit unterschiedlichen Popup-Größen (unterschiedliche Breite, unterschiedliche Texthöhe), wenn Sie beide Marker ausprobieren.

Alles in allem scheint dies robust gegenüber Aktualisierungen in der Broschüre zu sein, da sich die Elemente, die ich überschreibe, wahrscheinlich nicht ändern werden.