Leaflet 传单：防止将标记拖到地图容器外 请考虑以下代码

html

如果向右拖动标记，它将保留地图的可见区域。 如何防止用户将标记拖到地图外

---

谢谢

回答我自己的问题以防对任何人都有帮助。 我们检测地图容器大小，并通过将其lat/lng坐标转换为容器点（map.containerPointToLatLng（markerContainerPosition））来检查标记是否超出可见区域

另外，当用户移动地图时，此代码将标记保留在相对于地图容器的相同位置。它确保标记永远不会超出可见区域（即使在缩放时）

var西南=L.latLng（-90，-180），
东北=拉特林（90180）；
var bounds=L.latLngBounds（西南、东北）；
var map=L.map（'map'{
minZoom:2，
动物控制：错误，
属性控制：false，
最大边界：边界
});
//使用cartoDB basemap
L.tileLayer（'https://cartodb-basemaps-{s} .global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'{
minZoom:2，
子域：“abcd”，
特雷蒂娜侦探：是的，
属性：“”
}).addTo（地图）；
映射边界（bounds）；
var newMarker0=L.marker（map.getCenter（）{
图标：新的L.icon.Default（），
zIndexOffset:10000，
德拉格布尔：是的
});
newMarker0.addTo（map）；
var mapSize=map.getSize（）；
var markerContainerPosition=map.latLngToContainerPoint（newMarker0.getLatLng（））；
函数mapMove（）{
newMarker0.setLatLng（map.containerpointtolatng（markerContainerPosition））；
}
函数标记符（e）{
var mTempContainerPos=map.latLngToContainerPoint（newMarker0.getLatLng（））；
var newPos；
如果（mTempContainerPos.x<20）{
如果（mTempContainerPos.y<45）{
newPos=L点（20,45）；
}else if（mTempContainerPos.y>（mapSize.y-20））{
newPos=L点（20，mapSize.y-20）；
}否则{
newPos=L点（20，mTempContainerPos.y）；
}
}else if（mTempContainerPos.x>mapSize.x-20）{
如果（mTempContainerPos.y<45）{
newPos=L点（mapSize.x-20,45）；
}else if（mTempContainerPos.y>（mapSize.y-20））{
newPos=L点（mapSize.x-20，mapSize.y-20）；
}否则{
newPos=L.point（mapSize.x-20，mTempContainerPos.y）；
}
}否则{
如果（mTempContainerPos.y<45）{
newPos=L.point（mTempContainerPos.x，45）；
}else if（mTempContainerPos.y>（mapSize.y-20））{
newPos=L.point（mTempContainerPos.x，mapSize.y-20）；
}
}
if（新POS）{
markerContainerPosition=newPos；
newMarker0.setLatLng（地图容器点地图（newPos））；
}否则{
markerContainerPosition=mTempContainerPos；
}
}
地图上的（'move'，mapMove）；
newMarker0.on（'drag'，markerDrag）；

一种解决方案，其代码略为通用，并专门用于拖动标记而不是地图，但它是@Franckl的衍生产品：

onMarkerDrag: function (event) {

    // keep dragged marker within map bounds

    var containerPoint = this.map.latLngToContainerPoint(event.target.getLatLng()),
        clampX = null,
        clampY = null,
        MARKER_MARGIN = 10;

    if (containerPoint.x - MARKER_MARGIN < 0) {
        clampX = MARKER_MARGIN;
    } else if (containerPoint.x + MARKER_MARGIN > this.mapContainerBounds.width) {
        clampX = this.mapContainerBounds.width - MARKER_MARGIN;
    }

    if (containerPoint.y - MARKER_MARGIN < 0) {
        clampY = MARKER_MARGIN;
    } else if (containerPoint.y + MARKER_MARGIN > this.mapContainerBounds.height) {
        clampY = this.mapContainerBounds.height - MARKER_MARGIN;
    }

    if (clampX !== null || clampY !== null) {
        if (clampX !== null) { containerPoint.x = clampX; }
        if (clampY !== null) { containerPoint.y = clampY; }
        marker.setLatLng(this.map.containerPointToLatLng(containerPoint));
    }

},

<div id="mycontainer">
    <div id="map"></div>
</div>

body {
    margin:0;
    padding:0;
}
#map {
    position:absolute;
    top:0;
    bottom:0;
    width:300px;
}

#mycontainer {
    top: 10px;
    width: 600px;
    height: 250px;
    position: relative;
}

onMarkerDrag: function (event) {

    // keep dragged marker within map bounds

    var containerPoint = this.map.latLngToContainerPoint(event.target.getLatLng()),
        clampX = null,
        clampY = null,
        MARKER_MARGIN = 10;

    if (containerPoint.x - MARKER_MARGIN < 0) {
        clampX = MARKER_MARGIN;
    } else if (containerPoint.x + MARKER_MARGIN > this.mapContainerBounds.width) {
        clampX = this.mapContainerBounds.width - MARKER_MARGIN;
    }

    if (containerPoint.y - MARKER_MARGIN < 0) {
        clampY = MARKER_MARGIN;
    } else if (containerPoint.y + MARKER_MARGIN > this.mapContainerBounds.height) {
        clampY = this.mapContainerBounds.height - MARKER_MARGIN;
    }

    if (clampX !== null || clampY !== null) {
        if (clampX !== null) { containerPoint.x = clampX; }
        if (clampY !== null) { containerPoint.y = clampY; }
        marker.setLatLng(this.map.containerPointToLatLng(containerPoint));
    }

},

this.mapContainerBounds = mapDOMNode.getBoundingClientRect();