2012-09-01 17 views
7

Estoy buscando una forma de dibujar el radio del círculo o una línea desde el centro del círculo hasta el borde del círculo (en una coordenada precisa en grados).Google Maps API en Javascript, dibuja el radio de un círculo?

¿Es posible? ¿Cómo?

Actualmente, dibujé un círculo con la API en el centro de mi mapa. No creo que ayuda ...

Ejemplo de lo que lo haría: http://twitpic.com/aq40vv

var sunCircle = { 
      strokeColor: "#c3fc49", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#c3fc49", 
      fillOpacity: 0.35, 
      map: map, 
      center: latlng, 
      radius: 1500 
     }; 
     cityCircle = new google.maps.Circle(sunCircle) 
+0

Debe publicar el código que ha intentado hasta ahora. –

+0

He editado la publicación :) –

Respuesta

1

La cosa perfecta para esto es la función de la computeOffset(from:LatLng, distance:number, heading:number, radius?:number)google.maps.geometry.spherical espacio de nombres, como se indica en la documentation

A partir de ahí, simplemente crea una polilínea desde el centro del círculo con el radio de sí mismo como el desplazamiento, puedes consultar un ejemplo rápido hice here (solo haz clic en el mapa para ver cómo funciona)

+0

¡Eso es exactamente lo que necesito! Gracias. –

+0

¿Hay alguna manera de mover la polilínea posteriormente? Darle un nuevo "camino"? –

+0

@Scofred sí, la Polyline tiene los métodos 'getPath' y' setPath', puede verificarlos en la [documentación] (https://developers.google.com/maps/documentation/javascript/reference#Polyline) – lccarrasco

8

probar este (No estoy seguro si esto es lo que usted pidió)

HTML:

<div id="map_canvas"></div>​ 

JS:

var map; 
var latlng = new google.maps.LatLng(-34.397, 150.644); 
function initialize() { 
    var mapOptions = { 
     center: latlng, 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var el=document.getElementById("map_canvas"); 
    map = new google.maps.Map(el, mapOptions); 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng 
    }); 

    var sunCircle = { 
     strokeColor: "#c3fc49", 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: "#c3fc49", 
     fillOpacity: 0.35, 
     map: map, 
     center: latlng, 
     radius: 15000 // in meters 
    }; 
    cityCircle = new google.maps.Circle(sunCircle) 
    cityCircle.bindTo('center', marker, 'position'); 
} 
initialize(); 

DEMO.

Referencia:Here y también this podría ser útil.

+1

Gracias por su ayuda, pero no es lo que necesito. –

Cuestiones relacionadas