Google Maps：从经过地理编码的邮政编码中获取经纬度

Question

I am currently plotting multiple points on a map, using addresses from an object. The program loops over the object, geocodes the address, and plots a marker for each location.

The problem I am having is when a user clicks on a place in a list, the map is to pan to that location. The API has a panTo() function that accepts lat, lng values, but the results, ie results[0].geometry.location , from the geocode function are not available outside of it.

Question

How do I somehow retrieve the lat, lng from the results, maybe append them to the existing data object, and use them outside the function, so I am able to use them in the panTo() function?

[The lat/lng values are output in html data attributes]

Click handler

$('.place').on('click', function() {
    $this = $(this);
    lat = $this.data('lat');
    lng = $this.data('lng');

    map.panTo(new google.maps.LatLng(lat, lng));
});

Data

var locations = [
    {   
      id: 'place1',
      postcode: 'B1 1AA'
    },
    {   
     id: 'place2',
      postcode: 'CB9 8PU'
    }
];

Code

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

  geocoder.geocode({'address': locations[i].postcode}, function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {

          marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: map
          });

      } else {
          console.log('Geocode was not successful ' + status);
      }

  }); // end geocode


    $(places).append(
        '<li class="place" data-id="'+locations[i].id+'"  data-lat="<!--lat to go here-->" data-lng="<!--lng to go here-->">'+
            '<div class="place-wrap">'+
                '<h2>'+locations[i].name+'</h2>'+
                '<p class="territory">'+locations[i].territory+'<p>'+
            '</div>'+
        '</li>'
    );

} // end for

Answer 1

Give this a go. The IIFE is there to enclose the index so you don't keep hitting the last index of the locations array due to the asynchronous nature of geocode.

  for (i = 0, l = locations.length; i < l; i++) {

    (function(i) { // index passed in as parameter

      geocoder.geocode({ address: locations[i].postcode }, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

          marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
          });

          $('#places').append(
            '<li class="place" data-id="' + locations[i].id + '"  data-lat="' + results[0].geometry.location.lat() + '" data-lng="' + results[0].geometry.location.lng() + '">' +
            '<div class="place-wrap">' +
            '<h2>' + locations[i].name + '</h2>' +
            '<p class="territory">' + locations[i].territory + '<p>'+
            '</div>' +
            '</li>'
          );

        } else {
            console.log('Geocode was not successful ' + status);
        }

      });

    }(i)); // index passed in to IIFE

  }