google-maps - 谷歌地图 api 带有信息窗口的多个标记

Question

只是让我的 dentry 陷入谷歌地图API。

我正在尝试在 map 上绘制几个标记。完毕。但是，我正在为每个标记回收一个变量/对象。

我最初使用选项创建标记并添加到 map ，然后采用相同的标记变量，重新调整它的用途，然后再次将其添加到 map 。这确实会产生两个带有单独标题标签的独特标记。

我想为每个标记显示一个信息窗口，但我不知道什么是最好的方法。我还看到一个问题标志弹出，将点击事件分配给每个标记，因为我使用相同的变量来添加每个标记，我不确定如何将其点击事件添加到唯一标记(按名称，因为名称是两者都一样，因为它从来没有收到任何 id？)

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
});

marker_obj.setMap(map);

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
});

marker_obj.setMap(map);

为了创建信息窗口，我考虑使用一个变量/对象来保留信息窗口，然后在每个标记单击事件中使用新文本重新调整它的用途。

我的问题是:

1:我应该为每个标记(开销？)使用单独的唯一变量/对象，如果不是，我如何识别它的点击事件。

2:在弹出之前用新文本重新调整(重新分配)信息窗口对象是否可以，或者我应该为每个标记创建一个唯一的信息窗口？

我有点Java n00b，所以任何帮助将不胜感激。

Answer 1

你在正确的路线上。拥有一个 infowindow 对象，就像拥有一个标记对象一样。然后信息窗口的内容会根据您单击的标记而变化。需要注意的一件事(如果您在循环中创建标记也会发生这种情况)，危险在于所有信息窗口都以最后一个的内容结束。所以让我们创建一个更新内容的新函数。

另外，顺便说一句，您不必在标记对象上调用 setMap() 函数，只需在创建标记时传递的选项中指定 map 属性即可。

var infowindow = new google.maps.InfoWindow({
    content: ''
});

var marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 1",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 1');

marker_obj = new google.maps.Marker({
    position: myLatlng,
    title:"This is Marker 2",
    map: map
});

bindInfoWindow(marker_obj, map, infowindow, 'Marker 2');

然后是一个新功能:

function bindInfoWindow(marker, map, infowindow, html) {
    marker.addListener('click', function() {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
}