Sujet Précédent Sujet Suivant

Emboiter des code

ophelie1512 - 29 sept. 2016 à 22:17
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 - 20 oct. 2016 à 14:20
Bonjour,
je ne sais pas si je suis sur le bon fofo mais je tente comme meme (n'hesiter pas à me rediriger ailleurs s'il le faut...

J'ai donc 3 scripts à emboiter...

Un qui calcul la distance kilometrique entre deux adresses grace à l'api google
Un autre qui permet l'autocomplete dans la recherche d'adresse.
Un autre qui permet de calculer un tarif en fonction de la distance et du nombre de personnes..


Il me faudrait un seul et meme script avec calcule distance entre deux adresses et inclure l'autocomplete google dans ce script et que mon script de calcul de tarif recupere la distance calculer par le premier script..

Pb n2, j'ai quelques petites modification à effectuer dans le premier script qui m'affiche en plus de la distance un carte avec itineraire détailler dont je n'ai pas besoin, mais quand je tente de les supprimer ( nulle en codage que je suis) mon script de départ ne fonctionne plus..

PB N3 lautocomplete ne fonctionne que pour un seul champ, je n'arrive pas a l'integrer dans mon 2e champs de recherche d'adresse.. !

Merci énormement à tous ceux qui pencherons sur mon cas !

24 réponses

  • 1
  • 2
Réponse 1 / 24
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
30 sept. 2016 à 12:32
Salut,

Sans code ca va pas être évident de t aider. Il faudrai au minimum que tu fournisses les prototypes des 3 différentes méthodes (nom de fonction, paramètres et valeur de retour).
Aussi, concernant le pb num3, il faudrai le code (html + js) que tu as implémenté pour qu on puisse corriger.

Pour ce qui est du num 2, si je comprends bien, tu fais un appel a google (probablement en ajax), donc le load en soit (sauf si c est paramétrable) existera toujours, par contre on pourra masquer l itineraire.

Bref, un peu de matière nous permettra de t aider ;)

naga
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
30 sept. 2016 à 13:35
Bonjour Naga,
Tu trouveras les discussions de la demoiselle sur CCM : http://www.commentcamarche.net/forum/s/u/ophelie1512
0
Réponse 2 / 24
ophelie1512
30 sept. 2016 à 12:41
oui voici les codes :


