Как рассчитать стоимость топлива для поездки в нескольких местах на основе ввода пользователя - PullRequest
Новая
       10

Как рассчитать стоимость топлива для поездки в нескольких местах на основе ввода пользователя

0 голосов
/ 02 января 2019

Я пытаюсь создать codepen , который вычисляет расстояние от точки A до точки B и C. Также, скажем ради аргумента, топливо / газ стоит £ 1 за милю.Я пытаюсь сложить общее расстояние между всеми точками (на основе пользовательского ввода), а затем умножить его на цену топлива и показать его пользователю.

Я пытаюсь использовать Google DistanceМатричный API для достижения этой цели.

Я, очевидно, вынул свой ключ API, так как за него нужно платить, но он работает.

Документация великолепна, но места жестко запрограммированы, и я не уверен, как исправить код, чтобы он брал результат и умножал его на цену топлива.

Я пытаюсь сделать что-то вроде этого: 

const locationA = document.getElementById = "locationA".value;
const locationB = document.getElementById = "locationB".value;
const locationC = document.getElementById = "locationC".value;

let totalDistance = locationA + locationB + locationC
let fuel price = 1

let totalPrice = fuelPrice * totalDistance 

document.write(totalPrice)
body{
  text-align: center;
}

p {
  color: #969696;
  font-style: italic;
  margin: 20px 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>Document</title>
</head>
<body>
  <h3>Fuel Price Est.</h3>
  <label>Location A</label>
  <br>
  <input type="text" placeholder="Street address, P.O. Box, Company Name..." id="locationA">
  <br>
  <label>Location B</label>
  <br>
  <input type="text" placeholder="Street address, P.O. Box, Company Name..." id="locationB">
    <br>
  <label>Location C</label>
  <br>
  <input type="text" placeholder="Street address, P.O. Box, Company Name..." id="locationC">
  <p>(Est based on £1 per mile basis)</p>
  
  <div id="result">
    
  </div>
      </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Это еще не все, но это большая часть: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
      integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
      integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
      crossorigin="anonymous"
    ></script>

    <title>Document</title>
  </head>
  <body>
<div class="container">
  <div class="row">
    <div class="jumbotron">
      <h1>Calculate the Distance Between two Addresses demo</h1>
    </div>

    <div class="col-md-6">
      <form id="distance_form">
        <div class="form-group"><label>Origin: </label> <input class="form-control" id="from_places" placeholder="Enter a location" />
          <input id="origin" name="origin" required="" type="hidden" /></div>

        <div class="form-group"><label>Destination: </label> <input class="form-control" id="to_places" placeholder="Enter a location" />
          <input id="destination" name="destination" required="" type="hidden" /></div>
        <input class="btn btn-primary" type="submit" value="Calculate" />
      </form>

      <div id="result">
        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between align-items-center" id="in_mile">Distance In Mile :</li>
          <li class="list-group-item d-flex justify-content-between align-items-center" id="in_kilo">Distance is Kilo:</li>
          <li class="list-group-item d-flex justify-content-between align-items-center" id="duration_text">IN TEXT:</li>
          <li class="list-group-item d-flex justify-content-between align-items-center" id="duration_value">IN MINUTES:</li>
          <li class="list-group-item d-flex justify-content-between align-items-center" id="from">FROM:</li>
          <li class="list-group-item d-flex justify-content-between align-items-center" id="to">TO:</li>
        </ul>
      </div>
    </div>
  </div>
</div>
    <script>
  $(function () {
    // add input listeners
    google.maps.event.addDomListener(window, "load", function () {
      var from_places = new google.maps.places.Autocomplete(
        document.getElementById("from_places")
      );
      var to_places = new google.maps.places.Autocomplete(
        document.getElementById("to_places")
      );

      google.maps.event.addListener(from_places, "place_changed", function () {
        var from_place = from_places.getPlace();
        var from_address = from_place.formatted_address;
        $("#origin").val(from_address);
      });

      google.maps.event.addListener(to_places, "place_changed", function () {
        var to_place = to_places.getPlace();
        var to_address = to_place.formatted_address;
        $("#destination").val(to_address);
      });
    });
    // calculate distance
    function calculateDistance() {
      var origin = $("#origin").val();
      var destination = $("#destination").val();
      var service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix(
        {
          origins: [origin],
          destinations: [destination],
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
          // unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
          avoidHighways: false,
          avoidTolls: false
        },
        callback
      );
    }
    // get distance results
    function callback(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
        $("#result").html(err);
      } else {
        var origin = response.originAddresses[0];
        var destination = response.destinationAddresses[0];
        if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
          $("#result").html(
            "Better get on a plane. There are no roads between " +
            origin +
            " and " +
            destination
          );
        } else {
          var distance = response.rows[0].elements[0].distance;
          var duration = response.rows[0].elements[0].duration;
          console.log(response.rows[0].elements[0].distance);
          var distance_in_kilo = distance.value / 1000; // the kilom
          var distance_in_mile = distance.value / 1609.34; // the mile
          var duration_text = duration.text;
          var duration_value = duration.value;
          $("#in_mile").text(distance_in_mile.toFixed(2));
          $("#in_kilo").text(distance_in_kilo.toFixed(2));
          $("#duration_text").text(duration_text);
          $("#duration_value").text(duration_value);
          $("#from").text(origin);
          $("#to").text(destination);
        }
      }
    }
    // print results on submit the form
    $("#distance_form").submit(function (e) {
      e.preventDefault();
      calculateDistance();
    });
  });

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&libraries=places&language=en"></script>
  </body>
</html>
0 голосов
/ 02 января 2019

Есть много проблем с вашим кодом. Для начала, вы не можете сделать document.write, как это. Браузер не консоль.

Синтаксис этого неверен: 

const locationA = document.getElementById = "locationA".value;

должно быть: 

const locationA = document.getElementById("locationA").value;

Это приведет к STRING, а не к числу, так что вы не можете делать с ним математику. Что если значение равно "AAA"? а не что-то вроде «30». Вам нужно проверить ввод, преобразовать его в число, а затем выполнить математику.

У вас есть способы пойти, прежде чем вы сможете заставить это работать.

...