Google 地图 api 和地理编码 api - 添加标记的问题

Question

I will start by saying that I am relatively new to JS, so please forgive my ignorance if this is obvious.

I am trying to add markers to a google map. I have created an array coordList, then used the geocoding api to get the lag and long from the addresses and pushed them into coordList.

I am now trying to use the coordList array to plot markers on the map, however I cannot seem to get the values from the coordList array. When I run console.log(typeof coordList) - it tells me it's an object, but when i look at the array with console.log(coordList) it just looks like a normal array?

  var coordList = [];
  var address = [];

 address.push('52+Kalynda+pde,+bohle+plains,+QLD')
 address.push('51+Frank+St,+Kirwan+QLD+4817');

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(-19.259854,146.8001348),
      mapTypeId: 'roadmap'
    });


  }

   function getLatLong(address){
    var index;
    for (index = 0; index < address.length; ++index) {

    var request = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address[index] + '&key=[MY_key]';

    $.getJSON( request, function( data ) {

    var lat = data.results[0].geometry.location.lat;
    var lng = data.results[0].geometry.location.lng;

        var coords = [];
        coords.push(lat);
        coords.push(lng);
        //push coords into coordList
        coordList.push(coords);

  });
    }
  }


  // Loop through the results array and place a marker for each
  // set of coordinates.
  function addMarkers(coordList) {

    for (var i = 0; i < coordList.length; i++) {

      var coords = coordList[i];
      var latLng = new google.maps.LatLng(coords[0],coords[1]);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  }
  getLatLong(address);
  addMarkers(coordList);

Answer 1

Your problem is that $.getJSON() is an asynchronous request and your code executes addMarkers() before than $.getJSON() finishes, so coordList is empty.

You can add the markers inside $.getJSON() callback. For example:

var address = [];

address.push('52+Kalynda+pde,+bohle+plains,+QLD')
address.push('51+Frank+St,+Kirwan+QLD+4817');

function initMap() {
   map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(-19.259854,146.8001348),
      mapTypeId: 'roadmap'
   });
}

function getLatLongAndAddMarkers(address){
  var index;
  for (index = 0; index < address.length; ++index) {
     var request = 'https://maps.googleapis.com/maps/api/geocode/json?dress=' + address[index] + '&key=[MY_key]';
     $.getJSON( request, function( data ) {
        var latLong = new google.maps.LatLng(data.results[0].geometry.location);
        //add markers here
        var marker = new google.maps.Marker({
            position: latLong,
            map: map
         });
     });
  }
}

getLatLongAndAddMarkers(address);