Zeichnen Sie einen Radius um einen Punkt in der Google-Karte

Ich verwende die Google Maps-API und habe Markierungen hinzugefügt. Jetzt möchte ich um jede Markierung einen Radius von 10 Meilen hinzufügen, dh einen Kreis, der sich beim Zoomen angemessen verhält. Ich habe keine Ahnung, wie ich das machen soll, und es scheint, dass es nicht üblich ist.

Ich habe ein Beispiel gefunden, das gut aussieht , und Sie können sich auch Google Latitude ansehen. Dort verwenden sie Markierungen mit einem Radius, so wie ich sie will.

Update: Google Latitude verwendet ein skaliertes Bild . Wie würde das funktionieren? _{^{(Feature veraltet)}}

Erstellen Sie mit der Google Maps API V3 ein Circle-Objekt und binden Sie es mit bindTo () an die Position Ihres Markers (da beide Instanzen von google.maps.MVCObject sind).

// Create marker 
var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
});

// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

Sie können es wie den Google Latitude-Kreis aussehen lassen, indem Sie fillColor, StrokeColor, StrokeWeight usw. ( vollständige API ) ändern .

Weitere Quellcode- und Beispiel-Screenshots .

Es scheint, dass die häufigste Methode, dies zu erreichen, darin besteht, ein GPolygon mit genügend Punkten zu zeichnen , um einen Kreis zu simulieren. Das Beispiel, auf das Sie verwiesen haben, verwendet diese Methode. Diese Seite hat ein gutes Beispiel - suchen Sie im Quellcode nach der Funktion drawCircle .

In der sphärischen Geometrie werden Formen durch Punkte, Linien und Winkel zwischen diesen Linien definiert. Sie haben nur diese rudimentären Werte, mit denen Sie arbeiten können.

Daher muss ein Kreis (in Form einer auf eine Kugel projizierten Form) mithilfe von Punkten angenähert werden. Je mehr Punkte, desto mehr sieht es aus wie ein Kreis.

Beachten Sie jedoch, dass Google Maps die Erde auf eine ebene Fläche projiziert (denken Sie daran, die Erde "abzuwickeln" und zu dehnen + zu glätten, bis sie "quadratisch" aussieht). Und wenn Sie ein flaches Koordinatensystem haben, können Sie 2D-Objekte darauf zeichnen, was Sie wollen.

Mit anderen Worten, Sie können einen skalierten Vektorkreis auf einer Google-Karte zeichnen. Der Haken dabei ist, dass Google Maps es Ihnen nicht sofort zur Verfügung stellt (sie möchten so nah wie möglich an den GIS-Werten bleiben). Sie geben Ihnen nur GPolygon, mit dem Sie einen Kreis approximieren sollen. Dieser Typ hat es jedoch mit vml für IE und svg für andere Browser gemacht (siehe Abschnitt "SCALED CIRCLES").

Kehren Sie nun zu Ihrer Frage zu Google Latitude zurück, indem Sie ein skaliertes Kreisbild verwenden (und dies ist wahrscheinlich das nützlichste für Sie): Wenn Sie wissen, dass sich der Radius Ihres Kreises niemals ändert (z. B. sind es immer 10 Meilen um einen bestimmten Punkt), dann Die einfachste Lösung wäre die Verwendung eines GGroundOverlay , bei dem es sich lediglich um eine Bild-URL + die GLatLngBounds handelt, die das Bild darstellt. Die einzige Arbeit, die Sie dann erledigen müssen, ist die Berechnung der GLatLngBounds, die Ihren Radius von 10 Meilen darstellen. Sobald Sie das haben, übernimmt die Google Maps-API die Skalierung Ihres Bildes, wenn der Benutzer hinein- und herauszoomt.

Ich hatte dieses Problem in der Vergangenheit und habe diese Diskussion mit einem Lesezeichen versehen .

Um es zusammenzufassen, können Sie:

1. Werfen Sie einen Blick auf diese Kreisfilter ‚s Quellcode und herauszufinden , wie es in Ihrem Projekt zu integrieren.
2. Zeichnen Sie ein GPolygon mit genügend Punkten, um einen Kreis zu simulieren.
3. Generieren Sie eine KML-Datei, indem Sie http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 ändern und dann importieren. In Google Maps können Sie den URI einfach in das Suchfeld einfügen und er wird auf der Karte angezeigt. Ich bin mir nicht sicher, wie Sie es mit der API machen könnten.

Ich habe gerade einen Blog-Artikel geschrieben, der genau dies behandelt und den Sie möglicherweise nützlich finden: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Grundsätzlich müssen Sie ein GGroundOverlay mit den richtigen GLatLngBounds erstellen. Das Knifflige besteht darin, die südwestliche Eckkoordinate und die nordöstliche Eckkoordinate dieses imaginären Quadrats (die GLatLngBounds), die diesen Kreis begrenzen, basierend auf dem gewünschten Radius zu berechnen. Die Mathematik ist ziemlich kompliziert, aber Sie können einfach auf die Funktion getDestLatLng im Blog verweisen. Der Rest sollte ziemlich einfach sein.

Eine API v3-Lösung finden Sie unter:

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

Es erstellt einen Kreis um Punkte und zeigt dann Markierungen innerhalb und außerhalb des Bereichs mit unterschiedlichen Farben an. Sie berechnen auch den dynamischen Radius, aber in Ihrem Fall ist der Radius fest, sodass möglicherweise weniger Arbeit anfällt.