Question

我创建了一个页面，该页面使用Google API计算两个地址之间的距离。当前，它通过执行用户单击“计算”按钮的calculateDistance()来工作。

但是，我试图让calculateDistance()函数在用户每次在输入中输入内容时执行。与此calcutalor类似。最好的方法是什么？

这是我尝试过的：

 // run anytime the value changes
$('input').keyup(function () { 
  calculateDistance();
});

但是出现以下错误：

未捕获的TypeError：无法读取未定义的属性“值”

（index.html？origin = Dubai +-++ United + Arab + Emirates＆destination = Delhi％2C + India：142）

我的代码：

<!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" id="cal" />
      </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="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_mile = distance.value / 1609.34; // the mile

          $("#in_mile").text(distance_in_mile.toFixed(2));

          $("#from").text(origin);
          $("#to").text(destination);
        }
      }
    }

    // print results on submit the form
    $("#distance_form").submit(function (e) {
      e.preventDefault();
      calculateDistance();
    });

    // run anytime the value changes
    $('input').keyup(function () { 
      calculateDistance();
    });
  });

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en"></script>
  </body>
</html>

实时Jquery距离计算

0 个答案: