1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
| <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.sql.*" %>
<%@ page import="java.io.*" %>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Tracer des itinéraires</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<% String adr = request.getParameter("adr") ;%>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var idColor=0;
var colors = ['#FF0000', '#495CFF', '#D400FF', '#B9121B', '#05966D', '#5EB6DD', '#FFF168','#8FCF3C','#FFB6B8','#FF5B2B','#FFDA8C','#B78178','#FF483D','#DCDCDC','#495CFF','#2F574D'];
var listeItineraires;
var listeVilles = ["chateauroux","saint malo","bordeaux","strasbourg","nice","besançon"];
//------------------------------------------------------------------------------------------------------------
function itinerairesParDefaut() {
var element = document.getElementById("villes");
var i=0;
element.innerHTML +="#";
for(i=1;i<listeVilles.length;i++)element.innerHTML += listeVilles[i]+":"+listeVilles[0]+"#";
}
//------------------------------------------------------------------------------------------------------------
function initialize() {
var bourges = new google.maps.LatLng(47.08, 2.39); // centre la carte
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: bourges
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
itinerairesParDefaut();
//directionsDisplay.setMap(map);
}
//------------------------------------------------------------------------------------------------------------
function position (nom){
var i= 0;
while (i<listeVilles.length){
if (nom==listeVilles[i]) return i;
i++;
}
listeVilles.push(nom);
return i;
}
//------------------------------------------------------------------------------------------------------------
function traceRoute2() {
var element = document.getElementById("zoneMessage");
if (listeItineraires.length > 0) {
var trajet = listeItineraires.pop().split(":");
if (trajet.length!=2) traceRoute2();
var indVille = position(trajet[0]);
var request = {
origin:trajet[0],
destination:trajet[1],
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var polylineOp = {
// strokeColor:"#FF0000"
strokeColor:colors[indVille]
};
var renderOptions = {
polylineOptions : polylineOp
};
idColor++;
// Pour pouvoir afficher plusieurs itinéraires sur la même carte, il faut créer un objet directionDisplay par itinéraire
directionsDisplay = new google.maps.DirectionsRenderer(renderOptions);
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var distance = response.routes[0].legs[0].distance.value;
var duree = response.routes[0].legs[0].duration.value;
document.getElementById('distance_parcouru').innerHTML = distance/1000 + " km";
document.getElementById('duration').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
traceRoute2();
document.getElementById('distance_parcouru1').innerHTML = distance/1000 + " km";
document.getElementById('duration1').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
tracerRoute2();
document.getElementById('distance_parcouru2').innerHTML = distance/1000 + " km";
document.getElementById('duration2').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
tracerRoute2();
document.getElementById('distance_parcouru3').innerHTML = distance/1000 + " km";
document.getElementById('duration3').innerHTML = Math.round((duree/3600)*10)/10 + " heure";
tracerRoute2();
} else {
element.innerHTML += "Erreur:"+start+"\n";
}
});
}
}
//------------------------------------------------------------------------------------------------------------
function tracerItineraires(liste){
// Format : #lille:paris#bordeaux:lorient#marseille:pau#
//var listeItineraires = liste.split("#");
listeItineraires = liste.split("#");
// var lettres = "abcdefghijklmnopqrstuvxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var element = document.getElementById("zoneMessage");
var dernier = listeItineraires[listeItineraires.length-1];
var index = -1 ;
if (dernier.length==0) listeItineraires.pop();
else {
for (i=0;i<listeItineraires.length;i++) {
index = lettres.indexOf(dernier[i],0);
if (index > -1) break; // la derniere chaine contient au moins une lettre
}
if (index == -1) listeItineraires.pop();
}
element.innerHTML += " La liste des itineraires : \n";
for (i=0;i<listeItineraires.length;i++) {
var trajet = listeItineraires[i].split(":");
if (trajet.length==2){
element.innerHTML += i+":"+trajet[0]+" vers "+trajet[1]+"\n";
}
}
traceRoute2();
element.innerHTML += " ---------------------- \n\n";
}
</script>
</head>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="formulaire" >
<p>
<form action="#" onsubmit="tracerItineraires(this.address.value); return false">
<textarea id="villes" cols=150 rows=2 name="address" onFocus="this.value=''"></textarea>
<br/>
<input type="submit" value="Afficher les itinéraires" />
</form>
</p>
</div>
<div id="message"> </div>
<textarea id="zoneMessage" style="width: 100%; height: 100px; float:right; border: 1px solid black;"></textarea>
<input type="text" id="depart" value="Adresse de départ" onclick="this.value=''" onchange="addressChange(this)"/>
<input type="text" id="arrive" value="Adresse de d'arrivé" onclick="this.value=''" onchange="addressChange(this)"/>
<p>Distance : <span id="distance_parcouru"></span></p>
<p>Durée estimée en voiture : <span id="duration"></span></p>
<p>Distance : <span id="distance_parcouru1"></span></p>
<p>Durée estimée en voiture : <span id="duration1"></span></p>
<p>Distance : <span id="distance_parcouru3"></span></p>
<p>Durée estimée en voiture : <span id="duration3"></span></p>
<div id="map_canvas"></div>
</body>
</html> |
Partager