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.

那么，我在做什么错了?

So, what am I doing wrong?

http://jsbin.com/edegox/1 http://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屋！