LeafletJS标记在缩放时移动

Question

使用 LeafletJS 很棒，但是现在有一个问题：我们没有 JSON 对象或其他东西，所以我正在从 HTML 中获取值（标题、latlng）并创建标记。一般情况下这个方法还行，但是它们的定位存在问题。如果缩放比例非常大就没问题，但当你缩小地图（就像初始时一样），它们就会偏离原本的位置，并且缩放时它们也会移动。

那么，我哪里做错了？

链接为：http://jsbin.com/edegox/1 编辑链接为：http://jsbin.com/edegox/1/edit 谢谢 汤姆

- Leads

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

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

- Jaimz

Answer 2

给出一个外观如下的图标，宽98像素，高114像素：

• 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

- Joshua Powell

---

感谢您提供如此全面的答案。 - ArbitraryChoices