Wir werden eine Methode benötigen, die den Zielpunkt zurückkehrt, wenn ein Lager und die von einem Quellpunkt zurückgelegte Strecke gegeben. Zum Glück gibt es eine sehr gute JavaScript-Implementierung von Chris Veness unter Calculate distance, bearing and more between Latitude/Longitude points.
Nachfolgend wurde angepasst, um mit der google.maps.LatLng Klasse zu arbeiten:
Number.prototype.toRad = function() {
return this * Math.PI/180;
}
Number.prototype.toDeg = function() {
return this * 180/Math.PI;
}
google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
dist = dist/6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
Sie einfach es benutzen würde, wie folgt:
var pointA = new google.maps.LatLng(25.48, -71.26);
var radiusInKm = 10;
var pointB = pointA.destinationPoint(90, radiusInKm);
hier ein komplettes Beispiel ist Google Maps API v3 mit:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Geometry</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
Number.prototype.toRad = function() {
return this * Math.PI/180;
}
Number.prototype.toDeg = function() {
return this * 180/Math.PI;
}
google.maps.LatLng.prototype.destinationPoint = function(brng, dist) {
dist = dist/6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
var pointA = new google.maps.LatLng(40.70, -74.00); // Circle center
var radius = 10; // 10km
var mapOpt = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pointA,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map"), mapOpt);
// Draw the circle
new google.maps.Circle({
center: pointA,
radius: radius * 1000, // Convert to meters
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map
});
// Show marker at circle center
new google.maps.Marker({
position: pointA,
map: map
});
// Show marker at destination point
new google.maps.Marker({
position: pointA.destinationPoint(90, radius),
map: map
});
</script>
</body>
</html>
Screenshot:
UPDATE:
In Antwort auf Paul's Kommentar unten, das ist, was passiert, wenn der Kreis wickelt sich um einen der Pole.
Plotten pointA in der Nähe des Nordpols mit einem Radius von 1.000 km:
var pointA = new google.maps.LatLng(85, 0); // Close to north pole
var radius = 1000; // 1000km
Screenshots für pointA.destinationPoint(90, radius):
@Rene : Die Anpassung meiner Antwort an die GMaps API v2 sollte einfach sein. Ich glaube, es ist nur eine Frage von 'google.maps.LatLng' mit' GLatLng' zu ersetzen. Lassen Sie es mich wissen, wenn Sie Schwierigkeiten haben. –
Danke, keine Schwierigkeiten hier :) –