在Google Maps API中未定义Javascript数组元素

Javascript array element undefined in Google Maps API

本文关键字：未定义 Javascript 数组元素 API Google Maps      更新时间：2023-09-26

我正在尝试向地图添加3个标记，当单击标记时，将显示一个信息窗口。但是CCD_ 1中的每个数组元素都变得未定义。

怎么了？

<div id="map-canvas2" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
 var num;
 var marker;
 var infoWindow;
 var infoText;
 var lat;
 var lng;
 var map;
 function initialize() {
   num = 3;
   marker = [];
   infoWindow = [];
   infoText = [];
   lat = [];
   lng = [];
   infoText[0] = "test1";
   lat[0] = 22.420845;
   lng[0] = 114.208705; 
   infoText[1] = "test2";
   lat[1] = 22.416026;
   lng[1] = 114.209321; 
   infoText[2] = "test3";
   lat[2] = 22.420841;
   lng[2] = 114.205188; 
   for (var i = 0; i < num; i++) {
     marker[i]=new google.maps.Marker({
       position:new google.maps.LatLng(lat[i], lng[i]),
     });
     infoWindow[i] = new google.maps.InfoWindow({
       content:"<div>"+infoText[i]+"</div>"
     });
   }
   var mapOptions = {
     zoom: 17,
     center: new google.maps.LatLng(22.420458,114.207482)
   };
   map = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions);
   for (var i = 0; i < num; i++) {
     marker[i].setMap(map);   
     google.maps.event.addListener(marker[i], 'click', function() {
       new google.maps.InfoWindow({
     content:"<div>"+infoText[i]+"</div>"
       }).open(map,marker[i]);
     });
   }
 }
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

问题：每个事件侦听器都引用相同的变量i，该变量在for循环的每次传递中都会递增。因此，循环结束后，i的值为3，但没有一个数组的索引为3，因此得到undefined。因为每个事件处理程序都引用相同的i变量，所以它们都引用了相同的未定义数组值。

解决方案：创建一个闭包，以便每个标记的事件处理程序都有自己的变量，而不是共享对单个变量的引用。

for (var i = 0; i < num; i++) {
    marker[i].setMap(map);   
    google.maps.event.addListener(marker[i], 'click', (function(index) {
        return function() {
            new google.maps.InfoWindow({
                content: "<div>"+infoText[index]+"</div>"
            }).open(map, marker[index]);
        }
    })(i));
}

我们正在做的是创建一个立即调用函数表达式"IIFE"。IIFE具有一个名为index的参数，该参数被设置为i的值。因为变量具有函数作用域，所以索引只属于此函数。在IIFE中，我们返回一个函数，该函数将在事件被触发时执行实际工作，但它将引用google.maps.event.addListener0而不是i。

不要向匿名函数发送索引参数：

for (var i = 0; i < num; i++) {
 var mrk = marker[i];
 var iwContent = infoText[i];
 mrk.setMap(map);   
 google.maps.event.addListener(mrk, 'click', function() {
   new google.maps.InfoWindow({
 content:"<div>"+iwContent+"</div>"
   }).open(map,mrk);
 });
}
相关文章：