如何在用户拖动地图后检查地图中心是否在圆形区域内？

  • Z时代
  • 2024-01-10
  • 分类：问答

我在屏幕中间有标记的地图。 我也有圈的“允许”区域的边界，供用户拖动地图中心。 如果用户将地图拖出此圆圈以外，我需要显示错误消息。 你能告诉我在下面的代码中我做错了什么吗？如何在用户拖动地图后检查地图中心是否在圆形区域内？

我在这一行中有错误：if (_latLngBounds.contains(event.latLng))因为event没有latLng参数。我不知道如何正确获取当前位置的纬度和经度。

var map;  
function initialize() {  
    var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647);  
    var circle = new window.google.maps.Circle({  
     center: _latitudeLongitude,  
     radius: 50000  
    });  
    var _latLngBounds = circle.getBounds();  
    var locations = [  
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],  
    ['STANMORE  ', 51.603199, -0.296803, 1]  
    ];  
    map = new google.maps.Map(document.getElementById('map_canvas'), {  
    navigationControl: true,  
    scrollwheel: false,  
    scaleControl: false,  
    draggable: true,  
    zoom: 10,  
    center: new google.maps.LatLng(51.75339, -0.210114),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
    });  
    var marker, i;  
    for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({  
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),  
     map: map,  
     zIndex: 10  
    });  
    window.google.maps.event.addListener(map , 'drag', function (event) {  
      marker.setPosition(map.getCenter());  
      if (_latLngBounds.contains(event.latLng)) {  
       // everything is fine  
      } else {  
       alert('outside of the boundaries');  
      }  
    });  
    }  
}  
google.maps.event.addDomListener(window, 'load', initialize);

html,  
body,  
#map_canvas {  
    height: 100%;  
    width: 100%;  
    margin: 0px;  
    padding: 0px  
}

<script src="https://maps.googleapis.com/maps/api/js"></script>  
<div id="map_canvas"></div>

回答：

每the documentation，拖动事件没有任何参数（也是dragend事件）。

活动

阻力 |参数：无|当用户拖动地图时，此事件会重复触发。

您将需要获取地图的中心（致电map.getCenter()）。

window.google.maps.event.addListener(map, 'drag', function() { 
    marker.setPosition(map.getCenter()); 
    if (_latLngBounds.contains(map.getCenter())) { 
    // everything is fine 
    } else { 
    alert('outside of the boundaries'); 
    } 
});

注：一个的LatLngBounds是矩形的。如果你想检查一个圆的内部，它不会是准确的（矩形的角不是“在圆”中，而是在边界内），而是检查距离中心点的距离圆小于圆的半径。见Calculate Marker In Circle

代码片段：

var map;  
function initialize() {  
    var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647);  
    var circle = new window.google.maps.Circle({  
    center: _latitudeLongitude,  
    radius: 50000  
    });  
    var _latLngBounds = circle.getBounds();  
    var locations = [  
    ['WELWYN GARDEN CITY&nbsp;', 51.805616, -0.192647, 2],  
    ['STANMORE &nbsp;', 51.603199, -0.296803, 1]  
    ];  
    map = new google.maps.Map(document.getElementById('map_canvas'), {  
    navigationControl: true,  
    scrollwheel: false,  
    scaleControl: false,  
    draggable: true,  
    zoom: 10,  
    center: new google.maps.LatLng(51.75339, -0.210114),  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
    });  
    var marker, i;  
    for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({  
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),  
     map: map,  
     zIndex: 10  
    });  
    window.google.maps.event.addListener(map, 'drag', function() {  
     marker.setPosition(map.getCenter());  
     if (_latLngBounds.contains(map.getCenter())) {  
     // everything is fine  
     } else {  
     alert('outside of the boundaries');  
     }  
    });  
    }  
}  
google.maps.event.addDomListener(window, 'load', initialize);

html,  
body,  
#map_canvas {  
    height: 100%;  
    width: 100%;  
    margin: 0px;  
    padding: 0px  
}

<script src="https://maps.googleapis.com/maps/api/js"></script>  
<div id="map_canvas"></div>

以上是 如何在用户拖动地图后检查地图中心是否在圆形区域内？ 的全部内容， 来源链接： utcz.com/qa/258541.html

回到顶部