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

Question

我有多个标记，目前当点击多个信息窗口时，另一个已经打开的信息窗口保持打开状态，使 map 变得困惑。如果我可以简单地重用一个信息窗口，移动它并更新它的内容，我会更喜欢它。这就是我在下面尝试做的事情:

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 并且似乎无法弄清楚这里出了什么问题。

请注意，我使用的是“Snazzy Info Window”插件，但我认为这同样适用于股票信息窗口。

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);
  });
});