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 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
|
<html>
<head>
<title>Google Maps API v3 Example: Distance Matrix</title>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
// Quand je sélectionne une ville
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('resultat').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajax.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
sel = document.getElementById('start');
client = sel.options[sel.selectedIndex].value;
xhr.send("client="+client);
}
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</script>
<style type="text/css">
body {
margin: 20px;
font-size: 12px;
}
#map {
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
</style>
<?php
include('connexion_base.php');
//Reqête pour alimenter le menu déoulant
$retour_sel = mysql_query(" SELECT CONCAT(c.nom, ' ', c.ville) AS Client,
c.id_client,
CONCAT(cc.lat, ',', cc.lon) AS coord
FROM client c
JOIN client_coord cc
ON c.id_client=cc.client_co
GROUP BY c.id_client
ORDER BY c.nom");
//Requête pour alimenter l'array destination en fixe
$retour = mysql_query(" SELECT c.nom,
CONCAT(cc.lat, ',', cc.lon) AS coord
FROM client c
JOIN client_coord cc
ON c.id_client=cc.client_co
ORDER BY c.nom
LIMIT 0,10");
$i=1;
while ($donnees = mysql_fetch_array($retour))
{
$destination[$i] = $donnees['coord'];
$i++;
}
?>
<script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
// Array en fixe qui devra être alimenter par la requête ajax
var destinationA = "<?php echo $destination['1']; ?>";
var destinationB = "<?php echo $destination['2']; ?>";
var destinationC = "<?php echo $destination['3']; ?>";
var destinationD = "<?php echo $destination['4']; ?>";
var destinationE = "<?php echo $destination['5']; ?>";
//var desti = array["Marseille, France", "Nice, France"];
var destinationIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000";
var originIcon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000";
function initialize() {
var opts = {
center: new google.maps.LatLng(55.53, 9.4),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
}
function calculateDistances() {
var origin1 = document.getElementById("start").value;
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin1],
destinations: [destinationA, destinationB, destinationC, destinationD, destinationE],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = "";
deleteOverlays();
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
outputDiv.innerHTML += "<table border='1'><tr><td><b>" + origins[i] + "</b></td><td>" + destinations[j]
+ "</td><td>" + results[j].distance.text + "</td><td>"
+ results[j].duration.text + "</td></tr></table>";
}
outputDiv.innerHTML += "";
}
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({'address': location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: "
+ status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="resultat"></div>
<div id="inputs">
<pre class="prettyprint">
</pre>
<p>
<select id="start" onChange="go()">
<?php
while ($donnees_sel = mysql_fetch_array($retour_sel))
{
echo '<option value="'.$donnees_sel['coord'].'">'.$donnees_sel['Client'].'</option>';
}
?>
</select>
<button type="button" onClick="calculateDistances();">Calculate
distances</button></p>
</div>
<div id="outputDiv"></div>
<div id="map"></div>
</body>
</html> |
Partager