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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5292060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 16:39:56  来源:igfitidea点击:

Google Maps V3 geocoding and markers in loop

javascriptgoogle-mapsgoogle-maps-api-3closuresgeocoding

提问by user657848

I have some problems with my code, I have a list of airports in a sql database, and I want to create markers for each 1 of those airports.

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

For the address i got ICAO-codes for each airport, an ICAO is unique for each airport

对于我获得每个机场的 ICAO 代码的地址,每个机场的 ICAO 都是唯一的

I get the data from the Database as array

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

it's is saved in "temp" with an split function and with the for-loop it get them 1 by 1

它使用 split 函数保存在“temp”中,并且使用 for 循环将它们 1 个 1

Geocoding is not the problem, but I don't know why for the TITLE and the on click event it is always the last one from the array which is used.

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

here is the page, the last entry in the database is ZBAA.

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

And all the markers are placed at the correct location but the title is wrong :s

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

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

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

The problem is with "address" i think but i m not sure.

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

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')});
     });  
};

回答by u476945

Here is a JSFiddle Demousing "dummy" addresses and alert to show the correct data associate with each marker:

这是一个JSFiddle 演示,使用“虚拟”地址和警报来显示与每个标记关联的正确数据:

What you have is a typical closure/scope issue within the for loop. To fix the issue use closure to localize the temp[i]variable before passing into geocode and callback function within it:

您所拥有的是 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
    }

回答by Bonshington

my guess is because

我的猜测是因为

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

callback is execute in same context.

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

try execute marker in same context. the code below is will wait for all geocoder fetched. then parse to marker.

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

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 if i'm not mistaken, some browser reject popup title(and might cause unable to open popup). i alway leave blank.

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