Ожидание обратного вызова для запроса на обслуживание

Question

Я пытаюсь создать небольшое приложение с помощью Google Map API, и, поскольку это мое первое приложение на javascript (я уже знаю о языке, но почти не использую его), я борюсь с небольшой проблемой.

Я пытаюсь получить высоту, связанную с маркером, используя ElevationService, чтобы поместить две данные ({marker, elevation}) в массив. Однако строка, куда я помещаю данные в массив, попадает до вызова функции обратного вызова для getElevationForLocations, что приводит к отправке неопределенных данных (повышение).

Я думаю, что я должен использовать асинхронную функцию, чтобы дождаться выполнения обратного вызова, прежде чем данные будут переданы, но я не знаю, как его использовать.

Может ли кто-нибудь дать мне указания на это?

Большое спасибо, META

П.С .: Вот мой сценарий

    var markers = [];

    function initMap()
    {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {lat: -25.363882, lng: 131.044922 },
            mapTypeId: 'terrain'
        });

        var elevator = new google.maps.ElevationService;

        map.addListener('click', function(e) {
            addMarker(e.latLng, map, elevator);
        });
    }

    function getElevation(location, elevator) {
        var elevation;
        // Initiate the location request
        elevator.getElevationForLocations({
            'locations': [location]
        }, function(results, status)
        {
            if (status === 'OK') {
            // Retrieve the first result
                if (results[0]) {
                    return results[0].elevation;
                }
            }
        });
    }

    function placeMarkerAndPanTo(latLng, map) {
        var marker = new google.maps.Marker({
            position: latLng,
            map: map
        });
        map.panTo(latLng);
        return marker;
        //markers.push(marker);
    }

    function addMarker(location, map, elevator)
    {   var marker = placeMarkerAndPanTo(location, map);
        var elevation = getElevation(location, elevator);

        markers.push({marker, elevation});
    }

Answer 1

Вот упрощенная версия вашего кода, используя то, что я описал в своем комментарии.

var markers = [];
var elevator = new google.maps.ElevationService;
var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    },
    mapTypeId: 'terrain'
  });

  map.addListener('click', function(e) {
    addMarker(e.latLng);
  });
}

function addMarker(location) {

  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    if (status === 'OK') {

      // Retrieve the first result
      if (results[0]) {

        var marker = new google.maps.Marker({
          position: location,
          map: map
        });

        map.panTo(location);

        markers.push({
          marker: marker,
          elevation: results[0].elevation
        });

        console.log(markers);
      }
    }
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

#map {
  height: 200px;
}

<script src="//maps.googleapis.com/maps/api/js"></script>

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

Редактировать: Похоже, что в данный момент проблема с загрузкой API из сниппета (по крайней мере, для меня это сбой моего браузера), так что вот работающий JSFiddle а также.