谷歌地图API信息窗口的多个标记 [英] google maps api multiple markers with info windows

问题描述

我试图在地图上绘制几个标记。完成。我为每个标记回收一个变量/对象。

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

我想为每个标记显示一个信息窗口，但是对最好的方法是什么它。我还看到一个麻烦的旗帜，弹出与每个标记分配点击事件，因为我使用相同的变量添加每个标记，我不知道如何将其单击事件添加到唯一标记（按名称，因为名称是）

  var marker_obj =新google.maps.Marker（{
位置：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，所以任何帮助都将非常值得赞赏。

解决方案

你在正确的路线上。就像你有一个标记对象一样，有一个infowindow对象。然后，infowindow的内容会根据您点击的标记而发生变化。有一点需要注意（如果你在循环中创建标记，这也会发生），是危险的是所有的infowindows都会以最后一个的内容结束。因此，让我们创建一个新的函数来更新内容。

另外，您不必在标记对象上调用setMap（）函数，可以在创建标记时传递的选项中指定map属性。

$ b

  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'）; 
  

然后一个新函数：

 函数bindInfoWindow（marker，map，infowindow，html）{
 marker.addListener（'click'，function（）{
 infowindow.setContent （html）; 
 infowindow.open（map，this）; 
}）; 
} 
  

just getting my teeth sunk into google maps API.

I am attempting to plot a couple of markers on a map. Done. I am however recycling a variable/object for each marker.

I initially create marker with options and add to map, then take the same marker variable, repurpose it, and add it to map again. This does produce two unique markers with individual title tags.

I want to display an info window for each marker, but am in doubt as to what is the best way to do it. I also see a trouble flag popping up with assigning click events to each marker, as I am using the same variable to add each marker, I am not sure how to add its click event to the unique markers (by name, as name is the same for both, as it never receives any 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);

For creating the info windows, I thought of using one variable/object to keep the info window in, and then repurposing it with new text in each marker click event.

Questions that I have are:

1: Should I use a seperate unique variable/object for each marker (overheads?), if not, how do I identify its click event.

2: Is it fine to repurpose (re-assign) the info window object with new text before its popped, or should I create a unique info window for each marker?

I am a bit of a Java n00b, so any help would greatly be appreciated.

解决方案

You're on the right lines. Have one infowindow object just as you have one marker object. Then the content of the infowindow changes depending on which marker you click. One thing to watch out for (this also happens if you're creating markers within a loop), is that the danger is that all the infowindows end up with the content of the last one. So let's create a new function that updates the content.

Also, as an aside, you don't have to call the setMap() function on your marker objects, you can just specify the map attribute in the options you pass when you create the markers.

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

Then a new function:

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

这篇关于谷歌地图API信息窗口的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！