为什么我的for循环不使用更新的全局变量?

时间:2018-05-01 10:05:59

标签: javascript google-maps for-loop google-maps-api-3

我正在编写一个在地图上放置标记的脚本。要将邮政编码解码为纬度和经度,我使用Geocoder功能。此函数更新全局变量。但我不能让循环使用更新的变量。我已经挣扎了一段时间,但无法弄清楚为什么for循环没有使用更新的变量。有人可以看看吗? Thx提前。

AndereKlant1 = {
    title: '<strong>Naam</strong><br>\
            Dienst',
    lat: 51.986847,
    long: 5.955350,
    adres: "1011AC",
    geocodeLat: "",
    geocodeLong: "",
};

/*
    AndereKlant2 = { 
        title: '<strong>Naam</strong><br>\
                    Dienst',
        lat: 51.986846,
        long: 5.955350,
        adres: "",
        geocodeLat: "" ,
        geocodeLong: "" ,
      };

*/
locations = [
    [AndereKlant1.title, AndereKlant1.geocodeLat, AndereKlant1.geocodeLong, 0],
    //     [AndereKlant2.title, AndereKlant2.lat, AndereKlant2.long, 0],  
];

function initMap() {

    geocoder = new google.maps.Geocoder();


    var iconAanvraag = {
        url: 'link to icon',
    };

    var iconDienstverlener = {
        url: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/32/map-marker-icon.png',
    };

    var iconBestaandeklanten = {
        url: 'http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/yellow-home-icon.png',
    };

    geocoder.geocode({
        'address': AndereKlant1.adres
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // no need to define it in outer function now
            AndereKlant1.geocodeLat = results[0].geometry.location.lat();
            AndereKlant1.geocodeLong = results[0].geometry.location.lng();
            /*
                    alert(AndereKlant1.geocodeLat);
                    alert(AndereKlant1.geocodeLong);
            */

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    var map = new google.maps.Map(document.getElementById('map'), {
        disableDefaultUI: true,
        zoomControl: true,
        scaleControl: false,
        rotateControl: true,
        fullscreenControl: true,
        gestureHandling: 'cooperative'

    });
    var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        polylineOptions: {
            strokeColor: "#036396",
            strokeOpacity: 0.6,
            strokeWeight: 6,
        },
        suppressMarkers: true,
    });
    var infowindow = new google.maps.InfoWindow({});
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        //    alert(locations[0][1]);
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: iconBestaandeklanten,
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

}

1 个答案:

答案 0 :(得分:1)

使用geocoder.geocode(...)访问地理编码服务是异步的。这意味着对服务的请求是在后台进行的,并且需要一些时间才能完成。当地理编码服务使用请求的结果进行响应时,将传递给function(results, status) {...}方法的回调函数(geocode)。

与此同时,在后台处理请求时,您的代码将继续运行,并且在地理编码服务使用更新的坐标进行响应之前,将执行for循环。

因此,如果您想使用地理编码请求中的数据更新标记的位置,则应将for循环置于您传递给geocoder.geocode方法的回调函数中。

示例:

geocoder.geocode({
    'address': AndereKlant1.adres
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      locations[0][1] = results[0].geometry.location.lat();
      locations[0][2] = results[0].geometry.location.lng();
      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: iconBestaandeklanten,
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

另请注意,更改值AndereKlant1.geocodeLatAndereKlant1.geocodeLong不会更新locations数组中的值。 locations数组包含AndereKlant1的值的副本。

参考:Google Docs