In questo post presenterò un esempio di come è possibile creare un tool per misurare le distanze in Google Map disegnando sulla mappa una linea. Ecco l’esempio: link

Per le nozioni di base sulla creazione di una mappa, generazione della chiave e inizializzazione rimando alla documentazione ufficiale di Google.

L’oggetto utilizzato è l’oggetto GPolyline che attraverso il metodo getLength restituisce la lunghezza in metri lungo la superficie terrestre.

Iniziamo con il definire una classe che si occupa di inizializzare l’oggetto mappa, con uno zoom sull’Italia. In questa classe inoltre definiamo le tre  variabili che conterranno rispettivamente l’elenco dei vertici della linea, l’elenco dei bookmark e l’oggetto GPolyline.

function MyApplication()
 {
  this.map = new GMap2(document.getElementById("map"));
  this.map.setCenter(new GLatLng(41.86956082699455, 12.32666015625), 6);
  var mapControl = new GMapTypeControl();
  this.map.addControl(mapControl);
  this.map.addControl(new GLargeMapControl());
  this.markers = new Array;
  this.vertes = new Array;
  this.linea = null;
  this.Out = document.getElementById("out")
  GEvent.bind(this.map, "click", this, this.onMapClick);
  }

La classe MyApplication ha inoltre una variabile Out che corrisponde all’elemento div in cui viene stampato il valore della misura.

Definiamo ora tre metodi per la classe:

Il primo metodo, legato all’evento click sulla mappa, è onMapClick: si occupa di aggiungere un nuovo vertice e un nuovo bookmark trascinabile.

MyApplication.prototype.onMapClick = function(marker,point)
  {
  //aggiungo il marker
  var marker = new GMarker(point , {draggable: true});
  this.map.addOverlay(marker);
  this.markers.push(marker);
  this.vertes.push(point);
  var index = this.vertes.length - 1
  GEvent.addListener(marker, "dragend", function()
  {
    Drag(index)
  })
  this.refreshLine();
} 

All’evento dragend del bookmark è associata la funzione Drag che serve ad aggiornare il vertice associato al bookmark con le nuove coordinate:

function Drag(index)
{
    application.refreshPoint(index);
}

 
Il secondo metodo della classe è refreshLine:crea la linea formata dai vertici corrispondenti ai bookmark inseriti con un click e aggiorna l’output

   MyApplication.prototype.refreshLine = function()
{
         if (this.vertes.length > 1) {
	        if (this.linea != null) {
                this.map.removeOverlay(this.linea);
           }
         p = new GPolyline(this.vertes)
         this.linea = p;
         this.map.addOverlay(p);
         this.Out.innerHTML =p.getLength()
        }
}

Infine il metodo RefreshPoint aggiorna un vertice della lista in base alla posizione del bookmark corrispondente:

MyApplication.prototype.refreshPoint = function(index)
{
     var marker = this.markers[index]
     this.vertes[index] = marker.getLatLng();
     this.refreshLine();
}

Il codice completo HTML + Javascript è link

Tags: Google Map, Javascript, Misura

This entry was posted on Monday, April 14th, 2008 at 8:09 am and is filed under Google Map, Javascript, Senza categoria. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.