Google Maps：限制用户将标记从负载位置移至最大800米

如何解决Google Maps：限制用户将标记从负载位置移至最大800米

我有一种情况，在这种情况下，我需要限制用户将标记从给定位置仅移动800 mts。 我正在使用React和Google Maps。

请提供一些建议。

解决方法

您能进一步解释您的用例吗？假设您最初有一个标记，并且只希望将标记固定在距您设置的中心800米的位置，则可以将可拖动标记与dragend上的eventListener一起使用。标记拖动结束后，您将获得标记新位置的坐标。您将使用computeDistanceBetween() of the Geometry library使用该坐标和中心坐标来计算它们之间的距离是否大于800m。您将使用条件语句检查该距离是否在800m之内，将该标记固定在该坐标上，如果该距离大于800m，则将发出警报，并将标记固定到先前的固定位置。>

这是一个代码段：

//markerA is the center
          let markerA = new window.google.maps.Marker({
            position: { lat: 41.0082,lng: 28.9784 },map: map,label:"A",});
//markerB is the draggable marker
          let markerB = new window.google.maps.Marker({
            position: { lat: 41.0072,label:"B",draggable:true,});
//previousB will be the variable that hold previous coordinate of markerB
          let previousB;
//eventlistener for markerB that listens to the dragend

          markerB.addListener("dragend",function (endOfDrag) {
            let newLat = endOfDrag.latLng;
//using computeDistanceBetween() to get the distance            
            let dist = google.maps.geometry.spherical.computeDistanceBetween(
              map.center,newLat
            );
//conditional statement            
            if (dist <= 800) {
              alert("Coordinate is inside  800 meters!");
//set the new position to previousB variable
              previousB = endOfDrag.latLng;
            } else {
              alert("Coordinate is more than 800 meters away!");
//pin the markerB back to previous position
              markerB.setPosition(previousB)
            }
          });

这里是sample reactjs code来实现的。