Google Maps V3地理编码和循环中的标记

时间:2011-03-13 20:15:21

标签: javascript google-maps google-maps-api-3 closures geocoding

我的代码存在一些问题,我在sql数据库中有一个机场列表,我想为这些机场中的每一个创建标记。

对于我获得每个机场的ICAO代码的地址,国际民航组织对每个机场都是唯一的

我从数据库中获取数据作为数组

它被保存在带有分割功能的“temp”中,而for循环则将它们1 1逐行地保存

地理编码不是问题,但我不知道TITLE和点击事件的原因 它始终是使用的数组中的最后一个。

这是页面,数据库中的最后一个条目是ZBAA。

所有标记都放在正确的位置,但标题错了:s

http://mizar.lte.lu/~pr1011_meteo/projet/cartemonde4.php

我认为问题在于“地址”,但我不确定。

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

     var address=temp[i];

     geocoder.geocode({ 'address': address}, function(results){            
          var marker  = new google.maps.Marker({
              map: map, 
              position: results[0].geometry.location,
              title:address
          });

          google.maps.event.addListener(marker, 'click', function() {
               window.open ('infomonde.php?icao='+address+'&language=fr', 'Informations météo', config='height=400, width=850, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')});
     });  
};

2 个答案:

答案 0 :(得分:10)

以下是JSFiddle Demo使用“虚拟”地址并提醒您显示与每个标记关联的正确数据:

您拥有的是for循环中的典型闭包/范围问题。要解决此问题,请使用闭包来本地化temp[i]变量,然后再将其传递到地理编码和回调函数中:

    for (var i = 0; i < temp.length; ++i) {
        (function(address) {
            geocoder.geocode({
                'address': address
            }, function(results) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    title: address
                });

                google.maps.event.addListener(marker, 'click', function() {
                    //alert(address);  //use alert to debug address
                    window.open('infomonde.php?icao=' + address + '&language=fr', 'Informations météo', config = 'height=400, width=850, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')
                });
            });
        })(temp[i]);  //closure passing in temp[i] and use address within the closure
    }

答案 1 :(得分:0)

我的猜测是因为

geocoder.geocode({ 'address': address}, function(results){ ... });

回调在相同的上下文中执行。

尝试在相同的上下文中执行标记。下面的代码将等待获取的所有地理编码器。然后解析为标记。

var results = {};
var waiting = temp.length;

while(temp.length > 0){

  var fetching = temp.pop();

  geocoder.geocode(
    { address: fetching}, 
    function(response){
      results[fetching] = response[0].geometry.location;
      --waiting;
      if(waiting == 0) // wait for everything to finish
        setMarker();
    }
  );
}
var setMarker = function(){
  for(var element in results){
    var marker  = new google.maps.Marker({
              map: map, 
              position: results[element],
              title: element
              });

    google.maps.event.addListener(marker, 'click', function() {
    window.open ('infomonde.php?icao='+element+'&language=fr', '', 'configs')});
  }
}

ps window.open如果我没有弄错,有些浏览器会拒绝弹出标题(并且可能导致无法打开弹出窗口)。我总是留空。