LeafletJS 标记在缩放时移动答案

【问题标题】：LeafletJS markers move on zoomLeafletJS 标记在缩放时移动
【发布时间】：2013-07-26 07:29:03
【问题描述】：

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

那么，我做错了什么？

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

干杯汤姆

【问题讨论】：

标签： map leaflet

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

【解决方案2】：

给定一个看起来像这样的图标，整体尺寸为 98px 宽 x 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]
});

这是一个您可以测试的 Gist 示例（我突出显示了有问题的行）https://gist.github.com/anonymous/fe19008c911e1e6b6490#file-index-html-L38-L44

【讨论】：