Я хочу открыть всплывающее окно в нижней части моего значка маркера в 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 © <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
параметров, но не там, где вы ожидаете этого. Во-первых, вам нужно указать значок:Затем вы можете использовать этот значок в опциях вашего маркера:
Теперь ваше всплывающее окно открывается на 30 пикселей выше маркера. Это не совсем то, о чем вы просили, так как вам также нужно поместить маленький стрелочный треугольник в верхней части вашего всплывающего окна, но я думаю, что все же стоит упомянуть.
источник
Там нет родного решения листовки.
Еще один способ - использовать https://github.com/erictheise/rrose.
Хорошая демонстрация:
http://jsfiddle.net/asleepwalker/6m81vtad/
источник
Я знаю, что это старый вопрос, но вам не нужно брать объезд @Robert, описанный в его ответе.
Как
Popup
наследуется отDivOverlay
, вы можете установить опцию смещения непосредственно при инициализацииPopup
:Прочитайте документы: https://leafletjs.com/reference-1.5.0.html#popup
источник
Это кажется возможным только в CSS. Ниже я переопределяю (с
!important
) только три элемента CSS и добавляю один:before
псевдоэлемент. По сути, я сначала выстраиваю всплывающее окно с верхом, а не с низом , где все55px
зависит от выбранного вами маркера и личного вкуса.Затем я перемещаю «подсказку» всплывающего окна аналогичным образом снизу вверх
top:0px
и обнаруживаю, что это сделано не с помощью «обычного» трюка (то есть: сначала поместите на краю пузыря псевдоэлемент размером 0x0 с толстой прозрачной рамкой, затем раскрасьте, чтобы противоположная граница элемента, на которую вы хотите указать; в нашем случае это нижняя граница). Вместо этого он, кажется, сделан из прямоугольника, повернутого откуда-то сверху слева (может быть: потому что он заставляет браузер использовать графический процессор и, следовательно, ускоряет все?), И я недостаточно хорошо понимаю точку (извините за каламбур) ( мой совет в нужном месте, но невидимый); так что я просто убираю тень с ящика, которая сейчас находится не в том месте, и оставляю все как есть - любому, кто понимает «старый совет», пожалуйста, настройте его.Поэтому вместо этого я делаю свой собственный совет с «нормальным» процессом (если вы не уверены, измените четыре цвета рамки ниже, вместо 3x прозрачного и 1x белого - например
border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red
).Как показывает этот JSFiddle , нет проблем с разными размерами всплывающих окон (разной ширины, разной высоты текста), если вы попробуете оба маркера.
В целом это кажется устойчивым к обновлениям в Leaflet, поскольку элементы, которые я переопределяю, вряд ли изменятся.
источник