谷歌地图为每个标记和信息窗口添加多个标记和信息窗口?

Question

>我的代码是这样的：

function algolia_search(position) {
clearOverlays();
var APPLICATION_ID = 'PSH...VAKL';
var SEARCH_ONLY_API_KEY = '2eb...efa8';
var INDEX_NAME = 'entities';
var PARAMS = { hitsPerPage: 150 };
// Client + Helper initialization
var algolia = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
var algoliaHelper = algoliasearchHelper(algolia, INDEX_NAME, PARAMS);
// Map initialization
algoliaHelper.on('result', function(content) {
renderHits(content);
var i;
// Add the markers to the map
for (i = 0; i < content.hits.length; ++i) {
var hit = content.hits[i];
var infowindow = new google.maps.InfoWindow({
      content: hit.name
    });
var marker = new google.maps.Marker({
position: {lat: hit._geoloc.lat, lng: hit._geoloc.lng},
map: map,
label: hit.name,
animation: google.maps.Animation.DROP,
index: i
});
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
addListenerOnPoint(marker);
markers.push(marker);
infos.push(infowindow);
}
});
function renderHits(content) {
$('#container').html(JSON.stringify(content, null, 2));
}
algoliaHelper.setQueryParameter('aroundRadius', 200);
algoliaHelper.search();
}

现在标记工作绝对正常，但是信息窗口不能。无论我单击哪个标记，它都会从一个标记向我显示一个信息窗口，但是我不完全知道如何解决它。

Answer 1

问题解释

信息窗口显示来自一个标记的数据，因为当您单击它们时，它们会调用：

infowindow.open(map, marker);

在单击它们时，您认为infowindow、map和marker的值分别是什么？

您的假设是，它们将保存您在for 循环运行时设置的值。

正在发生的事情是，当您单击标记时，for 循环已经完全完成运行。infowindow和marker的值将恰好设置为 for 循环的最后一个值。

---

建议的解决方案

解决方案是找到一种方法来封装循环的每个迭代的数据，这些数据将在调用侦听器时保留。

执行此操作的两种方法是使用 ES6 块作用域let而不是var或使用 n IIFE(立即调用的函数表达式(来封装循环每个步骤的infowindow和marker的状态。

使用let：

for(i = 0; i < content.hits.length; ++i) {
// rest of code above --^
let infowindow = new google.maps.InfoWindow({content: hit.name});
let marker = new google.maps.Marker({...});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
// rest of code below --v
}

以上有效是因为有效发生的是一个新的 为每个infowindow创建变量，并为marker变量每次迭代，几乎就像为每个迭代创建一个新的可调用名称(marker0、marker1等(

---

使用 IIFE：

for(i = 0; i < content.hits.length; ++i) {
// rest of code above --^
var infowindow = new google.maps.InfoWindow({content: hit.name});
var marker = new google.maps.Marker({...});
function(inf, mar){
marker.addListener('click', function() {
inf.open(map, mar);
})(infowindow, marker);
}
// rest of code below --v    
}