Зміна положення спливаючого вікна на маркері Leaflet?

Я хочу відкрити спливаюче вікно внизу мого значка маркера в Leaflet.

мій код:

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

Таким чином, я отримую спливаюче вікно над своїм маркером.

Я хочу отримати спливаюче вікно внизу, наприклад:

Ви можете вказати компенсації, скориставшись popupAnchorпараметрами, але не там, де ви цього очікували. Спочатку потрібно вказати такий значок:

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

Потім ви можете використовувати цей значок у параметрах маркера:

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

Тепер спливаюче вікно відкривається на 30 пікс вище вашого маркера. Це не саме те, про що ви просили, оскільки вам також потрібно розмістити маленький стрілеподібний трикутник на вершині спливаючого вікна, але я думаю, що це все-таки варто згадати.

Народного розкладу листівки немає.

Ще одним способом є використання https://github.com/erictheise/rrose

Хороша демонстрація:

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

Я знаю, що це старе питання, але вам не потрібно приймати об'їзд, описаний у своїй відповіді @Robert.

Як Popupце успадковується з DivOverlay, ви можете встановити параметр зсуву безпосередньо при ініціалізації Popup:

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

Прочитайте документи: https://leafletjs.com/reference-1.5.0.html#popup

Здається, це можливо лише в CSS. Нижче я переосмислюю (з !important) лише три CSS-елементи та додаю один :beforeпсевдоелемент. Я по суті є першою вибудовування спливаючого вікна з верхніми , а не внизу , де 55px тільки залежить від обраних маркерів, і особистим смаком.

Потім я переміщую "наконечник" спливаючого вікна аналогічно знизу до top:0pxі виявляю, що це не зроблено за допомогою "звичайного" трюку (тобто: спочатку розташуйте на межі міхура псевдоелемент розміром 0х0 з товстою прозорою рамкою, потім колір, який протилежна межа елемента, де ви хочете вказати; в нашому випадку нижня межа). Натомість, здається, він зроблений з прямокутника, оберненого звідкись зліва-вліво (можливо: тому що він змушує браузер використовувати GPU і, отже, прискорює все?), І я не розумію достатньо точки (вибачте за каламбур) ( моя порада в потрібному місці, але невидима); тому я просто видаляю коробку-тінь, яка зараз знаходиться в неправильному місці, і залишаю все так, як є --- будь-хто, хто розуміє "стару пораду", будь ласка, налаштуйте її.

Тож замість цього я роблю власну підказку за допомогою "звичайного" процесу (якщо ви не впевнені, замініть чотири кольори рамки нижче, а не 3х прозорих та 1х білих --- наприклад 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;
}

Як це показує JSFiddle, якщо ви спробуєте обидва маркера, немає проблем із різними розмірами спливаючих вікон (різної ширини, різної висоти тексту).

Загалом, це здається надійним щодо оновлень у Leaflet, оскільки елементи, які я переосмислюємо, не можуть змінитись.