Code pour calcul distance :
<!DOCTYPE html>
<html>
    <title>Calculateur d'itinéraire</title>
    <meta name="KeyWords" content="itineraire,google,maps,plan de ville,carte,depart,arrivee,kilometrage,parcours,route,trajet,plan,deplacement,voyage,tourisme,adresse,ville,village,carte routiere,google maps,calcul d'itineraire,distance,chemin,geolocalisation,routier,autoroute,automobile,voiture,auto,acces,pays,region">
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META NAME="Generator" CONTENT="NotePad++">
    <META name="Copyright" content="Copyright VDC">
    <META NAME="Author" CONTENT="VDC">
    <META NAME="OWNER" CONTENT="VDC">
    <META name="Rating" content="general">
    <META name="revisit-after" content="15 days">
    <META name="robots" content="index, follow">
    <META name="Robots" content="All">
    <META http-equiv="Content-Language" content="fr">
    <style type="text/css">
      body { font-family: Arial, Verdana, sans serif; font-size: 11px; margin: 2px; }
      table.iti { background-color: #FFFFFF; font-size: 11px; margin: 4px; }
      table.directions th { background-color:#EEEEEE; font-size: 15px;}
      table.directions td { font-size: 11px;}
      img { color: #000000; }
      #map_canvas { width: 446px; height: 400px; border: 1px solid #333333 ; margin: 0px;}
      #directions { width: 246px; height: 400px; border: 1px solid #333333 ; margin: 2px; overflow: auto; width: auto; text-align: left; font-size: 9px; }
    </style>
    <style type="text/css" media="print">
      .print { display:none; }
      #directions { width: 600px; height: auto; border: 1px solid #333333; margin: 2px; text-align: left; font-size: 9px; }
    </style>
    <script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAFw0lDRKsdCra15LPvIxvehRjMgnVhZHmNh95BVtUkp0XgfXLlhSXfnSAP-eiQqfEOGaImc_V_dSQGQ" type="text/javascript"></script>
    <script type="text/javascript">
      var map;
      var gdir;
      var geocoder = null;
      var addressMarker;
      function initialize()
        {
        if (GBrowserIsCompatible())
          {     
          map = new GMap2(document.getElementById("map_canvas"));
          gdir = new GDirections(map, document.getElementById("directions"));
          GEvent.addListener(gdir, "load", onGDirectionsLoad); <!-- Charge la partie pour les distances -->
          GEvent.addListener(gdir, "error", handleErrors); <!-- Charge la partie pour les messages d erreurs -->
          map.setCenter(new GLatLng(46.98025, 3.66943), 6);
          map.addControl(new GMapTypeControl());
          map.addControl(new GLargeMapControl());
          map.addControl(new GOverviewMapControl());
          map.addControl(new GScaleControl());
          map.enableScrollWheelZoom();
                    }
        }
      function setDirections(fromAddress, toAddress, locale)
        {
        gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
        }
      function handleErrors()
        {
        if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
          alert("Aucune location géographique correspondante n'a pu être trouvée pour l'une des adresses spécifiées.\n Ce peut être du à  une adresse récente, ou incorrecte.\nN'oubliez pas d'ajouter dans l'adresse le pays (en anglais).\nError code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
          alert("La demande d'itinéraire n'a pu être calculée avec succès, aucune raison de l'échec n'est connu.\n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
          alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_BAD_KEY)
          alert("La clé (Key) n'est pas valide ou ne correspond pas au nom de domaine. \n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
          alert("La demande d'itinéraire n'a pu être correctement parsé.\n Error code: " + gdir.getStatus().code);
        else alert("Une erreur inconnue est survenue.");
        }
      function onGDirectionsLoad()
        {
        var reg=new RegExp(" ", "g");
        kilometrage = gdir.getDistance().html;
        document.getElementById("km").value = kilometrage.replace(reg,' ');
        }
    </script>
  </head>
  <BODY BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" onLoad="initialize();" onUnload="GUnload()">
    <form id="monFormulaire" method="post" action="#" onSubmit="setDirections(this.from.value, this.to.value, 'fr'); return false">
      <table width="696" border="0" class="iti">
        <tr valign="top">
          <td align="right" width="100"><strong>Départ :</strong></td><td align="left" width="476"><input type="text" id="fromAddress" name="from" size="70"></td>
          <td align="right" rowspan="3" width="120" valign="middle"><input name="gogogo" type="submit" value="Itinéraire" /></td>
        </tr>
        <tr><td align="right"><strong>Arrivée :</strong></td><td align="left"><input type="text" id="toAddress" name="to" size="70"></td></tr>
        <tr><td align="right"><strong>Kilométrage :</strong></td><td><input type="text" id="km" value="" size="9" disabled > Il est conseillé d'ajouter le pays (en anglais) dans l'adresse !</td></tr>
        <tr><td colspan="2">
          <center>
            <script type="text/javascript"><!--
            google_ad_client = "pub-6860157129998313";
            google_ad_width = 468;
            google_ad_height = 15;
            google_ad_format = "468x15_0ads_al_s";
            google_ad_channel = "";
            google_color_border = "336699";
            google_color_bg = "D8E9EC";
            google_color_link = "FFFF00";
            google_color_text = "0000FF";
            google_color_url = "CCCCCC";
            //--></script>
            <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br>
          </center>
        </td><td align="center"><A href="javascript:window.print()"><img src="http://icdn.pro/images/fr/i/m/imprimante-icone-9549-128.png" width="32" height="32" border="0" alt="Imprimer l'itinéraire" title="Imprimer l'itinéraire"></A>
        </td></tr>
      </table>
      <table width="700" border="0" class="directions" cellspacing="1" cellpadding="0">
        <tr><th width="246">Itinéraire détaillé</th><th width="446" class="print">Carte</th></tr>
        <tr><td><div id="directions"></td><td><div id="map_canvas" class="print"></div></td></tr>
      </table>
    </form>
  </BODY>
</html>



Code pour autocomplete: 
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8">
<style type="text/css">html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css" />
<style type="text/css">#locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
</style>
<div id="locationField"><input id="autocomplete" onfocus="geolocate()" placeholder="Adresse de depart" type="text" /></div>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>


code calcul tarif
<p>Distance de votre parcours :<input id="distance" name="distance" required="" type="Kilometre" /> Nombre de personnes:<input id="NbPassager" name="Nombre de personnes" required="" type="number" /></p>

<p> </p>

<p><input onclick="calculer();" type="button" value="Calculer" /></p>

<p> </p>

<p>Tarifs (en €)<input id="Tarifs" name="tarifs" required="" type="price" /></p>
<script type="text/javascript">
 function calculer(){
   
   var Distance = document.getElementById('distance').value;
   var Tarifs = document.getElementById('Tarifs');
   var nbPassager = parseInt(document.getElementById('NbPassager').value);
   //ici ton code de calcul...
   var X = parseFloat(Distance);
   var tarifKM;
   var prixPassager;
   console.log("Distance :"+Distance);
   console.log("X :"+X);
   console.log("NB Passagers :"+nbPassager);
   if(X>=1 && X<=4){
     tarifKM = 2*X;
     prixPassager=2*(nbPassager-1);
   }
   if(X>=5 && X<=29){
     tarifKM = 2*X;
     prixPassager=1*(nbPassager-1);
   }
   if(X>=30 && X<=44){
     if(nbPassager<3){
       tarifKM = 1.90*X;
       prixPassager=0;
     }else{
       tarifKM = 0;
       prixPassager = 20 + ((nbPassager -1) * 10);
     }
   }
   
   if(X>=45){
     if(nbPassager<3){
       tarifKM = 1.90*X;
       prixPassager=0;
     }else{
       tarifKM = 0;
       prixPassager = 30 + ((nbPassager -1) * 10);
     }
   }
 
  var resultat = tarifKM + prixPassager;
  Tarifs.value = resultat;
 }
</script>
0
Réponse 3 / 24
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
Modifié par nagaD.scar le 30/09/2016 à 15:09
Re.

Donc pour commencer, tu load des API google dans tous les cas mais pas les meme. Le soucis c'est que tu ne peux pas loader plusieurs car ils ont des définitions communes. Du coup il va falloir que tu cherche un peu sur quelle API complete tu peux travailler (et là ca ressemble à du code récupéré mais bon)
Sinon :
-> calcul des distance: j ai modifier ton code pour n avoir que ce qu'on veut soit le calcul d une distance: 


<!--DOCTYPE html-->
<html>
    <title>Calculateur d'itinéraire</title>
    <meta name="KeyWords" content="itineraire,google,maps,plan de ville,carte,depart,arrivee,kilometrage,parcours,route,trajet,plan,deplacement,voyage,tourisme,adresse,ville,village,carte routiere,google maps,calcul d'itineraire,distance,chemin,geolocalisation,routier,autoroute,automobile,voiture,auto,acces,pays,region">
    <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META NAME="Generator" CONTENT="NotePad++">
    <META name="Copyright" content="Copyright VDC">
    <META NAME="Author" CONTENT="VDC">
    <META NAME="OWNER" CONTENT="VDC">
    <META name="Rating" content="general">
    <META name="revisit-after" content="15 days">
    <META name="robots" content="index, follow">
    <META name="Robots" content="All">
    <META http-equiv="Content-Language" content="fr">
    <style type="text/css">
      body { font-family: Arial, Verdana, sans serif; font-size: 11px; margin: 2px; }
      table.iti { background-color: #FFFFFF; font-size: 11px; margin: 4px; }
      img { color: #000000; }
    </style>

    <script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAFw0lDRKsdCra15LPvIxvehRjMgnVhZHmNh95BVtUkp0XgfXLlhSXfnSAP-eiQqfEOGaImc_V_dSQGQ" type="text/javascript"></script>
    <script type="text/javascript">
      var gdir;
      function initialize()
        {
        if (GBrowserIsCompatible()){     
    gdir = new GDirections(null, null);
    GEvent.addListener(gdir, "load", onGDirectionsLoad); <!-- Charge la partie pour les distances -->
    GEvent.addListener(gdir, "error", handleErrors); <!-- Charge la partie pour les messages d erreurs -->
   }
        }
      function setDirections(fromAddress, toAddress, locale){
   gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
       }
      function handleErrors(){
        if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) alert("Aucune location géographique correspondante n'a pu être trouvée pour l'une des adresses spécifiées.\n Ce peut être du à  une adresse récente, ou incorrecte.\nN'oubliez pas d'ajouter dans l'adresse le pays (en anglais).\nError code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) alert("La demande d'itinéraire n'a pu être calculée avec succès, aucune raison de l'échec n'est connu.\n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_MISSING_QUERY) alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_BAD_KEY) alert("La clé (Key) n'est pas valide ou ne correspond pas au nom de domaine. \n Error code: " + gdir.getStatus().code);
        else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) alert("La demande d'itinéraire n'a pu être correctement parsé.\n Error code: " + gdir.getStatus().code);
        else alert("Une erreur inconnue est survenue.");
       }
      function onGDirectionsLoad() {
        var reg=new RegExp(" ", "g");
        kilometrage = gdir.getDistance().html;
        document.getElementById("km").value = kilometrage.replace(reg,' ');
        }
    </script>
  </head>
  <BODY BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" onLoad="initialize();" onUnload="GUnload()">
    <form id="monFormulaire" method="post" action="#" onSubmit="setDirections(this.from.value, this.to.value, 'fr'); return false">
      <table width="696" border="0" class="iti">
        <tr valign="top">
          <td align="right" width="100"><strong>Départ :</strong></td><td align="left" width="476"><input type="text" id="fromAddress" name="from" size="70"></td>
          <td align="right" rowspan="3" width="120" valign="middle"><input name="gogogo" type="submit" value="Itinéraire" /></td>
        </tr>
        <tr><td align="right"><strong>Arrivée :</strong></td><td align="left"><input type="text" id="toAddress" name="to" size="70"></td></tr>
        <tr><td align="right"><strong>Kilométrage :</strong></td><td><input type="text" id="km" value="" size="9" disabled > Il est conseillé d'ajouter le pays (en anglais) dans l'adresse !</td></tr>
        <tr><td colspan="2">
        </td><td align="center"><A href="javascript:window.print()"><img src="http://icdn.pro/images/fr/i/m/imprimante-icone-9549-128.png" width="32" height="32" border="0" alt="Imprimer l'itinéraire" title="Imprimer l'itinéraire"></A>
        </td></tr>
      </table>
    </form>
  </BODY>
</html>



->auto completion: avoir deux champs 


<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8">
<style type="text/css">html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css" />
<style type="text/css">#locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
</style>
<div id="locationField"><input id="autostart" onfocus="geolocate()" placeholder="Adresse de depart" type="text" /></div>
<div id="locationField"><input id="autoend" onfocus="geolocate()" placeholder="Adresse de fin" type="text" /></div>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autoend, autostart;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
  // When the user selects an address from the dropdown, populate the address fields in the form.
  autostart.addListener('place_changed', fillInAddress);
  autoend.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place
  if(document.activeElement.id== "autostart"){
 place = autostart.getPlace();
  } else {
 place = autoend.getPlace();
  }

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  // Get each component of the address from the place details and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// Bias the autocomplete object to the user's geographical location, as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
 var autocomplete;
   if(document.activeElement.id== ""){
  autocomplete = autostart.getPlace();
   } else {
  autocomplete = autoend.getPlace();
   }
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places&callback=initAutocomplete"        async defer></script>




le calcul du tarifs est sans appel externe du coup rien a checker.

Mais pour le rendre dynamique avec la recheche de distance, tu peux insérer dans la fonction "onGDirectionsLoad".

naga

PS: si j ai le temps je vais checker les api
0
Réponse 4 / 24
ophelie1512
30 sept. 2016 à 14:46
merci enormément !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 24
ophelie1512
30 sept. 2016 à 14:55
genial donc il faudrait que le script n1 ( dans recherche d'adresse) lautocomplete du script 2 soit effectif. c'est faisable ? merci beaucoup pour ton aide en tout cas..

Parcontre le calcul de km dans le script numero 1 ne fonctionne plus pour le coup...
0
Réponse 6 / 24
ophelie1512
30 sept. 2016 à 15:04
ah si autant pour moi en mettant une autre clé ça fonctionne !
0
Réponse 7 / 24
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
30 sept. 2016 à 15:11
J avais oublié de copier un id (pour autocompletion):

avant: 
document.activeElement.id== ""

a changer par: 
document.activeElement.id== "autostart"



Bon sinon les deux api sont différents, je suis en train de checker quoi prendre pour faire ce que tu veux. si je trouve quelque chose d acceptable je te redirai.

naga
0
Réponse 8 / 24
ophelie1512
30 sept. 2016 à 15:14
merci beaucoup tu es très aimable !! si tu savais depuis combien de temps je plenche la dessus tu rigolerais lol..
au final je voudrais un seul et meme script avec recherche dadresse (avec autocomplete) calcule de km repri pour calcul de tarif ca c'est l'idéal..! au mieux j'ai deux codes api google car deux comptes differents ca peut aider ? mercii
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
30 sept. 2016 à 15:48
Alors dans le principe c est assez simple, par contre les deux API ne fonctionnent pas entre elles du coup faut chercher du coté des apis en premier lieu pour faire les deux (et vu que j ai jamais utilisé les API google et que je suis pas dev web, je mets un peu de temps ^^)
0
ophelie1512
30 sept. 2016 à 16:32
je saisie.. et si j'utilise deux clés différentes ça peut peut être fonctionné ( j'émet toutes hypothèses..)
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
30 sept. 2016 à 16:39
nan je ne pense pas le load du js à des déclaration indépendantes de la clef (et à double déclaration, ca plantera a tous les coup).

Bon je t ai fais un exemple en simplifiant le tout au maximum: 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places,geometry&callback=initPage"
        async defer></script>


<div id="locationField"><input id="autostart" placeholder="Adresse de depart" type="text" /></div>
<div id="locationField"><input id="autoend" placeholder="Adresse de fin" type="text" /></div>
<a onClick="getDistance()" href="#" rel="nofollow noopener noreferrer" target="_blank"> test </a>




<script>
var autoend, autostart;
function initPage() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
}
function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var kiloM = (google.maps.geometry.spherical.computeDistanceBetween(FROM, TO)) / 1000);
  alert(kiloM);
}
</script>


Donc tu as les deux field départ et arrivé en auto completion, et quant tu cliquera sur "test" on appel get distance. Je récupère l objet de localisation (latitude/longitude) et j'appel la methode google pour récupérer la distance (par contre ca doit être à vol d oiseau).

En modifiant légèrement tu pourra appliquer la multiplication par ton tarif (tu as déja l essentiel à copier coller).

Ensuite en faisant une petite recherche sur les API de maps concernant le calcul des distance par la route , tu devais trouver ton bonheur ;) [je vais jeter un oeil mais j'ai que 10 minutes devant moi donc ne t'attends pas à avoir une réponse]

