Raggio attorno a un punto nella mappa di Google

Question

Sto utilizzando l'API di Google Maps e ho aggiunto marcatori. 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.

I found one example that looks good e puoi anche dare un'occhiata a Google Latitude. Lì usano marcatori con un raggio, proprio come li voglio.

Aggiornamento: Google Latitude utilizza an image che viene ridimensionato, come funzionerebbe?

Answer 1

Utilizzando l'API di Google Maps V3, creare un oggetto Cerchio, quindi utilizzare bindTo() per legarlo alla posizione del proprio Indicatore (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'); 

Si può far sembrare proprio come il cerchio Latitude di Google cambiando il fillColor, strokeColor, strokeWeight ecc (full API).

Visualizza altro source code and example screenshots.

Answer 2

Sembra che il metodo più comune per raggiungere questo obiettivo sia disegnare uno GPolygon con punti sufficienti per simulare un cerchio. L'esempio a cui si fa riferimento utilizza questo metodo. This page ha un buon esempio: cercare la funzione drawCircle nel codice sorgente.

Answer 3

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

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

Detto questo, renditi conto che google maps è projecting the earth onto a flat surface (pensa "srotolare" la terra e allunga + appiattisci fino a sembrare "quadrata"). E se hai un sistema di coordinate piatte puoi disegnare oggetti 2D su tutto ciò che desideri.

In altre parole, può disegnare un cerchio vettore ridimensionato su una mappa di google. Il problema è che Google Maps non ti dà subito la scatola (vogliono restare vicini ai valori GIS come è possibile). Ti danno solo GPolygon che vogliono che tu usi per approssimare un cerchio. Tuttavia, this guy did it utilizzando vml per IE e svg per altri browser (vedere la sezione "CERCHI SCALATI").

Ora, tornando alla tua domanda su Google Latitude utilizzando un'immagine in scala ridimensionata (e questo è probabilmente il più utile per te): se sai che il raggio della tua cerchia non cambierà mai (ad esempio, è sempre 10 miglia intorno ad alcuni punto), quindi la soluzione più semplice sarebbe utilizzare un GGroundOverlay, che è solo un URL di immagine + il GLatLngBounds rappresentato dall'immagine. L'unico lavoro che devi fare è cacificare lo GLatLngBounds che rappresenta il 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.

Answer 4

Ho avuto questo problema in passato, così ho bookmarked questa discussion.

Per riassumere, è possibile:

1. Date un'occhiata a questo circle filter s' codice sorgente e capire come per incorporarlo nel tuo progetto.
2. Disegna un GPolygon con punti sufficienti per simulare un cerchio.
3. Generare un file KML modificando http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 e quindi importarlo. 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.

Answer 5

ho appena scritto un articolo del blog che affronta proprio questo, che si possono trovare utili: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

In sostanza, è necessario creare un GGroundOverlay con i GLatLngBounds corretti. Il trucchetto consiste nell'elaborare la coordinata dell'angolo sud-ovest e la coordinata dell'angolo nord-est di questa casella immaginaria (i GLatLngBounds) che circonda questo cerchio, in base al raggio desiderato. La matematica è piuttosto complicata, ma puoi semplicemente riferirti alla funzione getDestLatLng nel blog. Il resto dovrebbe essere piuttosto semplice.

Answer 6

Per una soluzione API v3, si riferiscono a:

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

Crea cerchio intorno punti e poi mostrare marcatori all'interno e fuori della gamma con colori diversi. Calcolano anche il raggio dinamico, ma nel tuo caso il raggio è fisso, quindi potrebbe essere meno lavoro.

Answer 7

Ecco un altro esempio (di lavoro) su google circle, marker ed eventi. Vedi qui

http://kahimyang.info/kauswagan/HowtoBlogs.xhtml?b=513