Dibujar radio alrededor de un punto en el mapa de Google

Estoy usando la API de Google Maps y he añadido marcadores. Ahora quiero agregar un radio de 10 millas alrededor de cada marcador, es decir, un círculo que se comporta apropiadamente al hacer zoom. No tengo idea de cómo hacer eso y parece que no es algo común.

Encontré un ejemplo que se ve bien , y también puedes echarle un vistazo a Google Latitude. Allí usan rotuladores con radio, como yo los quiero.

Actualización: Google Latitude usa una imagen a escala, ¿cómo funcionaría? _{^{(característica en desuso)}}

Con la API de Google Maps V3, cree un objeto Circle, luego use bindTo () para vincularlo a la posición de su Marker (ya que ambas son instancias 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');

Puede hacer que se vea como el círculo de Google Latitude cambiando el color de relleno, el color del trazo, el peso del trazo, etc. ( API completa ).

Vea más código fuente y capturas de pantalla de ejemplo .

Parece que el método más común para lograr esto es dibujar un GPolygon con suficientes puntos para simular un círculo. El ejemplo al que hizo referencia utiliza este método. Esta página tiene un buen ejemplo: busque la función drawCircle en el código fuente.

En la geometría esférica, las formas se definen por puntos, líneas y ángulos entre esas líneas. Solo tiene esos valores rudimentarios con los que trabajar.

Por lo tanto, un círculo (en términos de una forma proyectada sobre una esfera) es algo que debe aproximarse usando puntos. Cuantos más puntos, más se verá como un círculo.

Dicho esto, tenga en cuenta que Google Maps proyecta la tierra sobre una superficie plana (piense en "desenrollar" la tierra y estirar + aplanar hasta que parezca "cuadrada"). Y si tiene un sistema de coordenadas planas, puede dibujar objetos 2D en él todo lo que quiera.

En otras palabras, puede dibujar un círculo vectorial escalado en un mapa de Google. El problema es que los mapas de Google no te lo ofrecen de inmediato (quieren mantenerse lo más cerca posible de los valores GIS como sea pragmáticamente posible). Solo te dan GPolygon que quieren que uses para aproximar un círculo. Sin embargo, este tipo lo hizo usando vml para IE y svg para otros navegadores (vea la sección "CÍRCULOS ESCALADOS").

Ahora, volviendo a su pregunta sobre Google Latitude usando una imagen de círculo escalada (y esta es probablemente la más útil para usted): si sabe que el radio de su círculo nunca cambiará (por ejemplo, siempre está a 10 millas alrededor de algún punto), entonces la solución más fácil sería usar un GGroundOverlay , que es solo una URL de imagen + GLatLngBounds que representa la imagen. El único trabajo que necesita hacer entonces es calcular los GLatLngBounds que representan su radio de 10 millas. Una vez que tenga eso, la API de Google Maps maneja la escala de su imagen a medida que el usuario acerca y aleja la imagen.

He tenido este problema en el pasado, así que agregué esta discusión a favoritos .

Para resumirlo, puede:

1. Eche un vistazo al código fuente de este filtro circular y descubra cómo incorporarlo a su proyecto.
2. Dibuja un GPolygon con suficientes puntos para simular un círculo.
3. Genere un archivo KML modificando http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 y luego importándolo. En Google Maps, simplemente puede pegar el URI en el cuadro de búsqueda y se mostrará en el mapa. Sin embargo, no estoy seguro de cómo podría hacerlo usando la API.

Acabo de escribir un artículo de blog que aborda exactamente esto, que puede resultarle útil: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

Básicamente, necesitas crear un GGroundOverlay con los GLatLngBounds correctos. El truco está en calcular la coordenada de la esquina suroeste y la coordenada de la esquina noreste de este cuadrado imaginario (GLatLngBounds) que delimita este círculo, en función del radio deseado. Las matemáticas son bastante complicadas, pero puede referirse a la función getDestLatLng en el blog. El resto debería ser bastante sencillo.

Para obtener una solución API v3, consulte:

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

Crea círculos alrededor de puntos y luego muestra marcadores dentro y fuera del rango con diferentes colores. También calculan el radio dinámico, pero en su caso, el radio es fijo, por lo que puede ser menos trabajo.