[英]Javascript dynamic function creation Google Maps Markers object loop
Simply put, I am trying to dynamically create a marker and corresponding label for each property of in the loop. 简而言之,我正在尝试为循环中的每个属性动态创建一个标记和相应的标签。 The label will contain the time-stamp.
标签将包含时间戳记。
However, I am fairly stuck on figuring out how to get the on-click function to remain bound to it's respective marker. 但是,我相当想弄清楚如何使单击功能保持绑定到其各自的标记。 The infowindow variable as well.
以及infowindow变量。
I have tried using a counter and creating an array of variables to reference each function. 我尝试使用计数器并创建变量数组来引用每个函数。 I have also tried eval and creating new variables within the global window
我也尝试过eval并在全局窗口中创建新变量
window["foo" + counter]
unsuccessfully. 不成功。 With all variations of this that I have tried the code has broken or resulted in all triggers/infowindows being bound to the same property.
我尝试过的所有这些变化,代码都已损坏或导致所有触发器/信息窗口绑定到同一属性。
Any help or direction would be greatly appreciated. 任何帮助或指示将不胜感激。 I think I am just missing some depth on understanding variable/object scope.
我想我只是在理解变量/对象范围方面缺少一些深度。 This base code results in all markers appearing and the final label (since the previous ones are overwritten) as depicted below.
此基本代码导致出现所有标记,并显示最终标签(因为先前的标记被覆盖),如下所示。
prop = string representing long,lat coordinates
obj[prop] = An ISOformat timestamp
Rest of the code taken from marker Labels Google Maps API 其余代码取自Markers Labels Google Maps API
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
var templocs = prop.split(",").map(Number);
console.log(templocs[0]);
var temppos = new google.maps.LatLng(templocs[0], templocs[1]);
var mark = new google.maps.Marker({
position:temppos,
map: map,
animation:google.maps.Animation.BOUNCE,
});
var infowindow = new google.maps.InfoWindow({
content: "date taken: " + obj[prop],
maxWidth: 200
});
mark.addListener('click', function() {
infowindow.open(map, mark);
});
}
var cnt = 0;
var infowindow = [];
var mark = [];
var bounds = new google.maps.LatLngBounds();
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
var templocs = prop.split(",").map(Number);
console.log(templocs[0]);
var temppos = new google.maps.LatLng(templocs[0], templocs[1]);
infowindow[cnt] = new google.maps.InfoWindow({
content: "date taken: " + obj[prop],
maxWidth: 200
});
mark[cnt] = new google.maps.Marker({
position: temppos,
map: map,
animation:google.maps.Animation.BOUNCE,
});
/* mark[cnt].addListener('click', function() {
infowindow[cnt].open(map, mark);
}); */
google.maps.event.addListener(mark[cnt], 'click', (function(markerrr, cnt) {
return function() {
infowindow[cnt].open(map, mark[cnt]);
}
})(mark[cnt], cnt));
bounds.extend(mark[cnt].getPosition());
cnt++;
}
Fixed. 固定。 This post is a duplicate of this one
这个职位是一个重复这一
Issue had to do with closure. 问题与关闭有关。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.