Dibujar radio alrededor de un punto en el mapa de Google

93

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)

webjunkie
fuente
En caso de que sea útil, se puede ver un ejemplo de esto aquí , completo con un radio que se puede arrastrar.
Cam Jackson

Respuestas:

235

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 .

Dunc
fuente
2
También hay un buen ejemplo de esto en el artículo "Diversión con objetos MVC" en la API de Google Maps web.archive.org/web/20120312044803/http://code.google.com/apis/…
Johan
10

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.

Chris B
fuente
Hola @Chris B esa.ilmari.googlepages.com/circle.htm es un gran enlace, pero está hecho en V2, ¿puedes proporcionar el código v3?
Ashok KS
9

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.

Creciente fresco
fuente
6
Gran respuesta. IOW significa en otras palabras y OOTB significa fuera de la caja, para aquellos que necesitan buscarlo como lo hice yo.
Anthony Hiscox
4

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.
Sean
fuente
2

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.

usuario98463
fuente
2

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.

Arpan Aggarwal
fuente
1
Página no encontrada, desafortunadamente.
jsims281