Как установить определенную c позицию для всплывающего окна с листовкой - PullRequest
1 голос
/ 19 июня 2020

Я сделал несколько карт с помощью Leaflet, и я очень доволен результатом.

Однако есть только одна мелочь, которая меня беспокоит:

У меня есть два разных круга с привязанными к ним всплывающими окнами, и в зависимости от того, где я нажимаю на круг, всплывающее окно открывается в другом месте ...

Image showing the map with popup at the top Image showing the popup at a different position

Вот очень простой пример кода.

const circle = new L.circle( [52.5, 13.35] ).addTo(map);
var popup = L.popup().setContent("hello");

Я тоже пробовал var popup = L.popup().setLatLng( [52.5, 13.35] ).setContent("hello");

Так есть ли (желательно) простой способ сделать всплывающее окно открытым в середине круга (или сделать середину круга «точкой привязки»), чтобы всякий раз, когда я щелкаю по кругу, всплывающее окно всегда открывалось в одном и том же месте?

Очень незначительно, но был бы признателен за любую помощь или направление к библиотеке

Спасибо!

1 Ответ

1 голос
/ 19 июня 2020

Позвольте мне процитировать Leaflet документацию о методе openPopup, который каждый L.Layer (включая каждый L.Circle) имеет:

openPopup(<LatLng> latlng?)

Открывает привязанное всплывающее окно с указанным latlng или с привязкой всплывающего окна по умолчанию, если latlng не передано.

Следовательно, вы можете:

const circle = new L.circle( [52.5, 13.35] ).bindPopup("hello").addTo(map);
circle.openPopup([52.5, 13.35]);

или

const circle = new L.circle( [52.5, 13.35] ).bindPopup("hello").addTo(map);
circle.openPopup(circle.getLatLng());

или

const circle = new L.circle( [52.5, 13.35] ).bindPopup("hello").addTo(map);
circle.on('click', function(ev) { circle.openPopup(circle.getLatLng()) });

или даже

const circle = new L.circle( [52.5, 13.35] ).bindPopup("hello").addTo(map);
circle.on('click', function(ev) { ev.target.openPopup(ev.target.getLatLng()) });

См. Рабочий пример .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...