2012-09-01 4 views
7

Sto cercando un modo per disegnare il raggio del cerchio o una linea dal centro del cerchio al bordo del cerchio (in un preciso coordinata in gradi).API di Google Maps in Javascript, Disegnare il raggio di un cerchio?

È possibile? Come?

Attualmente, ho disegnato un cerchio con l'API dal centro della mia mappa. Non credo che aiuta ...

esempio di quello che sarebbe: 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

Dovresti pubblicare il codice che hai provato fino ad ora. –

+0

Ho modificato il post :) –

risposta

1

La cosa perfetta per questo è la funzione computeOffset(from:LatLng, distance:number, heading:number, radius?:number) dal google.maps.geometry.spherical spazio dei nomi, come riferimento nella documentation

Da lì in poi basta creare una polilinea dal centro del cerchio con il raggio di se stesso come offset, puoi controllare un esempio veloce che ho fatto here (basta cliccare sulla mappa per vederla funzionante)

+0

Questo è esattamente ciò di cui ho bisogno! Grazie. –

+0

C'è un modo per spostare la polilinea dopo? Dagli un nuovo "percorso"? –

+0

@Scofred sì, la polilinea ha i metodi 'getPath' e' setPath', puoi verificarli nella [documentazione] (https://developers.google.com/maps/documentation/javascript/reference#Polyline) – lccarrasco

8

Prova questa (non so se questo è ciò che lei ha chiesto)

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.

Riferimento:Here e anche this potrebbe essere utile.

+1

Grazie per il tuo aiuto ma non è quello che mi serve. –