使用Leaflet.js防止从图像中添加标记

Question

我正在将Leaflet.js用于我的项目。我想在地图上添加标记点击并保存它们。

var newMarker = new L.marker(e.latlng).addTo(map);

我正在使用上面的代码添加标记。但我想阻止在我的图像中添加标记。我怎么能这样做？

Answer 1

你可以简单地定义图像的bounds（例如，如果你想使用current map view，你会做var bounds = map.getBounds();），然后使用条件语句检查点击是否在创建标记之前，事件位置在contained范围内：

var imageBounds = map.getBounds();

function addMarker(event) {
    var newPosition = event.latlng;

    if (imageBounds.contains(newPosition)) {
        // You do not need the "new" if using "L.marker"
        // on the contrary of "new L.Marker" (note the uppercase)
        var newMarker = L.marker(newPosition).addTo(map);
    }
}

map.on("click", addMarker);