谷歌地图 - 重复使用单个信息窗口作为多个标记

Question

我有多个标记，目前当单击多个信息窗口时，另一个已经打开的infoWindows保持打开状态，使地图混乱。如果我能简单地重用一个信息窗口，移动它并更新它的内容，我会更喜欢它。这是我在下面尝试做的事情：

var info = new SnazzyInfoWindow ();
/*
* Loop through each item in the 'features' array, including info windows, and display the marker
*/
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infoContent = feature.contentImage + feature.content;
marker.addListener('click', function() {
infoCallback(infoContent, marker);
});
});
function infoCallback(infoContent, marker) {
return function() {
info.close();
info.setContent(infoContent)
info.open(map, marker);
};
};

但是，我Cannot read property 'placement' of undefined收到错误，似乎无法弄清楚这里出了什么问题。

请注意，我使用的是"时髦的信息窗口"插件，但我认为这同样适用于股票信息窗口。

Answer 1

是的。 在 onClick 函数中，当执行 marker.addListener('click' 时，您没有功能/标记。变量不是执行 foreach 时的样子。

我主要使用的一个技巧是制作标记对象的数组。 在 onClick 中搜索数组内的"this"标记。

像这样：

var markers = [];  // store the markers in this array
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
markers.push(marker);
marker.addListener('click', function() {
// first find out which marker was clicked on
var index = markers.indexOf(this);  // this represents the marker that was clicked on
// index should be the same index as the index for features.
var feature = features[index];
var marker = markers[index];
var infoContent = feature.contentImage + feature.content;
// now we can call infoCallback.
infoCallback(infoContent, marker);
});
});