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

问题描述：

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

我在这一行中有错误：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&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 (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>

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

相关推荐