LeafletJS标记在缩放时移动

Question

使用LeafletJS这是一个ace,直到现在:P我们没有JSON对象或任何东西,所以我从HTML(标题,latlng)中获取值并创建标记.一般来说,这是正常的,但是它们的绘图存在问题.当地图真正放大时,它们似乎没问题,但是当你缩小时(就像最初的地图一样),它们就会消失.然后他们继续变焦.

那么,我做错了什么？

干杯汤姆

Answer 1

对此的解决方案非常简单.潜在客户应该发布它.

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

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

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]
});

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

Answer 2

给出一个看起来像这样的图标,整体尺寸为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]
});