Вопросы Теги

Невозможно прочитать свойство 'text' из undefined с помощью матрицы расстояний Google

Если я хорошо вас понял, вы жалуетесь на обновление, потому что вам нужны взгляды, чтобы сохранить свои состояния после перемещения между вкладками. Существует проблема с открытым вопросом по этому вопросу и есть способ обойти эту проблему, упомянутую в комментариях.

2
задан Connor 19 January 2019 в 22:40
поделиться

2 ответа

Вы звоните checkInputs после получения события focusout DOM на входах, что слишком рано. Его следует вызывать, когда API геолокации завершит синтаксический анализ значений в реальных адресах.

На самом деле, вы уже слушаете событие API place_changed, поэтому вызов checkInputs оттуда должен сделать эту работу: 

$(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);
      checkInputs();
    });
    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);
      checkInputs();
    });
  });
  // 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;

        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
  function executeCalculation(){
    calculateDistance();
  }
    // Get all input fields.
  var inputs = document.querySelectorAll('.form-control');

  function checkInputs() {
    var allFilled = true;

    // If any of the inputs is not filled, we won't show the alert.
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].value === '') {
        allFilled = false;
      }
    }

    // If all input fields have been filled.
    if (allFilled) {
      executeCalculation();
    }
  }
});
<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.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  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>
</head>

<body>

<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="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>

    
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuza67QeCTz8WQg9BJYGgMyiz0f8IT2M&libraries=places&language=en"></script>
</body>

</html>

0
ответ дан Jeto 19 January 2019 в 22:40
поделиться

Когда вызывается calculateDistance(), значение $("#destination") еще не установлено следующим фрагментом кода: 

    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);
    });

Один из способов исправить это будет:

  • Вызвать свою функцию checkInputs внутри функции обратного вызова кода «place_changed»
  • Проверить, заполнены ли значения $("#origin") и $("#destination") в функции checkInputs
    • [ 119] Удалите слушателей "focusout" внизу.
0
ответ дан Jelle 19 January 2019 в 22:40
поделиться
Другие вопросы по тегам:

Похожие вопросы: