LeafletJS 标记在缩放时移动 [英] LeafletJS markers move on zoom

问题描述

使用作为 ace 的 LeafletJS，直到现在 :P 我们没有 JSON 对象或任何东西，所以我从 HTML(标题，latlng)中取出值并创建标记.通常这可以正常工作，但是它们的绘图存在问题.当地图真正放大时，它们似乎还可以，但是当您缩小时(就像最初的地图一样)，它们就很差了.然后他们继续缩放.

Using LeafletJS which is ace, well until now :P We don't have a JSON object or anything, so I am taking the values out of the HTML (title, latlng) and creating markers. Generally that works ok, however there is an issue with the plotting of them. When the map is really zoomed in they seem to be ok, but when you zoom out (like the map is initially), they are way off. They then move on zoom.

那么，我做错了什么?

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

干杯汤姆

推荐答案

解决这个问题的方法很简单.线索应该已经发布了.

The solution to this is quite simple. Leads should have posted it.

当您的标记在您的地图上移动时，这是因为地图不知道您的标记的大小和/或它不知道标记位置的标记点.

when your markers are moving around your map it's because the map doesn't know the size of your marker and/or it doesn't know the point of your marker that marks the location.

您的标记图标代码可能如下所示:

your marker icon code might look like this:

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

现在，假设您的图片宽 24 像素，高 36 像素.要防止标记四处移动，您只需指定标记的大小和锚点"...

now, let's suppose your image is 24px wide and 36px tall. To keep your marker from moving around, you simply specify the size of the marker, and the "anchor point"...

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

这将使底部的中心像素代表您为其指定标记的确切纬度/经度点，并将其固定在那里！

This will make the center pixel on the bottom represent the exact lat/lng point you specified the marker for, and it will keep it anchored there!

这篇关于LeafletJS 标记在缩放时移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！