Zmieniasz pozycję wyskakującą na znaczniku Ulotki?

Chcę otworzyć wyskakujące okienko u dołu ikony znacznika w Ulotce.

mój kod:

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();

Więc mam wyskakujące okienko nad moim znacznikiem.

Chcę uzyskać wyskakujące okienko na dole, takie jak:

Możesz określić przesunięcia, używając popupAnchoropcji, ale nie w miejscu, w którym byś się tego spodziewał. Najpierw musisz określić taką ikonę:

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

Następnie możesz użyć tej ikony w opcjach znacznika:

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

Teraz wyskakujące okienko otwiera się 30 pikseli powyżej znacznika. Nie jest to dokładnie to, o co prosiłeś, ponieważ musisz również umieścić mały strzałkowaty trójkąt na górze wyskakującego okienka, ale myślę, że nadal warto o tym wspomnieć.

Nie ma natywnego rozwiązania dotyczącego ulotek.

Innym sposobem jest użycie https://github.com/erictheise/rrose

Ładne demo:

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

Wiem, że jest to stare pytanie, ale nie trzeba korzystać z objazdu @Robert opisanego w odpowiedzi.

Podobnie jak w przypadku Popupdziedziczenia DivOverlay, możesz ustawić opcję przesunięcia bezpośrednio podczas inicjowania Popup:

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

Przeczytaj dokumentację: https://leafletjs.com/reference-1.5.0.html#popup

Wydaje się to możliwe tylko w CSS. Poniżej zastępuję (za pomocą !important) tylko trzy elementy CSS i dodam jeden :beforepseudoelement. Zasadniczo najpierw ustawiam wyskakujące okienko z górą zamiast z dołu , gdzie 55px zależy tylko od wybranego markera i osobistego gustu.

Następnie przesuwam „wyskakujące okienko” podobnie z dołu do top:0pxi odkrywam, że nie jest zrobione przy użyciu „normalnej” sztuczki (to znaczy: najpierw umieść na krawędzi bąbelka pseudoelement wielkości 0x0 z grubą przezroczystą ramką, a następnie pokoloruj go element przeciwnej granicy miejsca, w którym chcesz wskazać; w naszym przypadku dolna granica). Zamiast tego wydaje się, że jest zrobiony z prostokąta obróconego z jakiegoś lewego górnego rogu (może: ponieważ zmusza przeglądarkę do korzystania z GPU, a tym samym przyspiesza wszystko?), A ja nie rozumiem wystarczająco dobrze (przepraszam za kalambur) moja wskazówka jest we właściwym miejscu, ale niewidoczna); więc po prostu usuwam cień pola, który teraz znajduje się w niewłaściwym miejscu, i pozostawiam go takim, jakim jest - każdy, kto rozumie „starą wskazówkę”, popraw to.

Zamiast tego robię własną wskazówkę, stosując „normalny” proces (jeśli nie masz pewności, zmień cztery poniższe kolory obramowania zamiast 3x przezroczystych i 1x białych --- np 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;
}

Jak pokazuje ten JSFiddle , nie ma problemu z różnymi rozmiarami wyskakujących okienek (inna szerokość, inna wysokość tekstu), jeśli wypróbujesz oba znaczniki.

Podsumowując, wydaje się to odporne na aktualizacje w Ulotce, ponieważ elementy, które nadpisuję, raczej się nie zmienią.