naga
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
30 sept. 2016 à 17:00
ok trouvé. Remplace la méthode getDistance par : 


function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var request = {
    origin:FROM,
    destination:TO ,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var meterDistance = result.routes[0].legs[0].distance.value;
	  alert(meterDistance);
//-----ici meterDistance est la distance en metre qui sépart les deux lieux par la route


    }
  });
  
}


Bon dev

naga
0
ophelie1512
30 sept. 2016 à 17:08
je test et je te dis
0
Réponse 9 / 24
ophelie1512
30 sept. 2016 à 17:11
ce script la ne fonctionne pas ... 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places,geometry&callback=initPage"
        async defer></script>


<div id="locationField"><input id="autostart" placeholder="Adresse de depart" type="text" /></div>
<div id="locationField"><input id="autoend" placeholder="Adresse de fin" type="text" /></div>
<a onClick="getDistance()" href="#" rel="nofollow noopener noreferrer" target="_blank"> test </a>




<script>
var autoend, autostart;
function initPage() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
}
function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var request = {
    origin:FROM,
    destination:TO ,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      var meterDistance = result.routes[0].legs[0].distance.value;
	  alert(meterDistance);
//-----ici meterDistance est la distance en metre qui sépart les deux lieux par la route


    }
  });
  
}
}
</script>


