Disegna il raggio attorno a un punto nella mappa di Google

Utilizzo l'API di Google Maps e ho aggiunto indicatori. Ora voglio aggiungere un raggio di 10 miglia attorno a ciascun marker, ovvero un cerchio che si comporta in modo appropriato durante lo zoom. Non ho idea di come farlo e sembra che non sia qualcosa di comune.

Ho trovato un esempio che sembra buono e puoi dare un'occhiata anche a Google Latitude. Lì usano marcatori con un raggio, proprio come li voglio io.

Aggiornamento: Google Latitude utilizza un'immagine ridimensionata, come funzionerebbe? _{^{(funzionalità deprecata)}}

Utilizzando l'API di Google Maps V3, crea un oggetto Circle, quindi utilizza bindTo () per legarlo alla posizione del tuo Marker (poiché sono entrambe istanze google.maps.MVCObject).

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

Puoi farlo sembrare proprio come il cerchio di Google Latitude cambiando fillColor, strokeColor, strokeWeight ecc. ( API completa ).

Vedi altro codice sorgente e screenshot di esempio .

Sembra che il metodo più comune per ottenere ciò sia disegnare un GPolygon con punti sufficienti per simulare un cerchio. L'esempio a cui hai fatto riferimento utilizza questo metodo. Questa pagina ha un buon esempio: cerca la funzione drawCircle nel codice sorgente.

Nella geometria sferica le forme sono definite da punti, linee e angoli tra quelle linee. Hai solo quei valori rudimentali con cui lavorare.

Quindi un cerchio (in termini di una forma proiettata su una sfera) è qualcosa che deve essere approssimato usando i punti. Più punti, più sembrerà un cerchio.

Detto questo, renditi conto che Google Maps sta proiettando la terra su una superficie piana (pensa a "srotolare" la terra e allungarla + appiattirla finché non sembra "quadrata"). E se hai un sistema di coordinate piatte puoi disegnare oggetti 2D su di esso quanto vuoi.

In altre parole puoi disegnare un cerchio vettoriale in scala su una mappa di Google. Il problema è che Google Maps non te lo dà fuori dagli schemi (vogliono rimanere il più vicino possibile ai valori GIS come pragmaticamente possibile). Ti danno solo GPolygon che vogliono che tu usi per approssimare un cerchio. Tuttavia, questo tizio lo ha fatto usando vml per IE e svg per altri browser (vedere la sezione "CERCHI IN SCALA").

Ora, tornando alla tua domanda su Google Latitude utilizzando un'immagine circolare in scala (e questa è probabilmente la più utile per te): se sai che il raggio del tuo cerchio non cambierà mai (ad esempio, sono sempre 10 miglia intorno a un punto), allora la soluzione più semplice sarebbe usare un GGroundOverlay , che è solo l'URL di un'immagine + i GLatLngBounds rappresentati dall'immagine. L'unico lavoro che devi fare allora è cacluare i GLatLngBounds che rappresentano il tuo raggio di 10 miglia. Una volta ottenuto ciò, l'API di Google Maps gestisce il ridimensionamento dell'immagine mentre l'utente esegue lo zoom avanti e indietro.

Ho avuto questo problema in passato, quindi ho aggiunto questa discussione ai preferiti .

Per riassumere, puoi:

1. Dai un'occhiata al codice sorgente di questo filtro circolare e scopri come incorporarlo nel tuo progetto.
2. Disegna un GPoligono con punti sufficienti per simulare un cerchio.
3. Genera un file KML modificando http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 e quindi importandolo. In Google Maps, puoi semplicemente incollare l'URI nella casella di ricerca e verrà visualizzato sulla mappa. Non sono sicuro di come potresti farlo usando l'API.

Ho appena scritto un articolo sul blog che affronta esattamente questo, che potresti trovare utile: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Fondamentalmente, è necessario creare un GGroundOverlay con i GLatLngBound corretti. La parte complicata sta nell'elaborare la coordinata dell'angolo sud-ovest e la coordinata dell'angolo nord-est di questo quadrato immaginario (GLatLngBounds) che delimita questo cerchio, in base al raggio desiderato. La matematica è piuttosto complicata, ma puoi semplicemente fare riferimento alla funzione getDestLatLng nel blog. Il resto dovrebbe essere abbastanza semplice.

Per una soluzione API v3, fare riferimento a:

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

Crea un cerchio attorno ai punti e quindi mostra i marker all'interno e all'esterno dell'intervallo con colori diversi. Calcolano anche il raggio dinamico, ma nel tuo caso il raggio è fisso, quindi potrebbe essere meno lavoro.