Exemples - Itinéraires
Faire un calcul d'itinéraire
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ViaMichelin Maps & Drive API</title>
<script src="http://api.viamichelin.com/apijs/js/api.js"
type="text/javascript"></script>
<script type="text/javascript">
VMAPI.registerKey("JSBS20070201123465789");
VMAPI.setLanguage("fra");
function search_start_location(){
document.getElementById('result_action').style.display = 'none';
document.getElementById('youritidiv').style.display = 'none';
Start_geocoder = new VMGeocoder();
Start_myaddress = new VMAddress();
var elements_formulaires =
document.forms['itisearch_form'].elements;
Start_myaddress.address = elements_formulaires['form_Start_address'].value;
Start_myaddress.zipCode = elements_formulaires['form_Start_CP'].value;
Start_myaddress.city = elements_formulaires['form_Start_city'].value;
Start_myaddress.countryVMCode = elements_formulaires['form_Start_country'].value;
Start_geocoder.addEventHandler("onCallBack",search_stop_location);
Start_geocoder.search(Start_myaddress);
}
function search_stop_location(){
Stop_geocoder = new VMGeocoder();
Stop_myaddress = new VMAddress();
var elements_formulaire =
document.forms['itisearch_form'].elements;
Stop_myaddress.address = elements_formulaire['form_Stop_address'].value;
Stop_myaddress.zipCode = elements_formulaire['form_Stop_CP'].value;
Stop_myaddress.city = elements_formulaire['form_Stop_city'].value;
Stop_myaddress.countryVMCode = elements_formulaire['form_Stop_country'].value;
Stop_geocoder.addEventHandler("onCallBack",search_step_location);
Stop_geocoder.search(Stop_myaddress);
}
function search_step_location(){
if (document.forms['itisearch_form'].elements['form_Step_address'].value != "" || document.forms['itisearch_form'].elements['form_Step_CP'].value != "" || document.forms['itisearch_form'].elements['form_Step_city'].value != ""){
Step_geocoder = new VMGeocoder();
Step_myaddress = new VMAddress();
var elements_formulaire =
document.forms['itisearch_form'].elements;
Step_myaddress.address = elements_formulaire['form_Step_address'].value;
Step_myaddress.zipCode = elements_formulaire['form_Step_CP'].value;
Step_myaddress.city = elements_formulaire['form_Step_city'].value;
Step_myaddress.countryVMCode = elements_formulaire['form_Step_country'].value;
Step_geocoder.addEventHandler("onCallBack",search_iti);
Step_geocoder.search(Step_myaddress);
} else {
search_iti();
}
}
function search_iti(){
myiti = new VMItinerary();
myiti.addStopOver(Start_geocoder.result);
var elements_formulaire =
document.forms['itisearch_form'].elements;
if (elements_formulaire['form_Step_address'].value != ""
|| elements_formulaire['form_Step_CP'].value != ""
|| elements_formulaire['form_Step_city'].value != ""){
myiti.addStopOver(Step_geocoder.result);
}
myiti.addStopOver(Stop_geocoder.result);
myiti.setItineraryType(elements_formulaire['form_Type'].value);
myiti.setItineraryVehicleType(elements_formulaire['form_Vh'].value);
myiti.setCarType(elements_formulaire['form_Cat'].value);
myiti.setFuelType(elements_formulaire['form_Carb'].value);
myiti.setFuelCost(elements_formulaire['form_Prix'].value);
myiti.addEventHandler("onCallBack",iti_found);
myiti.search();
}
function iti_found(){
alert('Itineraire trouvé');
document.getElementById('result_action').style.display = '';
}
function display_roadsheet(){
if (typeof(myiti)!="undefined"){
document.getElementById('youritidiv').innerHTML = myiti.roadSheet.getHTML(mymap);
document.getElementById('youritidiv').style.display = '';
} else {
alert('Aucun itinéraire chargé');
}
}
function display_onmap(){
if (typeof(myiti)!="undefined"){
if (typeof(mymap)!="undefined"){
document.getElementById('yourmapdiv').innerHTML = "";
mymap = new VMMap(document.getElementById("yourmapdiv"));
mymap.addLayer(myiti.getItiAsVMComplexLayer("#FF0000",7,0.5));
mymap.drawMapFromLayers();
} else {
mymap = new VMMap(document.getElementById("yourmapdiv"));
mymap.addLayer(myiti.getItiAsVMComplexLayer("#FF0000",7,0.5));
mymap.drawMapFromLayers();
}
mymap.addLayer(myiti.roadSheet.getLayer());
mymap.showMapTools(3);
} else {
alert('Aucun itinéraire chargé');
}
}
function display_informations(){
strHTML =
"Distance totale en mètres :"
+myiti.getTotalDistance()+"m<br>"
+ "Distance parcourue sur autoroute : "
+myiti.getDistanceOnMotorway()+"m<br>"
+ "Temps total en secondes : "
+myiti.getTotalTime()+"s<br>"
+ "Temps de parcours sur autoroute : "
+myiti.getTimeOnMotorway()+"s<br>"
+ "Coût consommation carburant :"
+myiti.getTotalGasConsumption()+"€<br>"
+ "Coût péage autoroute : "
+myiti.getTollCost()+"€<br>"
+ "Coût vignette : "
+myiti.getRoadTaxCost()+"€<br>";
document.getElementById('youritiresumediv').style.display = '';
document.getElementById('youritiresumediv').innerHTML = strHTML;
}
function load_country(){
VMCountryUtil.addEventHandler(
"onCallBack",
function(){
document.getElementById("div_country_start").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Start_country","FRA");
document.getElementById("div_country_stop").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Stop_country","FRA");
document.getElementById("div_country_step").innerHTML =
VMCountryUtil.getSelectHTMLString("form_Step_country","FRA");
}
);
VMCountryUtil.loadCountryLabels();
}
</script>
</head>
<body onload="load_country();">
<h1>ViaMichelin - Exemple d'itinéraire</h1>
<p>Calculer un itinéraire entre deux adresses postales</p>
<table>
<tr>
<td>
<form name="itisearch_form">
<fieldset>
<legend>Départ</legend>
<label for="form_Start_address">Adresse :</label>
<input type="text" value="" name="form_Start_address"
id="form_Start_address"/>
<br/>
<label for="form_Start_CP">Code Postal :</label>
<input type="text" value="75001" name="form_Start_CP"
id="form_Start_CP"/>
<br/>
<label for="form_Start_city">Ville :</label>
<input type="text" value="" name="form_Start_city" />
<label for="form_Start_country">Pays :</label>
<div id="div_country_start"></div>
</fieldset>
<br />
<fieldset>
<legend>Destination</legend>
<label for="form_Stop_address">Adresse :</label>
<input type="text" value="" name="form_Stop_address"
id="form_Stop_address"/>
<br/>
<label for="form_Stop_CP">Code Postal :</label>
<input type="text" value="93260" name="form_Stop_CP"
id="form_Stop_CP">
<br/>
<label for="form_Stop_city">Ville :</label>
<input type="text" value="" name="form_Stop_city"
id="form_Stop_city"/>
<label for="form_Stop_country">Pays :</label>
<div id="div_country_stop"></div>
</fieldset>
<br/>
<fieldset>
<legend>Etape</legend>
<label for="form_Step_address">Adresse :</label>
<input type="text" value="" name="form_Step_address"
id="form_Step_address"/>
<br/>
<label for="form_Step_CP">Code Postal :</label>
<input type="text" value="" name="form_Step_CP"
id="form_Step_CP"/>
<br/>
<label for="form_Step_city">Ville :</label>
<input type="text" value="" name="form_Step_city"
id="form_Step_city"/>
<label for="form_Step_country">Pays :</label>
<div id="div_country_step"></div>
</fieldset>
<br/>
<fieldset>
<legend>Options</legend>
<label for="form_Type">Type de trajet :</label>
<select name="form_Type" id="form_Type">
<option value="0">Recommendé par Michelin</option>
<option value="1">Le plus court</option>
<option value="2">Le plus rapide</option>
<option value="3">Economique</option>
<option value="4">Découverte</option>
<option value="5">A pieds</option>
<option value="6">A vélo</option>
</select>
<br/>
<div id="option_type">
<label for="form_Vh">Type de véhicule :</label>
<select name="form_Vh" id="form_Vh">
<option value="0" selected>Automobile</option>
<option value="1">Moto</option>
<option value="2">Caravane</option>
</select>
<br/>
<label for="form_Cat">Catégorie de véhicule :</label>
<select name="form_Cat" id="form_Cat">
<option value="0" selected>Citadine</option>
<option value="1">Compacte</option>
<option value="2">Familiale</option>
<option value="3">Routière</option>
<option value="4">Luxe</option>
</select>
<br />
<label for="form_Carb">Type de carburant</label>
<select name="form_Carb" id="form_Carb">
<option value="0" selected>Essence</option>
<option value="1">Diesel</option>
<option value="2">GPL</option>
</select>
<br />
<label for="form_Prix">Coût du carburant (euros) :</label>
<input type="text" value="1.1" name="form_Prix" size="5" />
</div>
</fieldset>
<br />
<input type="button" value="Rechercher"
onclick="search_start_location();" />
</form>
</td>
<td class="result">
<div id="result_action" style="display:none">
<input type="button" value="Afficher la carte de l'itinéraire"
onclick="display_onmap();" />
<input type="button" value="Afficher l'itinéraire détaillé"
onclick="display_roadsheet();"/>
<input type="button" value="Afficher l'itinéraire résumé"
onclick="display_informations();">
</div>
<div id="yourmapdiv" class="map"></div>
<div id="youritiresumediv"
style="display:none; width:500px; border: 1px dotted #90EE90; position:relative; margin-top: 5px; overflow: auto;padding: 3px 3px 3px 3px; margin-top: 4px;"></div>
<div id="youritidiv"
style="display:none;width:600px; height:400px; border: 1px dashed Purple; position:relative; margin-top: 5px;overflow: auto;padding: 3px 3px 3px 3px; margin-top: 4px;"></div>
</td>
</tr>
</table>
</body>
</html>
Documentation associée