Je me suis trompée quelque part ??
0
Réponse 10 / 24
lo
30 sept. 2016 à 22:25
Je reprend, en faite ca marche PARFAITEMENT bien, sauf que ca m'ouvre une boîte de dialogue suppl avec la distance à parcourir,
je pense que cest du a ca : 
<a onClick="getDistance()" href="#" rel="nofollow noopener noreferrer" target="_blank"> test </a>


Moi je voudrais limite un calcul auto ou au pire un truc comme au debut ou l'on cliquait sur initeraire et hop le km s'affichait dans un champs suppl..

j'ai essayé <input type="text" id="km" value="" size="9" disabled > comme dans le script de départ mais forcément ca ne marche pas lol
0
Réponse 11 / 24
lo
30 sept. 2016 à 23:32
donc désormais mon dernier problème à résoudre est que lorsque le clic sur ton lien "test", le nombre de Km s'affiche dans un champs type input, et que ce fameux champs je le recupère pour mon calcul de tarif, ainsi mon problème sera résolu.. !
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
1 oct. 2016 à 09:37
Ah mais en fait tu ne développé pas xD en fait dans mon code je te montre comment récupérer la valeur en metre, pour que tu le reprenne et implémenté la partie de calcul du tarif.
Je vois pour te faire une implémentation dans la journée.
0
Réponse 12 / 24
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
1 oct. 2016 à 12:02 


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places,geometry&callback=initPage"
        async defer></script>


