forEach循环中覆盖的变量

Question

我给出的所有Google地图标记都是相同的infoText。 任何想法为什么infowindow.setContent('hi' + i)有效，但不是infowindow.setContent(infoText)？ 当使用infoText变量作为内容时，我的所有20个标记都获得相同的内容。 （停车场20号）

编辑：更新了代码，以一个工作的例子。

49  for (i = 0; i < locations.length; i++) { 
50  if (locations[i]['available'] === true) { 
51   icon = 'http://www.google.com/mapfiles/ms/micons/green.png'; 
52   text = 'Available Parking nr ' + i; 
53   generateInfoBox(text, icon) 
54  } else { 
55   icon = small_red_circle; 
56   text = 'Parking nr ' + i; 
57   generateInfoBox(text, icon) 
58  } 
59 
60  function generateInfoBox(text, icon) { 
61   marker = new google.maps.Marker({ 
62   position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']), 
63   map: map, 
64   icon: icon 
65   }); 
66 
67   google.maps.event.addListener(marker, 'click', (function(marker, i) { 
68   return function() { 
69    infowindow.setContent(text); 
70    infowindow.open(map, marker); 
71   } 
72   })(marker, i)); 
73  } 

Answer 1

infoText是全局的，当事件被执行时，它的最后一个值被改变了。另一方面，我在函数的上下文中是局部变量，所以它在任何时候都是不同的。

反正你切它，代码

for (i = 0; i < locations.length; i++) { 
     if (locations[i]['available'] === true) { 
       icon = 'http://www.google.com/mapfiles/ms/micons/green.png'; 
       infoText = 'Parking nr ' + i; 
      } else { 
       infoText = 'Parking nr ' + i; 
      } 

没有别的比信息文本设置为 '停车场NR 20'

以下是此一个普通的例子：

for (var i=0; i<20; i++) { 
    setTimeout(function() { console.log(i); },100); 
} 

将

输出20次'20'。

for (var i=0; i<20; i++) { 
    (function() { 
    var j=i; 
    setTimeout(function() { console.log(j); },100); 
    })(); 
} 

将输出为0〜19的Javascript仅具有功能的范围，这就是为什么每个j是不同的，但i是从上述范围的一个。

Answer 2

你需要infoText功能关闭以及和i：

google.maps.event.addListener(marker, 'click', (function(marker, i, infoText) { 
    console.log("infoText from withing addListener: ", infoText); 
    //^Works 
    return function() { 
    infowindow.setContent('hi ' + i+"<br>"+infoText); // This works. E.g 'hi1', 'hi2', etc 
    //infowindow.setContent(infoText); // Every infowindow gets 'Parking nr 20' if I use this. 
    infowindow.open(map, marker); 
    } 
})(marker, i, infoText)); 

proof of concept fiddle

代码片段：

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    drawMap(locations); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function drawMap(locations) { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: { 
 
     lat: 40.735657, 
 
     lng: -74.1723667 
 
    } 
 
    }); 
 

 
    var marker, i, icon, infoText; 
 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    if (locations[i]['available'] === true) { 
 
     icon = 'http://www.google.com/mapfiles/ms/micons/green.png'; 
 
     infoText = 'Available Parking nr ' + i; 
 
    } else { 
 
     icon = 'http://www.google.com/mapfiles/ms/micons/blue.png'; 
 
     infoText = 'Parking nr ' + i; 
 
    } 
 

 
    // Create a marker 
 
    console.log("Will use the infotext: ", infoText); 
 
    // ^^ Displays correct text 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']), 
 
     map: map, 
 
     icon: icon 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i, infoText) { 
 
     console.log("infoText from withing addListener: ", infoText); 
 
     //^Works 
 
     return function() { 
 
     infowindow.setContent('hi ' + i + "<br>" + infoText); // This works. E.g 'hi1', 'hi2', etc 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i, infoText)); 
 

 
    } 
 
} 
 
var locations = [{ 
 
    addr: "New York, NY, USA", 
 
    lat: 40.7127837, 
 
    lng: -74.0059413, 
 
    available: false 
 
}, { 
 
    addr: "Newark, NJ, USA", 
 
    lat: 40.735657, 
 
    lng: -74.1723667, 
 
    available: true 
 
}, ]

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>