谷歌地图apiv3，每个标记具有相同的点击功能

问题描述：

我似乎遇到了一个问题，我看到很多信息框的实现，但似乎无法弄清楚如何将另一段代码插入标记。我对JavaScript很没有经验，所以我似乎无法弄清楚。谷歌地图apiv3，每个标记具有相同的点击功能

当我去映射它显示了所有的标志物，但只有选择一段代码是最后的阵列中，

代码：

function updateMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: locationarray[0] 
    }); 
    var markernumber = new Array(); 
    for (var i = 0; i < 99; i++) { 
    markernumber[i] = new google.maps.Marker({ 
     position: locationarray[i], 
     map: map 
    }); 
    console.log('in loop:' + i); 
    google.maps.event.addListener(markernumber[i], 'click', function() { 
     console.log('in click:' + i); 
     openInNewTab(contentString[i]); 
    }); 
    } 
    document.getElementById('loader').style = "opacity: 0;"; 
}

contentstring [i]的工作正常，所以它没有这个功能。

'谷歌地图apiv3给每个标记相同的点击function' - 不，你正在做的...'i'内的事件处理程序将是100，每标记点击。想关闭 –

[Google Maps JS API v3 - 简单多标记示例]的可能重复（https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example） – geocodezip

答

尝试类似的东西：

var markernumber = new Array(); 
    for (var i = 0; i < 4; i++) { 
     markernumber[i] = new google.maps.Marker({ 
      position: position[i], 
      map: map 
     }); 
     console.log('in loop:' + i); 
     (function (i, content, marker) { 

      google.maps.event.addListener(marker, 'click', function (e) { 
       console.log('in click:' + i); 
       //console.log(e); 
      }); 

     })(i, contentString[i], markernumber[i]); 
    }

你已经得到了一个闭合的错误。这意味着当听者将被执行时，i值已经改变（进入for）并且它传递到99.

按顺序解释。当你打电话给i，或者你想要的变量时，系统会尝试用这个名字找到最后一个值。所以，如果值发生变化，结果将是变量的最后一次“更新”。

在这里，当你尝试读取i你曾经“更新” i在for所以最后值将是99

如果你想在你的听众阅读的i的价值，你必须创建一个IIFE并传入参数i,contentString和markernumber的实际值。

如果你想了解关于闭包的更多细节或者关于IIFE的here，请参考documentation（你必须在文档中找到一点，但是有一段文字，它是最好的，可以找到的）。

告诉我，如果你有一些问题

不好意思，我的先例文章包含错误，但现在通常没问题。 –

谷歌地图apiv3，每个标记具有相同的点击功能

相关推荐