<input id="autostart" placeholder="Adresse de depart" type="text" /><br />
<input id="autoend" placeholder="Adresse de fin" type="text" /><br />
Tarifs: <input type="price" id="tar" /><br />
Passagers: <input type="text" id="pass" /><br />
<input onclick="getDistance();" type="button" value="Calculer" />
<br /><br />

Kilometres: <input type="text" id="kilom" /><br />
Prix: <input type="price" id="prix" /><br />



<script>
var autoend, autostart;
function initPage() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
}
function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var request = {
    origin:FROM,
    destination:TO ,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
		var meterDistance = result.routes[0].legs[0].distance.value;
		
		var tarif = parseInt(document.getElementById('tar').value);
		var nbPassager = parseInt(document.getElementById('pass').value);		
		var Distance = parseInt(meterDistance/1000);
		
		
	   var X = parseFloat(Distance);
	   var tarifKM;
	   var prixPassager;
	   if(X>=1 && X<=4){
		 tarifKM = 2*X;
		 prixPassager=2*(nbPassager-1);
	   }
	   if(X>=5 && X<=29){
		 tarifKM = 2*X;
		 prixPassager=1*(nbPassager-1);
	   }
	   if(X>=30 && X<=44){
		 if(nbPassager<3){
		   tarifKM = 1.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0;
		   prixPassager = 20 + ((nbPassager -1) * 10);
		 }
	   }
	   
	   if(X>=45){
		 if(nbPassager<3){
		   tarifKM = 1.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0;
		   prixPassager = 30 + ((nbPassager -1) * 10);
		 }
	   }
	 
		var resultat = tarifKM + prixPassager;
		document.getElementById('prix').value = resultat;
		document.getElementById('kilom').value = Distance;

    }
  });
  
}
</script>



bon week
0
Réponse 13 / 24
lo
1 oct. 2016 à 13:21
parfait ! ca coince juste car j'au un input prix et un input tarif.. le prix calcul bien le prix mais tarif rien ne s'affiche et il n'est pas necessaire mais je ne peut pas le suppr car tu a repri le id=tar pour le calcul un peu plus bas
0
Réponse 14 / 24
lo
1 oct. 2016 à 13:31
ET VOILAAAAA MERCI MERCI MERCI MERCI LOOOOL 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places,geometry&callback=initPage"
        async defer></script>


