JavaScript async help - Google Maps JavaScript API для расчета направлений

Question

Я довольно новичок в JavaScript, поэтому вот краткое изложение моей проблемы для контекста. Пользователь вводит два местоположения, originInput и destinationInput. Затем Places API получает Latlng для местоположений, который работает, как и ожидалось. Моя проблема возникает при попытке использовать эти результаты для расчета направлений между ними. Насколько я могу судить, проблема в том, что функция calcRoute выполняет перед тем, как объекты Places возвращаются из API Places, что требует времени. Я не знаю, как обойти это, предполагая, что это проблема.

До сих пор я пытался добавить значение, возвращаемое API Places, в массив, а затем использовать его в качестве параметра для API-указаний.

HTML:

<input type="text" id="originInput"></input>
<input type="text" id="destinationInput"></input>
<button onclick="initMap()"></button> 

<div id="map"></div>

Соответствующий JS:

// function takes user input and gets back a place object from the API
function getPlaces() {
  var originInput = document.getElementById("originInput");
  var destinationInput = document.getElementById("destinationInput");
  var requests = {
    request1: {
      query: originInput.value,
      fields: ['name', 'geometry']
    },
    request2: {
      query: destinationInput.value,
      fields: ['name', 'geometry']
    }
  };
  placeService.findPlaceFromQuery(requests.request1, callback);
  placeService.findPlaceFromQuery(requests.request2, callback);
  // Calls calcRoute function to display the route between points
  calcRoute(resultsLatlng[0], resultsLatlng[1]);
}

// callback function for findPlaceFromQuery
function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    resultsLatlng.push(results[0].geometry.location);
    console.log(resultsLatlng)
    }
  }

  // Function to access the directionsService API and display the route
function calcRoute(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  }
  directionsService.route(request, function(results, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result)
      console.log(result)
    }
  })
  console.log(resultsLatlng)
}

См. https://jsfiddle.net/adam1lake/qjcou20h/ для кода. Просто вставьте свой ключ API в тег script в нижней части HTML-кода, и он должен работать.

Если вы запустите код на jsfiddle, возникнет ошибка, так как API направлений не получает объект Latlng в качестве параметров для начального и конечного местоположения. Пожалуйста, не стесняйтесь исправлять любой другой мой код на этом jsfiddle:)

Answer 1

Проблема здесь связана с обратными вызовами, асинхронным кодом и знанием того, когда будут возвращены данные. Вы правы, когда говорите, что calcRoute выполняется до возврата объекта Places. Есть несколько замечательных ресурсов для понимания асинхронного JavaScript для чтения и исследования.

Один из способов исправить это - обновить функцию обратного вызова, чтобы проверить, сколько элементов существуетв вашем resultsLatlng массиве. Если он имеет два элемента (начальное местоположение и конечное местоположение), рассчитайте маршрут по результатам.

// callback function for findPlaceFromQuery
function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    resultsLatlng.push(results[0].geometry.location);
    if (resultsLatlng.length == 2) { // New code
      calcRoute(resultsLatlng[0], resultsLatlng[1]);
    }
  }
}