Question

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

那么，我做错了什么？

干杯汤姆

Answer 1

解决方法非常简单。潜在客户应该发布它。

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

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

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

现在，让我们假设您的图片宽24px，高36px。为了防止标记移动，您只需指定标记的大小，以及＆＃34;锚点＆＃34; ...

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