<input id="autostart" placeholder="Adresse de depart" type="text" /><br />
<input id="autoend" placeholder="Adresse de fin" type="text" /><br />

Passagers: <input type="text" id="pass" /><br />
<input onclick="getDistance();" type="button" value="Calculer" />
<br /><br />

Kilometres: <input type="text" id="kilom" /><br />
Prix: <input type="price" id="prix" /><br />



<script>
var autoend, autostart;
function initPage() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
}
function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var request = {
    origin:FROM,
    destination:TO ,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
		var meterDistance = result.routes[0].legs[0].distance.value;
		
		var prix = parseInt(document.getElementById('prix').value);
		var nbPassager = parseInt(document.getElementById('pass').value);		
		var Distance = parseInt(meterDistance/1000);
		
		
	   var X = parseFloat(Distance);
	   var tarifKM;
	   var prixPassager;
	   if(X>=1 && X<=4){
		 tarifKM = 2*X;
		 prixPassager=2*(nbPassager-1);
	   }
	   if(X>=5 && X<=29){
		 tarifKM = 2*X;
		 prixPassager=1*(nbPassager-1);
	   }
	   if(X>=30 && X<=44){
		 if(nbPassager<3){
		   tarifKM = 1.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0;
		   prixPassager = 20 + ((nbPassager -1) * 10);
		 }
	   }
	   
	   if(X>=45){
		 if(nbPassager<3){
		   tarifKM = 1.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0;
		   prixPassager = 30 + ((nbPassager -1) * 10);
		 }
	   }
	 
		var resultat = tarifKM + prixPassager;
		document.getElementById('prix').value = resultat;
		document.getElementById('kilom').value = Distance;

    }
  });
  
}
</script>
0
Réponse 15 / 24
lo
1 oct. 2016 à 15:11
j'ai une autre question !! a la place du tarif global dans le else pour nombre de personne >3, il faudrait que je place un texte a la place du tarif global.. en gros meme si la personne rentre X personnes dès l'instant quelle dit quils sont 3 ou + pour ma fourchette de km, la var resultat dit : 20 euros par personne plus 1 euros par personne suppl.. Etant nulle en codage j'ai essayé dans mon else dans prix passagers de mettre "texte" mais biensur ca ne fontionne pas, je vais essayer de faire un else dans var result on verra..
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
1 oct. 2016 à 18:03
vois deja ce que tu arrives a faire et reviens ici pour qu on t aides dans ton dev ;)
0
Ophelie1512
1 oct. 2016 à 18:12
J'ai essayer tout ce que je touche rend mon script inactif.. c'est enervant. Il faut que quand le clien T au un km>30 et 3 personne et + C au n'affiche pas le tarif global dans le champs mais un texte expliquant le tarif de groupe..
0
Ophelie1512
1 oct. 2016 à 21:23
Je bloque .. il faudrait simplement que le champs résultat pour 3 personnes et plus pour 29 km à 44 affiche "20 euros pas personne et 10 euros par passagers supl" et 3 personnes et plus pour 45 km et + "30 euros l'ai 1e personnes et 10 euros par passagers supl" c'est faisable ? Merci pour vos lumières ... vous êtes génial...
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
3 oct. 2016 à 08:48
Salut,

Je vois pour faire quelque chose dans la journée et je te redis.
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
Modifié par nagaD.scar le 3/10/2016 à 09:47 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5IBUOyREvxhx2QnPtL0mMBGV9ahRT9-E&signed_in=true&libraries=places,geometry&callback=initPage"
        async defer></script>


<input id="autostart" placeholder="Adresse de depart" type="text" /><br />
<input id="autoend" placeholder="Adresse de fin" type="text" /><br />

Passagers: <input type="text" id="pass" /><br />
<input onclick="getDistance();" type="button" value="Calculer" />
<br /><br />

Kilometres: <input type="text" id="kilom" /><br />

<DIV id='ResTar' >


</DIV>

<script>
var autoend, autostart;
function initPage() {
  autostart = new google.maps.places.Autocomplete((document.getElementById('autostart')),{types: ['geocode']});
  autoend = new google.maps.places.Autocomplete((document.getElementById('autoend')),{types: ['geocode']});
}
function getDistance(){

  var a = autostart.getPlace();
  var FROM = a.geometry.location;

  a = autoend.getPlace();
  var TO = a.geometry.location;
  
  var request = {
    origin:FROM,
    destination:TO ,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
  var meterDistance = result.routes[0].legs[0].distance.value;
  
  var nbPassager = parseInt(document.getElementById('pass').value);  
  var Distance = parseInt(meterDistance/1000);
  
  
    var X = parseFloat(Distance);
    var tarifKM;
    var prixPassager;
    if(X>=1 && X<=4){
   tarifKM = 2*X;
   prixPassager=2*(nbPassager-1);
    }
    if(X>=5 && X<=29){
   tarifKM = 2*X;
   prixPassager=1*(nbPassager-1);
    }
    if(X>=30 && X<=44){
   if(nbPassager<3){
     tarifKM = 1.90*X;
     prixPassager=0;
   }else{
     tarifKM = 0;
     prixPassager = 20 + ((nbPassager -1) * 10);
   }
    }
    
    if(X>=45){
   if(nbPassager<3){
     tarifKM = 1.90*X;
     prixPassager=0;
   }else{
     tarifKM = 1.90*X;
     prixPassager = 30 + ((nbPassager -1) * 10);
   }
    }
  var resultat = tarifKM + prixPassager;
  var contentResHTML = 'Prix total: <input type="price" id="prix" value="'+prixPassager+'" /><br />'
  if( nbPassager > 1 ) { 
   contentResHTML += 'Tarif Kilometrique: <input type="price" id="KiloTar" value="'+tarifKM+'" /><br />'
   contentResHTML += 'Supplement pour ' + nbPassager + ' passagers : <input type="price" id="tarSupp" value="'+prixPassager+'" /><br />'
  
  }
  document.getElementById('ResTar').innerHTML = contentResHTML;
  document.getElementById('kilom').value = Distance;

    }
  });
  
}
</script>


