将onclick监听器添加到Google Maps Marker JavaScript

Question

我写了这段代码：

<script type="text/javascript">
var address = JSON.parse('<?php echo $jsonLocations ?>');
console.log(address.locations[0]);
var latitude = '1';
var longitude = '1';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(latitude, longitude)
});
for(var i = 0; i < address.locations.length; i++){
new google.maps.Marker({
position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
map: map
}).addListener('click', function(){
new google.maps.InfoWindow({
content: '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5>' + i +'</h5>'+
'<div id="bodyContent">'+
'</div>'+
'</div>'
}).open(map, this);
})
}
}
</script>

我正在尝试在单击标记时显示i。所以对于第一个制造商，我应该是 0，对于第二个制造商，我应该是 1。但不知何故i总是相同的值

Answer 1

这是一个经典的闭包问题。 使用i变量的函数是异步回调。

正在发生的第一件事是，将创建所有标记。因此，i将在循环结束时address.locations.length。 异步回调现在引用此确切变量。

有一些可能的修复方法：

如果您能够使用 ES6 JavaScript 特性，请使用 let 语句：

for(let i = 0; i < address.locations.length; i++){
[...]
}

第二个是创建具有此确切绑定的闭包：

for(var i = 0; i < address.locations.length; i++){
(function(i){
[...]
})(i)
}

最后一个选项是使用Function.bind方法。

for(var i = 0; i < address.locations.length; i++){
new google.maps.Marker({
position: new google.maps.LatLng(address.locations[i]['lat'], address.locations[i]['long']),
map: map
}).addListener('click', (function(i){
new google.maps.InfoWindow({
content: '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5>' + i +'</h5>'+
'<div id="bodyContent">'+
'</div>'+
'</div>'
}).open(map, this);
}).bind(this,i))
}

我希望其中一种方法对您有用。

Answer 2

发生这种情况是因为点击事件发生在稍后的时间，然后i具有最后一个值...

要解决此问题，您可以在for循环中使用自调用匿名函数 - 这样您将为每个循环创建一个作用域，并且当它发生时，i的值将保留为click。

这称为闭包 - 您可以在此处和此处阅读有关闭包的更多信息

function initMap() {
var address = {
locations: [{
"lat": 30.53625,
"lng": -111.92674,
}, {
"lat": 33.53625,
"lng": -112.92674,
}, {
"lat": 32.53625,
"lng": -111.92674,
}, {
"lat": 33.53625,
"lng": -115.92674,
}]
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(32.53625, -111.92674)
});
var markers = [];
for (var i = 0; i < address.locations.length; i++) {
(function(index) { /* <--- Self invoking function */
var marker = new google.maps.Marker({
position: new google.maps.LatLng(address.locations[index]['lat'], address.locations[index]['lng']),
map: map
});
marker.addListener('click', function() {
new google.maps.InfoWindow({
content: '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h5>' + index + '</h5>' +
'<div id="bodyContent">' +
'</div>' +
'</div>'
}).open(map, this);
markers.push(marker);
});
})(i); /* <---- Pass the index to the closure to keep its value */
}
}

.as-console-wrapper{
display:none !important;
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>
<div id="map" style="width:500px;height:150px"></div>