0

我目前正在使用对象的地址在地图上绘制多个点。程序遍历对象、geocodes地址，并为每个位置绘制一个标记。

我遇到的问题是，当用户单击列表中的某个位置时，地图将平移到该位置。API 有一个panTo()接受lat, lng值的函数，但结果，即results[0].geometry.location来自 geocode 函数的结果在它之外不可用。

问题

我如何以某种方式lat, lng从结果中检索，也许将它们附加到现有数据对象，并在函数之外使用它们，以便我能够在panTo()函数中使用它们？

[在 htmldata属性中输出 lat/lng 值]

点击处理程序

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

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

数据

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

代码

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
4

1 回答 1

0

试一试。locationsIIFE 用于包含索引，因此由于地理编码的异步性质，您不会一直点击数组的最后一个索引。

  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

  }
于 2013-09-27T16:59:13.147 回答