JS Geocoder无法为Google Maps变量分配全局变量

时间:2015-11-18 02:08:39

标签: javascript google-maps google-geocoder

我有变量数组2维:

var locations = new Array(3);
for (var i = 0; i < 3; i++) {
    locations[i] = ['1', '2', '3'];
}

我有一个名为Place的数组

data = ["Terogong, Indonesia", "Blok M, Indonesia", "Cipinang, Indonesia"]

当我使用Geocoder搜索LatLang时,其填充位置[]的名称为Place,Lat和Lang:

for (var i = 0; i < data.length-1; i++) { 
    var c = data[i];
    geocoder.geocode( { 'address': data[i] + ", indonesia"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            //alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
            locations[i] = [c , results[0].geometry.location.lat(), results[0].geometry.location.lng()];
            alert(locations[i]);
        } else {
            alert("Something got wrong " + status);
        }
    });
}

然后,当我alert(locations[0])它的apear 1。

为什么会这样?

1 个答案:

答案 0 :(得分:0)

地理编码器是异步的。一种选择是使用函数闭包将请求中的变量与回调函数相关联:

for (var i = 0; i < data.length; i++) {
    geocoder.geocode({
        'address': data[i] + ", indonesia"
    }, (function(data, i) { return function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            locations[i] = [data, results[0].geometry.location.lat(), results[0].geometry.location.lng()];
            var mark = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: data
            });
            // alert(locations[i]);
        } else {
            alert("Something got wrong " + status);
        }
    }}(data[i], i))); // has function closure on data[i] as data, i (as i)
}

working fiddle

代码段

&#13;
&#13;
var geocoder = new google.maps.Geocoder();
var map;
var data = ["Terogong, Indonesia", "Blok M, Indonesia", "Cipinang, Indonesia"];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var locations = new Array(3);
  for (var i = 0; i < 3; i++) {
    locations[i] = ['1', '2', '3'];
  }
  for (var i = 0; i < data.length; i++) {
    geocoder.geocode({
      'address': data[i] + ", indonesia"
    }, (function(data, i) {
      return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
          locations[i] = [data, results[0].geometry.location.lat(), results[0].geometry.location.lng()];
          var mark = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: data
          });
        } else {
          alert("Something got wrong " + status);
        }
      }
    }(data[i], i)));
  }

}
google.maps.event.addDomListener(window, "load", initialize);
&#13;
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;