首页 文章

Google Map ：从地理编码的邮政编码中获取lat / lng

提问于
浏览 次
0

我正在使用来自对象的地址在 Map 上绘制多个点 . 程序循环遍历对象 geocodes 地址，并为每个位置绘制标记 .

我遇到的问题是当用户点击列表中的某个地点时， Map 将平移到该位置 . API具有接受 lat, lng 值的 panTo() 函数，但是地理编码函数中的结果（即 results[0].geometry.location ）在其外部不可用 .

Question

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

[lat / lng值以html data 属性输出]

单击处理程序

$('.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
javascript google-maps google-maps-api-3

1 回答

  • 0

    放手一搏 . 由于地理编码的异步性质，IIFE用于封装索引，因此您不会继续命中 locations 数组的最后一个索引 .

    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

  }
    回复于

相关问题