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

12

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:

Bildbeschreibung hier eingeben

Gerd
quelle
Check out this Q / A, stackoverflow.com/questions/27144334/…
artwork21
auf deinem link funktioniert keine lösung. Vielleicht ist der Kommentar wahr: "Was Sie tun könnten, ist sich in den Klick des Markers einzuklinken und Ihr eigenes Popup mit benutzerdefiniertem Code zu zeichnen." Kein einfacher Weg für das untere Popup?
Gerd
1
Die aktuelle Situation ist dieselbe wie im Kommentar-Link von artwork21 in Bezug auf Ihre Frage zum Popup unterhalb der Markierung. Siehe die Antwort von FranceImage ( stackoverflow.com/a/27144900/5108796 ) mit dem vorgeschlagenen Plugin. Sie können dieses Plugin verwenden oder sich von ihm inspirieren lassen, um Ihr eigenes benutzerdefiniertes Popup zu erstellen.
Ghybs
Können wir das nicht in der CSS-Positionierung des Popups selbst tun? Weil standardmäßig von unten referenziert wird, wenn wir nach oben wechseln, dann ist es korrekt [bis zu einem festen Versatz], unabhängig von den gewählten Schriftarten / Schriftgrößen / Zeilenhöhen und der Anzahl der Textzeilen? Ich übersehen wahrscheinlich etwas.
user3445853

Antworten:

2

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.

Robert
quelle
Gleiches Problem wie bei der neueren [29. August 2019] Antwort von @Johannes: Dieser Versatz ist falsch, so schnell es eine zweite oder weitere Textzeile im Popup gibt; oder Änderungen in CSS (Schriftgröße, Schrift, Zeilenhöhe, Abstand, Rand, Popup-Größe, ...). Daher lautet die ursprüngliche Antwort "Es gibt keine native Lösung".
user3445853
2

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

Johannes
quelle
Das Problem bei diesem Ansatz ist, dass Sie magische Zahlen für den Versatz haben: Wenn sich die Schriftgröße oder die Schriftart oder sogar die Zeilenhöhe ändert, ist der Versatz schlecht. Problematischer ist, dass einige Popups, die eine zweite (oder dritte usw.) Textzeile enthalten, jetzt eine volle Zeilenhöhe (oder zwei usw.) aufweisen, die zu hoch ist und wahrscheinlich die Markierung und ihre Umgebung vollständig überlappt. Sie müssen wahrscheinlich die Höhe des Texts im Popup messen und den Versatz dynamisch ändern und ihn mit JS während / nach dem Rendern verschieben. Oder haben Sie ein sehr festes CSS und berechnen Sie es während Ihres Flugblattplans, bevor Sie den Marker hinzufügen.
user3445853
1

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.

user3445853
quelle