谷歌地图API多个标记与信息窗口

Question

谷歌地图API多个标记与信息窗口

5

我刚开始接触谷歌地图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 新手，所以任何帮助都将不胜感激。

- Louis van Tonder

2个回答

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

- Ramesh Kotha

嗨，我在我的地图对象声明下方添加了var infowindow = new google.maps.infowindow();，但出现错误，提示infowindow不是构造函数。 - Louis van Tonder

这是因为Javascript是区分大小写的，应该是InfoWindow而不是infowindow。 - duncan

谢谢，伙计。第一个示例已经可以运行了，我会测试你的代码并感谢你的帮助。 - Louis van Tonder

好的，这个选项也可以用...谢谢。那么这两个哪一个更好/更有效呢？ - Louis van Tonder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- duncan · Accepted Answer

你已经朝着正确的方向努力了。只要像标记对象一样拥有一个信息窗口对象即可。然后，根据点击的标记不同，信息窗口的内容会发生变化。需要注意的是（如果您是在循环内创建标记），危险是所有信息窗口最终都具有相同的内容。因此，让我们创建一个新函数来更新内容。

另外，顺便提一下，您不必在标记对象上调用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);
    });
}