Итерация Поиска API Карт Google - сначала выполняется поиск 'i', а затем перезванивается 'i'

Question

Я пытаюсь получить массив координат, выполнить поиск рядом (https://developers.google.com/maps/documentation/javascript/places) для каждого элемента в массиве, а затем добавить каждый набор результатов в отдельный массив результатов (placesOfInterest).

Вместо того, чтобы делать: Search -> Put results to array -> Search -> Push results to array, кажется, что он делает Search -> Search -> Search -> Push results to array -> Push results to array, но я не могу понять, почему.

Первоначально я пытался перенести результаты поиска в массив placeOfInterest, но затем изменился на асинхронную версию, потому что я думал, что обратный вызов не срабатывает из-за некоторой задержки. Я создал функцию superPush, основанную на 'appendOutput (item), который я нашел в этом руководстве https://codeburst.io/asynchronous-code-inside-an-array-loop-c5d704006c99но это все еще не решило проблему.

HTML

...
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<APIKEY>k&libraries=places"></script>
...

JS

var points = [[2.627365,49.215369],[2.760591, 49.647163],[2.952975, 50.057504],[3.344742, 50.280862],[3.768293, 50.451306],[4.21659, 50.534029]]

   for (point of points) {
      googlePlaces(point);
    }



function googlePlaces(point) {
  var latLng = new google.maps.LatLng(point[1],point[0])
  var request = {
    location: latLng,
    radius: '10000'
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);  // hits this code [i] times first...
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {

//results.forEach(result => placesOfInterest.push(result)) // originally tried this way

    results.forEach(result => superPush(result)) // ...then hits this code [i] times


   }
}

function superPush(result) {

  fetchData(result).then(function() {
    placesOfInterest.push(result);
  })
}

Что я могу сделать? Нет способа не вызвать обратный вызов,но я не могу придумать, как обойти это.

Answer 1

Одним из вариантов является использование функции закрытия для предоставления доступа к индексу массива, в котором необходимо сохранить результаты:

function googlePlaces(point, index) { // function closure on index
  var latLng = new google.maps.LatLng(point[1], point[0])
  var request = {
    location: latLng,
    radius: '10000'
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      resultsArray[index] = results;
    }
  })
}

, вызывая его следующим образом:

var i = 0;
for (point of points) {
  googlePlaces(point, i);
  i++;
}

подтверждение концепции скрипта

фрагмент кода:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

var map;
var service;
var infowindow;
var resultsArray = [];
var bounds;

function initMap() {
  bounds = new google.maps.LatLngBounds();
  infowindow = new google.maps.InfoWindow();
  map = new google.maps.Map(
    document.getElementById('map'));

  var points = [
    [2.627365, 49.215369],
    [2.760591, 49.647163],
    [2.952975, 50.057504],
    [3.344742, 50.280862],
    [3.768293, 50.451306],
    [4.21659, 50.534029]
  ]
  var i = 0;
  for (point of points) {
    googlePlaces(point, i);
    i++;
  }
}


function googlePlaces(point, index) {
  var latLng = new google.maps.LatLng(point[1], point[0])
  var request = {
    location: latLng,
    radius: '10000'
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {

      resultsArray[index] = results; // ...then hits this code [i] times

      for (var i = 0; i < results.length; i++) {
        var marker = createMarker(results[i], "search " + index);
        bounds.extend(marker.getPosition());
      }
      map.fitBounds(bounds);
    }
  })
}

function createMarker(place, text) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(text + "<br>" + place.name);
    infowindow.open(map, this);
  });
  return marker;
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>