Lealefjs:防止将标记拖到ImageLayer边界之外

Lealefjs : Prevent Dragging Marker out of ImageLayer bounds

本文关键字：ImageLayer 边界 Lealefjs      更新时间：2023-09-26

我正在mapclick函数上添加可拖动标记。我不允许用下面的代码把标记放在地图外。

if (imageBounds.contains(newPosition)) {
    var newMarker = L.marker(newPosition).addTo(map);
}

但我可以把标记拖到图像层外，我想防止这个问题。这是我的代码http://jsfiddle.net/xfdxe2ea/

我编辑了你的小提琴以实现你想要的。

基本上，我所做的是为drag事件注册一个处理程序，然后每次调用该处理程序时，我都会检查标记是否仍在所需的范围内。如果是，我将其位置存储在可通过闭包访问的变量中，这可以被视为最后一个已知的有效位置。如果标记位置变为"无效"（超出界限），则我"手动"将其替换为最后一个已知的有效位置。

var lastValidPosition;
newMarker.on("drag", function(event) {
    var latLng = newMarker.getLatLng();
    if (imageBounds.contains(latLng)) {
        lastValidPosition = latLng;
    } else {
        if (lastValidPosition) {
            newMarker.setLatLng(lastValidPosition);
        }
    }
}, newMarker);
相关文章：