Et je ne sais pas ce que tu fais, mais mettre un tarif a 0 si plus de 45km et plus de 3 passagers tu risque d être perdante .. j ai changé 

    if(X>=45){
   if(nbPassager<3){
     tarifKM = 1.90*X;
     prixPassager=0;
   }else{
     tarifKM = 0; // JE CHANGE CA
     prixPassager = 30 + ((nbPassager -1) * 10);
   }
    }

par 

    if(X>=45){
   if(nbPassager<3){
     tarifKM = 1.90*X;
     prixPassager=0;
   }else{
     tarifKM = 1.90*X;
     prixPassager = 30 + ((nbPassager -1) * 10);
   }
    }


++
naga

ps: me vouvoie pas, ca me perturbe x)
0
Réponse 16 / 24
ophelie1512
3 oct. 2016 à 13:58
Enfaite il me faut ca 
	var resultat = tarifKM + prixPassager + 1;
		var contentResHTML = 'Prix total: <input type="price" id="prix" value="'+resultat+'" /><br />'
		if( nbPassager > 2 && X>=30 && X<=44) { 
	     	contentResHTML += 'DONT: <input type="price" id="KiloTar" value="20 euros pour le premier passager" /><br />'
			contentResHTML += 'ET: <input type="price" id="tarSupp" value=" 10 euros / passagers supplémentaire" /><br />'


et pouvoir mettre ca 
	var resultat = tarifKM + prixPassager + 1;
		var contentResHTML = 'Prix total: <input type="price" id="prix" value="'+resultat+'" /><br />'
		if( nbPassager > 2 && X>45) { 
	     	contentResHTML += 'DONT: <input type="price" id="KiloTar" value="20 euros pour le premier passager" /><br />'
			contentResHTML += 'ET: <input type="price" id="tarSupp" value=" 20 euros / passagers supplémentaire" /><br />'


quand je met les deux forcement ca ne marche pas... lol

en gros ca affiche le prix global mais ca explique le prix degressif par passagers.. limite une petite phrase en dessous du input resultat qui explique les tarifs pour x>29 && x<45 && Nb passagers >2 et une autre phrase explicative pour x>55 && n>2
0
Réponse 17 / 24
ophelie1512
3 oct. 2016 à 13:59
et les bons tarifs sont 
 if(X>=1 && X<=4){
		 tarifKM = X;
		 prixPassager=2*(nbPassager-1);
	   }
	   if(X>=5 && X<=29){
		 tarifKM = X;
		 prixPassager=1*(nbPassager-1);
	   }
	   if(X>=30 && X<=44){
		 if(nbPassager<3){
		   tarifKM = 0.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0.90*X;
		   prixPassager = 20 + ((nbPassager -1) * 10);
		 }
	   }
	   
	   if(X>=45){
		 if(nbPassager<3){
		   tarifKM = 0.90*X;
		   prixPassager=0;
		 }else{
		   tarifKM = 0.90*X;
		   prixPassager = 30 + ((nbPassager -1) * 10);
		 }
	   }
		var resultat = tarifKM + prixPassager + 1;
0
Réponse 18 / 24
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
3 oct. 2016 à 14:57
Le code que je t'ai donné va afficher un seul champ de tarif s'il n y a qu un passager, trois champs: le total + tarif kilométrique + tarifs additionnel pour tous les passagers.

Donc si tu souhaites ajouter une information, comme le descriptif/passager supp, il faut que tu stocks l'information pour l afficher.

On va donc la déclarer en même temps que X par exemple: 

	
	   var X = parseFloat(Distance);
	   var descripAdditionnal= '';    //--Ici
	   var tarifKM;
	   var prixPassager;



puis renseigner au niveau de l assignation du prix passager. Par exemple : 


	   if(X>=5 && X<=29){
		 tarifKM = X;
		 prixPassager=1*(nbPassager-1);
                 descripAdditionnal = "1e supplémentaire par passagers"
	   }




et lors de l assignation du contenu html que l on insérera notre info : 


		if( nbPassager > 1 ) { 
			contentResHTML += 'Tarif Kilometrique: <input type="price" id="KiloTar" value="'+tarifKM+'" /><br />'
			contentResHTML += 'Supplement pour ' + nbPassager + ' passagers : <input type="price" id="tarSupp" value="'+prixPassager+'" /><br />'
			contentResHTML += '<p>'+descripAdditionnal+"</p>";
		
		}


Mais tout ca c'est simplement pour t aider à faire ce que tu veux, mais bien sûr ca dépendra de l utilisation dont tu as besoin. En de même les champs / id / etc que j ai écrit ne correspondront très probablement pas au besoin (imbrication, etc.)
Là oú je veux en venir, c'est que si tu ne comprends pas tout ce que j ai fais, il vaut mieux que tu commences par acquérir de bonnes notions en algo puis en développement web (au moins javascript et css), dans le cas contraire tu ne vas jamais vraiment avancer.

Mais qui t as demandé de faire ca? car clairement ce n est pas ton domaine, et normalement sur ce site on va aider à débloquer des situations sur des erreurs de codes, de problèmes lors de développement, mais on n'écris pas des solutions complètes (ca c'est mon taff et on me paye pour le faire =p).

Bref tout ca pour dire que je comprends ce que tu veux, mais je ne vais pas tout faire car ca ne t apprendrai rien et tu te retrouvera bloqué très vite pour la suite.

Par contre si tu fais quelque chose qui te semble logique mais qui ne te donnes pas le résultat obtenu, tu peux revenir ici en expliquant ce que tu as fais (un peux de code avec), le résultat que tu souhaite et le résultat obtenu. Et dans ce cas je (ou d autres helper) t aidera à débloquer la situation.

naga
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
4 oct. 2016 à 08:42
javascript et html, pas css ...
0
Réponse 19 / 24
ophelie1512
3 oct. 2016 à 21:45
c'est un site pour un ami vtc au debut javais cru lire sur un fofo quil suffisait d'ecrire des formules sur excel et inserer le tableau dans une page et le travail etait fini.. je me suis appercu que le calcul d'un tarif etait bien plus complexe et sans ton aide jy serais jamais parvenue.. il aurait probablement du faire appel à un webdesigner.. en tout cas tu as enrichis mes connaissances je t'admire lol, loin sont mes cours d'algo mathematiques pour les sciences et programmation de ma L1 MPI lol. merci beaucoup en tout cas.. je vais mettre tous ces scripts au clair et reviens te faire un petit recap de ce que j'ai reussi a bidouillé avec tout ce que tu m'as expliqué :)
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
4 oct. 2016 à 08:41
Pas de soucis ca m a occupé x) Si t a un problème dans du code hésites pas a demander.

