如何根据用户输入来计算多个地点的旅程的燃油价格

时间：2019-01-02 18:51:02

标签： javascript api google-distancematrix-api

我正在尝试创建一个codepen来计算从点A到点B和点C的距离。为了便于讨论，也可以说燃料/汽油的价格为每英里1英镑。我试图将所有点之间的总距离相加（基于用户输入），然后将其乘以燃油价格，并显示给用户。

我正在尝试使用Google Distance Matrix API来实现这一目标。

我显然拿出了我的API密钥，因为您需要为此付费，但是它可以工作。

documentation很不错，但是它的位置是硬编码的，我不确定如何纠正代码，以便获取结果并将其乘以燃油价格。

我正试图使它像这样：

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 :(得分：0)

您的代码有很多问题。对于初学者，您不能像这样进行document.write。浏览器不是控制台。

此语法不正确：

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

应为：

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

这将导致STRING，而不是数字，因此您无法对其进行数学运算。如果值为“ AAA”怎么办？而不是“ 30”之类的东西，您需要验证输入，将其转换为数字，然后进行数学计算。

要想让它正常工作，您还有路要走。

答案 1 :(得分：0)

这不是全部，而是大部分：

<!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>

相关问题
最新问题