javascript - gratis - google maps api key free
Dibujar radio alrededor de un punto en el mapa de Google (7)
Acabo de escribir un artículo de blog que aborda exactamente esto, que puede encontrarle útil: http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html
Básicamente, debe crear un GGroundOverlay con los GLatLngBounds correctos. 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.
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.
Encontré un ejemplo que se ve bien , y también puedes ver Google Latitude. Allí usan marcadores con un radio, como yo los quiero.
Actualización: Google Latitude usa una imagen escalada, ¿cómo funcionaría?
Aquí hay otro ejemplo (de trabajo) sobre círculos, marcadores y eventos de Google. Mira aquí
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 una forma proyectada en una esfera) es algo que debe aproximarse usando puntos. Cuantos más puntos, más se verá como un círculo.
Una vez dicho esto, tenga en cuenta que google maps está proyectando la tierra sobre una superficie plana (piense en "desenrollar" la tierra y estirarla + aplanamiento hasta que parezca "cuadrada"). 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 vectorial 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, este tipo lo hizo usando vml para IE y svg para otros navegadores (ver sección "CALLES ESCALADAS").
Ahora, volviendo a tu pregunta sobre Google Latitude usando una imagen de círculo escalado (y probablemente sea la más útil para ti): si sabes que el radio de tu círculo nunca cambiará (por ejemplo, siempre es 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 + los GLatLngBounds que representa la imagen. El único trabajo que necesita hacer entonces es categorizar los GLatLngBounds representan 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.
He tenido este problema en el pasado, así que marqué esta discussion.
Para resumirlo, puedes:
- Eche un vistazo al código fuente de este filtro circular y descubra cómo incorporarlo a su proyecto.
- Dibuja un GPolygon con suficientes puntos para simular un círculo.
- Genere un archivo KML modificando http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024 y luego impórtelo. 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.
Para una solución API v3, consulte:
http://blog.enbake.com/draw-circle-with-google-maps-api-v3
Crea un círculo 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.
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. Esta página tiene un buen ejemplo: busque la función drawCircle en el código fuente.
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 de 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 Google Latitude al cambiar el fillColor, strokeColor, strokeWeight, etc. ( API completa ).