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

Question

刚刚开始使用 google maps API。

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

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

我想为每个标记显示一个信息窗口，但我不知道什么是最好的方法。我还看到一个问题标志弹出，将点击事件分配给每个标记，因为我使用相同的变量来添加每个标记，我不确定如何将其点击事件添加到唯一标记（按名称，因为名称是两者都一样，因为它从不接收任何 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() 函数，只需在创建标记时传递的选项中指定地图属性即可。

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

Answer 2

创建全局信息窗口对象。 var infowindow = new google.maps.InfoWindow();

并为您的全局标记添加监听器。

google.maps.event.addListener(marker, "click", function (e) {
            infowindow.setContent("set marker specific content here");
            infowindow .open(map, this);
        });