Маркеры LeafletJS перемещаются по масштабированию

Использование LeafletJS, который является тузом, до сих пор: P У нас нет объекта JSON или чего-то еще, поэтому я беру значения из HTML (название, latlng) и создаю маркеры. Как правило, это работает нормально, однако есть проблема с их построением. Когда карта действительно увеличена, они выглядят нормально, но когда вы уменьшаете масштаб (например, карта изначально), они уходят. Затем они перемещаются по масштабированию.Маркеры LeafletJS перемещаются по масштабированию

Итак, что я делаю неправильно?

http://jsbin.com/edegox/1 http://jsbin.com/edegox/1/edit

Приветствия Том

источник

2013-07-26 Leads

-2

Хорошо, так что это было связано с настройками IconSize, iconSize, iconAnchor, shadowAnchor и PopUpAnchor. Сортировали их, и все это хорошо :)

Благодаря @helloimtom за что :)

источник

2013-07-26 10:35:38 Leads

может ли вы дать более подробно - у меня такая же проблема с пользовательскими маркерами, но проверил размеры с Photoshop и не мог см. очевидные проблемы. – olive

Не могли бы вы найти точное решение проблемы? – autonomy

Можете ли вы разместить свое решение? – tmthyjames

Решение этой проблемы довольно просто. Ведущие должны были опубликовать его.

, когда ваши маркеры перемещаются по карте, это потому, что карта не знает размер вашего маркера и/или не знает точку вашего маркера, которая отмечает местоположение.

ваш маркер код значок может выглядеть следующим образом:

var locationIcon = L.icon({iconUrl:'location_marker_icon.png'});

Теперь, давайте предположим, что ваш образ 24px в ширину и 36px высотой. Чтобы сохранить свой маркер двигаться вокруг, вы просто указать размер маркеров, и «узловую точку» ...

var locationIcon = L.icon({ 
          iconUrl:'location_marker_icon.png', 
          iconSize: [24,36], 
          iconAnchor: [12,36] 
          });

Это заставит центральный пиксель в нижней части представляет собой точный LAT/LNG момент вы указали маркер, и он будет держать его на якоре там!

источник

2015-04-30 20:23:58 Jaimz

Учитывая значок, который выглядит следующим образом, с общим размером 98px в ширину 114px высотой:

iconSize будет [98, 114]. Это общий размер значка.
Ваш iconAnchor будет [49, 114]. Значок якорь первая цифру можно вычислить, взяв первую цифру в iconSize и делении на 2 (т.е. 98 ÷ 2 = 49)

Если вы хотите использовать этот значок пример, ваш окончательный код должен выглядеть следующим образом:

var locationIcon = L.icon({ 
    iconUrl:'location_marker_icon.png', 
    iconSize: [98, 114], 
    iconAnchor: [49, 114] 
});

Вот Сущность примера вы можете проверить с (я выделил линии в вопросе) https://gist.github.com/anonymous/fe19008c911e1e6b6490#file-index-html-L38-L44

источник

2015-08-22 15:50:43

Маркеры LeafletJS перемещаются по масштабированию

ответ

Смежные вопросы