naga
0
Réponse 20 / 24
ophelie1512
Modifié par @karamel le 20/10/2016 à 13:56
bip biiiip me revoilaaa lol

j'ai changé la donne parce que l'on ne s'en sortait pas avec les tarif, désormais, on place un prix en fonction du véhicule et de la distance, seulement en changeant le tout, le tarif est = X * 3 avec ce code 
var directionsService = new google.maps.DirectionsService();
  
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
  var meterDistance = result.routes[0].legs[0].distance.value;
  
  var prix = parseInt(document.getElementById('prix').value);
  var type = parseInt(document.getElementById('type').value);  
  var Distance = parseInt(meterDistance/1000);
     var X = parseFloat(Distance);
      var tarifKM;
               if(type='eco'){
             tarifKM = X*2;
               }
            if(type='berline'){
             tarifKM = X*2,5;
            }
            if(type='vanne'){
                  tarifKM = X*3;
            }
  
  

 
  document.getElementById('prix').value = tarifKM;
  document.getElementById('kilom').value = Distance;

    }


pourtant j'ai bien ecri qu'en fonction du type de vehicule, il y a 3 tarif applicables. quelqu'un pour m'aiguiller ?
0
nagaD.scar Messages postés 4272 Date d'inscription samedi 8 septembre 2007 Statut Membre Dernière intervention 4 janvier 2023 17
Modifié par nagaD.scar le 19/10/2016 à 16:08
Salut, les test en javascript sont "==" et non un simple "=" qui lui est une assignation.

Change donc tes if en fonction.

naga
0

Discussions similaires

Générateur de codes de recharge
cs_kdidier -
ucfoutu -

6 réponses
[D7] Impression code-barres sur une imprimante d'étiquettes
cs_nitrique -
cs_nitrique -

15 réponses
Algorithme de vérification RIB (24 chiffres / maroc)
aedc -
ucfoutu -

5 réponses
Code barre datamatrix
cs_yves29 -
Whismeril -

21 réponses
Les flèches en ASCII
mage_des_enfers -
magic_Nono -

25 réponses
Rejoignez-nous