Wie kann überprüft werden, ob der Mittelpunkt der Karte innerhalb des Kreisbereichs liegt, nachdem der Benutzer die Karte gezogen hat?

Question

Ich habe die Karte mit Marker in der Mitte des Bildschirms. Ich habe auch den Kreis mit den Grenzen des "erlaubten" Bereichs, damit der Benutzer das Zentrum der Karte ziehen kann. Ich muss eine Fehlermeldung anzeigen, wenn der Benutzer die Karte außerhalb dieses Kreises gezogen hat. Können Sie mir im folgenden Code sagen, was ich falsch mache?

Ich habe den Fehler in dieser Zeile: if (_latLngBounds.contains(event.latLng)) weil event nicht latLng param. Ich weiß nicht, wie man lat und lng der aktuellen Position richtig bekommt.

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>

Answer 1

Per the documentation, das Drag-Ereignis hat keine Argumente (auch das dragend Ereignis).

Events

Drag | Argumente: Keine | Dieses Ereignis wird wiederholt ausgelöst, während der Benutzer die Karte zieht.

Sie müssten das Zentrum der Karte (durch Aufruf map.getCenter()) bekommen.

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'); 
    } 

}); 

Anmerkung: A LatLngBounds rechteckig ist. Wenn Sie innerhalb eines Kreises nachsehen wollen, wird es nicht genau sein (die Ecken des Rechtecks ​​sind nicht "in" dem Kreis, sondern befinden sich in den Grenzen), überprüfen Sie stattdessen die Entfernung zu dem Punkt von der Mitte des Kreis ist kleiner als der Radius des Kreises. Siehe Calculate Marker In Circle

Code-Schnipsel:

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() { 
 
     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>