486 lines
14 KiB
JavaScript
486 lines
14 KiB
JavaScript
// Déclaration des variables
|
|
var req1 = new XMLHttpRequest();
|
|
var req2 = new XMLHttpRequest();
|
|
|
|
var results1;
|
|
var results2;
|
|
|
|
var m1, m2, m3;
|
|
|
|
var point1 = new google.maps.LatLng(0.0, 0.0);
|
|
var point2 = new google.maps.LatLng(0.0, 0.0);
|
|
var point3 = new google.maps.LatLng(0.0, 0.0);
|
|
var point4 = new google.maps.LatLng(0.0, 0.0);
|
|
|
|
var zoneMarqueurs;
|
|
|
|
var adresse1 = "";
|
|
var adresse3 = "";
|
|
var adresse4 = "";
|
|
|
|
var clasListe = [];
|
|
var resListe = [];
|
|
var tab = [];
|
|
|
|
var INCREMENT = 0;
|
|
var fini = false;
|
|
|
|
var voiture = true;
|
|
var velo = false;
|
|
var marche = false;
|
|
var is_m1 = true;
|
|
var is_m2 = false;
|
|
var is_m3 = false;
|
|
|
|
// Les icones
|
|
var icone1, icone2, icone3;
|
|
|
|
// Fonction qui va retourner le tableau des Clas généré via le select listeClas
|
|
function get_liste(){
|
|
res = [];
|
|
liste = document.getElementById("listeClas");
|
|
|
|
for(var i = 0; i<liste.length; i++){
|
|
liste.selectedIndex = i;// On va à l'élément suivant du select
|
|
value = liste.value.split("_/_");
|
|
|
|
dictionnaire = {};// On stocke dans un dictionnaire
|
|
dictionnaire['no_clas']=value[0];
|
|
dictionnaire['no_region']=value[1];
|
|
dictionnaire['libelle']=value[2];
|
|
dictionnaire['adres1']=value[3];
|
|
dictionnaire['adres2']=value[4];
|
|
dictionnaire['code_postal']=value[5];
|
|
dictionnaire['ville']=value[6];
|
|
dictionnaire['code_pays']=value[7];
|
|
dictionnaire['no_tel']=value[8];
|
|
dictionnaire['mail']=value[9];
|
|
|
|
res.push(dictionnaire);
|
|
}
|
|
|
|
return res;
|
|
}
|
|
|
|
// Fonction appelée par la page
|
|
function chercher(){
|
|
// On met l'image de chargement au début
|
|
var img = document.getElementById("image").innerHTML;
|
|
document.getElementById("res").innerHTML = "<img src='" + img + "' style='width:100px'></img>";
|
|
|
|
// On cache la map et les moyens de locomotion
|
|
document.getElementById("moyenLocomotion").style.display = "none";
|
|
document.getElementById("map").style.display = "none";
|
|
|
|
// On affecte les variables utiles
|
|
var adresse = document.getElementById("adresse").value;
|
|
var departement = document.getElementById("departement").value;
|
|
var ville = document.getElementById("ville").value;
|
|
|
|
resListe = [];
|
|
clasListe = get_liste();
|
|
INCREMENT = 0;
|
|
fini = false;
|
|
|
|
icone1 = {
|
|
url: document.getElementById("icone1").innerHTML,
|
|
size: new google.maps.Size(32,45),
|
|
anchor: new google.maps.Point(17,45)
|
|
};
|
|
|
|
icone2 = {
|
|
url: document.getElementById("icone2").innerHTML,
|
|
size: new google.maps.Size(32,45),
|
|
anchor: new google.maps.Point(17,45)
|
|
};
|
|
|
|
icone3 = {
|
|
url: document.getElementById("icone3").innerHTML,
|
|
size: new google.maps.Size(32,45),
|
|
anchor: new google.maps.Point(17,45)
|
|
};
|
|
|
|
adresse1 = adresse + " " + departement + " " + ville;
|
|
|
|
// On lance la première recherche
|
|
var clas = clasListe[INCREMENT];
|
|
var adresse2 = clas.adres1 + " " + clas.code_postal + " " + clas.ville;
|
|
recherche(adresse1, adresse2);
|
|
}
|
|
|
|
// Fonction qui lance la recherche via l'API de adresse.data.gouv.fr
|
|
function recherche(adresse1, adresse2){
|
|
//alert(INCREMENT+1+"\n> ADRESSE 1 : " + adresse1 + "\n> ADRESSE 2 : " + adresse2);
|
|
req1.open("GET", "http://api-adresse.data.gouv.fr/search/?q="+adresse1,true);
|
|
req1.onreadystatechange = calcul;
|
|
req1.send(null);
|
|
|
|
req2.open("GET", "http://api-adresse.data.gouv.fr/search/?q="+adresse2,true);
|
|
req2.onreadystatechange = calcul;
|
|
req2.send(null);
|
|
}
|
|
|
|
// Fonction qui affiche le tableau des trois meilleurs
|
|
function aff(){
|
|
if(resListe.length == clasListe.length){
|
|
fini = true;
|
|
// On efface le nombre de clas traités
|
|
document.getElementById("traitement").innerHTML = "";
|
|
document.getElementById("clas").innerHTML = "";
|
|
// On trie le tableau resListe (il se retrouve en un grand tableau avec toute les valeurs en vrac
|
|
resListe.sort(function(a,b){
|
|
if(a[1] > b[1]){
|
|
return 1;
|
|
}
|
|
if(a[1] < b[1]){
|
|
return -1;
|
|
}
|
|
return 0;
|
|
});
|
|
// On prend les 3 premiers éléments du tableau
|
|
tab = [];
|
|
for(var i = 0; i < 3; i++){
|
|
tab.push(resListe[i]);
|
|
}
|
|
resListe = tab;
|
|
|
|
// On va chercher ces trois CLAS dans le tableau clasListe
|
|
tab = [];
|
|
for(var i = 0; i < resListe.length; i++){// On va prendre le ième élément de clasListe
|
|
tab.push(clasListe[resListe[i][0]]);
|
|
}
|
|
|
|
// On affiche
|
|
var res = document.getElementById("res");
|
|
res.innerHTML = "";
|
|
for(var i = 0; i < tab.length; i++){
|
|
var a = i+1;
|
|
var titre = "<b>" + a + " - " +tab[i].libelle+"</b>";
|
|
res.innerHTML += titre;
|
|
res.innerHTML += "<br/>";
|
|
|
|
if(tab[i].adres1.length > 3){
|
|
res.innerHTML += tab[i].adres1;
|
|
res.innerHTML += "<br/>";
|
|
}
|
|
|
|
if(tab[i].adres2.length > 3){
|
|
res.innerHTML += tab[i].adres2;
|
|
res.innerHTML += "<br/>";
|
|
}
|
|
|
|
res.innerHTML += tab[i].code_postal;
|
|
res.innerHTML += " ";
|
|
res.innerHTML += tab[i].ville;
|
|
res.innerHTML += "<br/>";
|
|
|
|
if(tab[i].no_tel.length > 3){
|
|
res.innerHTML += "Téléphone : ";
|
|
res.innerHTML += tab[i].no_tel;
|
|
res.innerHTML += "<br/>";
|
|
}
|
|
|
|
if(tab[i].mail.length > 3){
|
|
res.innerHTML += tab[i].mail;
|
|
res.innerHTML += "<br/>";
|
|
}
|
|
|
|
res.innerHTML += "Distance : ";
|
|
res.innerHTML += resListe[i][1];
|
|
res.innerHTML += " km";
|
|
|
|
res.innerHTML += "<br/><br/><br/>";
|
|
}
|
|
// On affiche la map et les moyens de locomotion
|
|
document.getElementById("moyenLocomotion").style.display = "block";
|
|
document.getElementById("map").style.display = "block";
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
zoom: 12,
|
|
center: point1,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
});
|
|
document.getElementById("map").style.width = '100%';
|
|
document.getElementById("map").style.height = '750px';
|
|
|
|
// On définit ce qui va afficher l'itinéraire
|
|
direction = new google.maps.DirectionsRenderer({
|
|
map: map,
|
|
suppressMarkers: true
|
|
});
|
|
|
|
// On met les points sur la carte
|
|
// 0 - La position du bonhomme
|
|
pos = new google.maps.Marker({
|
|
position: point1,
|
|
title: adresse1,
|
|
map: map
|
|
});
|
|
|
|
// On lance le placement des points
|
|
INCREMENT = 0;
|
|
adresse2 = tab[0].adres1 + " " + tab[0].code_postal + " " + tab[0].ville;
|
|
recherche(adresse1, adresse2);
|
|
} else {
|
|
if(fini == false){
|
|
// On affiche le nombre de clas traités
|
|
var gFin = 200;
|
|
var b = Math.floor(gFin - (resListe.length*gFin/clasListe.length)) % gFin;
|
|
var g = Math.floor(resListe.length*gFin/clasListe.length) % gFin;
|
|
document.getElementById("traitement").innerHTML = "Distances calculées : <b style='color:rgb(0,"+g+","+b+")'>" + resListe.length + "</b>/<b style='color:rgb(0,"+gFin+",0)'>" + clasListe.length+"</b>";
|
|
// On lance les recherches suivantes
|
|
var clas = clasListe[INCREMENT];
|
|
var adresse2 = clas.adres1 + " " + clas.code_postal + " " + clas.ville;
|
|
recherche(adresse1, adresse2);
|
|
// On affiche le nom du clas traité
|
|
document.getElementById("clas").innerHTML = adresse2;
|
|
}else{
|
|
if(INCREMENT == 1){
|
|
adresse3 = tab[1].adres1 + " " + tab[1].code_postal + " " + tab[1].ville;
|
|
recherche(adresse1, adresse3);
|
|
} else if(INCREMENT == 2){
|
|
adresse4 = tab[2].adres1 + " " + tab[2].code_postal + " " + tab[2].ville;
|
|
recherche(adresse1, adresse4);
|
|
} else if(INCREMENT == 3){
|
|
// On attend la fin des deux étapes précédentes pour afficher les deux derniers points
|
|
// 1 - La position du premier point
|
|
m1 = new google.maps.Marker({
|
|
position: point2,
|
|
title: adresse2,
|
|
icon: icone1,
|
|
map: map
|
|
});
|
|
|
|
// 2 - La position du deuxième point
|
|
m2 = new google.maps.Marker({
|
|
position: point3,
|
|
title: adresse3,
|
|
icon: icone2,
|
|
map: map
|
|
});
|
|
|
|
// 3 - La position du troisième point
|
|
m3 = new google.maps.Marker({
|
|
position: point4,
|
|
title: adresse4,
|
|
icon: icone3,
|
|
map: map
|
|
});
|
|
|
|
// On réduit assez pour afficher les 3 boutons
|
|
zoneMarqueurs = new google.maps.LatLngBounds();
|
|
zoneMarqueurs.extend(pos.getPosition());
|
|
zoneMarqueurs.extend(m1.getPosition());
|
|
zoneMarqueurs.extend(m2.getPosition());
|
|
zoneMarqueurs.extend(m3.getPosition());
|
|
|
|
map.fitBounds(zoneMarqueurs);
|
|
|
|
// Définition des listeners
|
|
// Click gauche
|
|
google.maps.event.addListener(m1, 'click', function(){
|
|
itineraire(point1,point2);
|
|
});
|
|
google.maps.event.addListener(m2, 'click', function(){
|
|
itineraire(point1,point3);
|
|
});
|
|
google.maps.event.addListener(m3, 'click', function(){
|
|
itineraire(point1,point4);
|
|
});
|
|
// Click droit
|
|
google.maps.event.addListener(map, 'rightclick', function(){
|
|
map.fitBounds(zoneMarqueurs);
|
|
});
|
|
// MouseOver
|
|
var info1 = new google.maps.InfoWindow({
|
|
content: "<div id='content'>Distance : "+resListe[0][1]+" km</div>"
|
|
});
|
|
var info2 = new google.maps.InfoWindow({
|
|
content: "<div id='content'>Distance : "+resListe[1][1]+" km</div>"
|
|
});
|
|
var info3 = new google.maps.InfoWindow({
|
|
content: "<div id='content'>Distance : "+resListe[2][1]+" km</div>"
|
|
});
|
|
google.maps.event.addListener(m1, 'mouseover', function(){
|
|
info1.open(map, m1);
|
|
//m1.setAnimation(google.maps.Animation.BOUNCE);
|
|
});
|
|
google.maps.event.addListener(m2, 'mouseover', function(){
|
|
info2.open(map, m2);
|
|
//m2.setAnimation(google.maps.Animation.BOUNCE);
|
|
});
|
|
google.maps.event.addListener(m3, 'mouseover', function(){
|
|
info3.open(map, m3);
|
|
//m3.setAnimation(google.maps.Animation.BOUNCE);
|
|
});
|
|
// MouseOut
|
|
google.maps.event.addListener(m1, 'mouseout', function(){
|
|
info1.close(map, m1);
|
|
//m1.setAnimation(null);
|
|
});
|
|
google.maps.event.addListener(m2, 'mouseout', function(){
|
|
info2.close(map, m2);
|
|
//m2.setAnimation(null);
|
|
});
|
|
google.maps.event.addListener(m3, 'mouseout', function(){
|
|
info3.close(map, m3);
|
|
//m3.setAnimation(null);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fonction CALLBACK
|
|
function calcul(){
|
|
if(req1.readyState == 4 && req2.readyState == 4){
|
|
// Première requête
|
|
if(req1.responseText.length == 123+adresse1.length){// On contrôle si la requête ADRESSE UTILISATEUR ne renvoie rien
|
|
document.getElementById("res").innerHTML = "<b style='color:red'>L'adresse que vous avez indiqué est incorrecte.<b>";
|
|
document.getElementById("traitement").innerHTML = "";
|
|
document.getElementById("clas").innerHTML = "";
|
|
} else {
|
|
results1 = eval('(' + req1.responseText + ')');
|
|
point1 = new google.maps.LatLng(results1.features[0].geometry.coordinates[1], results1.features[0].geometry.coordinates[0]);
|
|
|
|
// Deuxième requête
|
|
results2 = eval('(' + req2.responseText + ')');
|
|
if(fini==false){
|
|
point2 = new google.maps.LatLng(results2.features[0].geometry.coordinates[1], results2.features[0].geometry.coordinates[0]);
|
|
} else {
|
|
if(INCREMENT == 0){
|
|
point2 = new google.maps.LatLng(results2.features[0].geometry.coordinates[1], results2.features[0].geometry.coordinates[0]);
|
|
} else if(INCREMENT == 1){
|
|
point3 = new google.maps.LatLng(results2.features[0].geometry.coordinates[1], results2.features[0].geometry.coordinates[0]);
|
|
} else if(INCREMENT == 2){
|
|
point4 = new google.maps.LatLng(results2.features[0].geometry.coordinates[1], results2.features[0].geometry.coordinates[0]);
|
|
}
|
|
}
|
|
|
|
// Calcul de la distance
|
|
var distance = google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
|
|
distance = distance/1000;// On prend le nombre de km
|
|
distance = Math.floor(distance*100)/100;//On réduit à deux chiffres après la virgule
|
|
|
|
var tableau = [];
|
|
tableau.push(INCREMENT);
|
|
tableau.push(distance);
|
|
|
|
resListe.push(tableau);
|
|
|
|
INCREMENT++;
|
|
|
|
aff();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fonction de calcul de l'initénaire
|
|
function itineraire(origin, destination){
|
|
// On contrôle le radiobutton qui est coché (au cas où l'utilisateur a fait F5 et que le bouton VOITURE n'est pas coché
|
|
var btn = document.getElementsByName("moyenLocomotion");
|
|
if(btn[1].checked){// Vélo coché
|
|
voiture = false;
|
|
velo = true;
|
|
marche = false;
|
|
} else if(btn[2].checked){// Marche cochée
|
|
voiture = false;
|
|
velo = false;
|
|
marche = true;
|
|
} else {// Voiture cochée (par défaut)
|
|
voiture = true;
|
|
velo = false;
|
|
marche = false;
|
|
}
|
|
// On re-contrôle le radiobutton qui est coché
|
|
var mode;
|
|
if(voiture == true){
|
|
mode = "DRIVING";
|
|
} else if(velo == true){
|
|
mode = "BICYCLING";
|
|
} else if(marche == true){
|
|
mode = "WALKING";
|
|
}
|
|
|
|
// On change la valeur de is_m[n°]
|
|
var TEMPS = 7000;
|
|
if(destination == m1.position){
|
|
is_m1 = true;
|
|
is_m2 = false;
|
|
is_m3 = false;
|
|
if(m1.animation == null){
|
|
m1.setAnimation(google.maps.Animation.BOUNCE);
|
|
m2.setAnimation(null);
|
|
m3.setAnimation(null);
|
|
setTimeout(function(){m1.setAnimation(null)}, TEMPS);// Timer de TEMPS secondes pour l'animation
|
|
}
|
|
} else if(destination == m2.position){
|
|
is_m1 = false;
|
|
is_m2 = true;
|
|
is_m3 = false;
|
|
if(m2.animation == null){
|
|
m1.setAnimation(null);
|
|
m2.setAnimation(google.maps.Animation.BOUNCE);
|
|
m3.setAnimation(null);
|
|
setTimeout(function(){m2.setAnimation(null);}, TEMPS);
|
|
}
|
|
} else if(destination == m3.position){
|
|
is_m1 = false;
|
|
is_m2 = false;
|
|
is_m3 = true;
|
|
if(m3.animation == null){
|
|
m1.setAnimation(null);
|
|
m2.setAnimation(null);
|
|
m3.setAnimation(google.maps.Animation.BOUNCE);
|
|
setTimeout(function(){m3.setAnimation(null);}, TEMPS);
|
|
}
|
|
}
|
|
|
|
var request = {
|
|
origin: origin,
|
|
destination: destination,
|
|
travelMode: google.maps.TravelMode[mode]
|
|
}
|
|
var directionsService = new google.maps.DirectionsService();
|
|
directionsService.route(request, function(response, status){
|
|
if(status == google.maps.DirectionsStatus.OK){
|
|
direction.setDirections(response);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fonction de changement de mode de locomotion
|
|
function locomotion(mode){
|
|
// On contrôle le mode
|
|
if(mode == "D"){
|
|
voiture = true;
|
|
velo = false;
|
|
marche = false;
|
|
} else if(mode == "B"){
|
|
voiture = false;
|
|
velo = true;
|
|
marche = false;
|
|
} else if(mode == "W"){
|
|
voiture = false;
|
|
velo = false;
|
|
marche = true;
|
|
}
|
|
|
|
// On contrôle la destination
|
|
if(is_m1){
|
|
itineraire(point1, point2);
|
|
} else if(is_m2){
|
|
itineraire(point1, point3);
|
|
} else if(is_m3){
|
|
itineraire(point1, point4);
|
|
}
|
|
}
|
|
|
|
function controleDebut(){
|
|
var a = document.getElementById("adresse").value.length;
|
|
var c = document.getElementById("departement").value.length;
|
|
var v = document.getElementById("ville").value.length;
|
|
if(a>0 || c>0 || v>0){
|
|
chercher();
|
|
}
|
|
}
|