Google map: percorso tra 2 punti in Km

**digitm** · 18-01-2012, 18:45

Ciao Ragazzi, ho girato mezzo web e non sono riuscito a trovare nulla.

Date 2 coppie di coordinate è possibile che mi restituisca la distanza in Km? A me interessa solo quella, e non l'intero itinerario. In giro ho trovato diverse cose, ma sempre con il calcolo in linea d'aria, che per quello che devo fare io (presenza di montagne tra 2 punti), non mi serve....

Mi dare ste una mano?
grazie in anticipo a tutti

**digitm** · 20-01-2012, 17:11

ragazzi, nessun aiuto????

**Vindav** · 20-01-2012, 18:14

codice:

directions = new GDirections(map);
directions.load("from: Milano to: Roma");
GEvent.addListener(directions, "load", function(){
	directions.getDistance().html;
});

**digitm** · 20-01-2012, 19:20

Intanto grazie per la risposta

)

Io non conosco il Javascript, quindi mi scervellerò un pochetto per farlo andare....

Grazie!

**digitm** · 21-01-2012, 10:45

Originariamente inviato da Vindav

codice:

directions = new GDirections(map);
directions.load("from: Milano to: Roma");
GEvent.addListener(directions, "load", function(){
	directions.getDistance().html;
});

Ma è la versione 2 o la 3? Perchè ho visto che la 2 è deprecata...

Poi, ne approfitto della tua gentilezza, ma come faccio funzionare il tutto... Ho provato a scaricare lo scipt della mappa più semplice di google, facendo alcune sostituzioni... ma avrò fatto qualche casino.... Non è che mi aiuteresti? Come lo si implementa?

**Vindav** · 23-01-2012, 11:40

Per le API v3 puoi seguire questo esempio, le uniche modifiche da apportare sono:

codice:

var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING,
        //opzione per mostrare la distanza in km
        unitSystem: google.maps.UnitSystem.METRIC  
      };
      directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
          //inserire la distanza in un div
          document.getElementById("distanza").innerHTML = result.routes[0].legs[0].distance.text;
        }
      });

Ovviamente ti devi creare il div "distanza"

**digitm** · 27-01-2012, 14:43

ecco cosa ho usato:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(37.50505959242114, 15.0897216796875);
var myOptions = {
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
directionsDisplay.setMap(map);
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
document.getElementById("distanza").innerHTML = response.routes[0].legs[0].distance.text;
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
Start:
<select id="start" onchange="calcRoute();">
<option value="">--- scegli ---</option>
<option value="Taormina">Taormina</option>
<option value="Palermo">Palermo</option>
<option value="Catania">Catania</option>
<option value="Giarre">Giarre</option>
</select>
End:
<select id="end" onchange="calcRoute();">
<option value="">--- scegli ---</option>
<option value="Siracusa">Siracusa</option>
<option value="Messina">Messina</option>
</select>
</div>
<div id="distanza" style="position:absolute;top:30px;left:0px;height: 30px;width:100px;background-color:#CCCCCC"></div>
</body>
</html>

Funziona...

Adesso ti faccio due domande:

1) Se piuttosto che il nome della città, nella value della select volessi usare le coordinate (lat e Lang), come dovrei fare?

2) Estraggo dal database N località. Vorrei che per ognuna di esse mi restituisca la distanza dal punto principale (per intenderci quello della variabile "var chicago"), ordinata per distanza dalla più vicina alla più lontana. Es

distanza da ---------> a
var chicago primo indirizzo (Lat e Lang) = 3,5 km
var chicago secondo indirizzo (Lat e Lang) = 5,6 km
var chicago terzo indirizzo (Lat e Lang) = 12,5 km
ecc...

Qualcosa del tipo uso l'ASP:

<% for i=1 to n %>
Qui una riga che recuperi i valori di latitudine e longitudine e li passi ad una funzione che restituisca il valore
<%
rs.movenext
loop
%>

per intenderci, una cosa del genere:
http://www.ariadelsalento.it/index.p...=79&Itemid=103

**Vindav** · 27-01-2012, 15:50

codice:

var service = new google.maps.DistanceMatrixService();
var request = {
	      origins:[new google.maps.LatLng(45.468945,9.181030)],
	      destinations:[new google.maps.LatLng(41.903110,12.495760),new google.maps.LatLng(45.190825, 9.150414)],
	      travelMode: google.maps.TravelMode.DRIVING,
	      unitSystem: google.maps.UnitSystem.METRIC
      };
      service.getDistanceMatrix(request, function(result, status){
		if (status == google.maps.DistanceMatrixStatus.OK) {
			for(i=0;i<result.rows.length;i++){
				for(j=0;j<result.rows[i].elements.length;j++){
					alert(result.rows[i].elements[j].distance.text);
				}
			}
      	}
      });

**digitm** · 27-01-2012, 16:30

)..ma non saprei da dove iniziare)

3) piuttosto che aprrire le alert è possibile vedere nel corpo pagina:
la distanza 1 è: 574 km
la distanza 1 è: 43,1 km

grazie in anticipo
M

**Vindav** · 27-01-2012, 17:01

puoi gestirlo come meglio credi, mi sembrava + che ovvio che il mio è solo un esempio, non vuoi gli alert? levali e sostituiscili con cio che vuoi fare. Non voglio sembrarti scortese ma il forum non è un help desk, il codice te l'ho scritto ora sta a te adattarlo alle tue esigenze

1) si, sono le distanze tra milano(punto di origine) e roma,pavia(punti di destinazione)
2) quella riga è semplicemente un array di destinazioni, io per farti un esempio li ho inseriti direttamente dentro le opzioni della request ma anche qui puoi gestirlo come meglio credi, puoi generare una riga di codice che rappresenti un array js(ma te lo sconsiglio), puoi crearti l'array con i punti direttamente in php, salvarlo in sessione per esempio, e passarlo a javascript, puoi generare un json o un xml, puoi procedere in mille modi diversi sta a te scegliere quello + adatto alle tue esigenze

Discussione: Google map: percorso tra 2 punti in Km

Strumenti discussione

Ricerca discussione

Visualizza

Google map: percorso tra 2 punti in Km

Permessi di invio