Dibujar el radio alrededor de un punto en el mapa de Google

Question

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

I found one example that looks good, y puedes echarle un vistazo a Google Latitude, también. Allí usan marcadores con un radio, como yo los quiero.

Actualización: Google Latitude utiliza an image que tiene escala, ¿cómo funcionaría?

Answer 1

Usando Google Maps API V3, crea un objeto Circle, luego usa bindTo() para vincularlo a la posición de tu 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 igual que el círculo Latitud Google cambiando el fillColor, strokeColor, etc strokeWeight (full API).

Ver más source code and example screenshots.

Answer 2

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 te refieres utiliza este método. This page tiene un buen ejemplo: busque la función drawCircle en el código fuente.

Answer 3

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

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

Dicho esto, tenga en cuenta que google maps es projecting the earth onto a flat surface (piense en "desenrollar" la tierra y estirar + aplastar hasta que se vea "cuadrado"). Y si tiene un sistema de coordenadas planas, puede dibujar objetos 2D en él todo lo que desee.

En otras palabras, puede dibujar un círculo de vector escalado en un mapa de google. El truco es que Google Maps no se lo da a usted de la caja (quieren permanecer lo más cerca posible de los valores SIG como es posible de forma pragmática). Solo te dan GPolygon que quieren que utilices para aproximar un círculo. Sin embargo, this guy did it 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 escalado (y esta es probablemente la más útil para usted): si sabe, el radio de su círculo nunca cambiará (por ejemplo, siempre es 10 millas alrededor de algunos punto), entonces la solución más fácil sería usar un GGroundOverlay, que es solo una url de imagen + los GLatLngBounds que representa la imagen. El único trabajo que debe hacer entonces es calcular el GLatLngBounds representando su radio de 10 millas. Una vez que tenga eso, la API de Google Maps se encarga de escalar su imagen a medida que el usuario amplía y aleja.

Answer 4

que he tenido este problema en el pasado, así que marcado esta discussion.

Para resumir, se puede:

1. Tome un vistazo a este circle filter 's código fuente y averiguar cómo para incorporarlo a tu 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, solo 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ías hacerlo usando la API.

Answer 5

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

Básicamente, es necesario crear un GGroundOverlay con el GLatLngBounds correctas. Lo difícil es calcular la coordenada de la esquina suroeste y la coordenada de la esquina noreste de este cuadro de imaginería (los GLatLngBounds) que delimitan este círculo, según el radio deseado. La matemática es bastante complicada, pero puedes referirte a la función getDestLatLng en el blog. El resto debe ser bastante sencillo.

Answer 6

Para una solución de API v3, se refieren a:

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

Se crea círculo alrededor de los puntos y, a continuación muestran marcadores dentro y fuera de la gama 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.

Answer 7

Aquí hay otro ejemplo (de trabajo) en círculos de google, marcadores y eventos. Vea aquí

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