在 Google Maps API v3 中只打开一个 InfoWindow

IT技术 javascript google-maps google-maps-api-3
2021-03-03 10:12:10

我只需要在我的 Google 地图上打开一个 InfoWindow。在打开一个新的 InfoWindows 之前,我需要关闭所有其他 InfoWindows。

有人可以告诉我如何做到这一点吗?

6个回答

您只需要创建一个InfoWindow对象,保留对它的引用,并为所有标记重用 if。引自 Google Maps API Docs

如果您只想一次显示一个信息窗口(就像 Google 地图上的行为一样),您只需要创建一个信息窗口,您可以根据地图事件(例如用户点击)将其重新分配到不同的位置或标记。

因此,您可能InfoWindow只想在初始化地图后立即创建对象,然后click按如下方式处理标记事件处理程序。假设您有一个名为 的标记someMarker

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

然后,InfoWindow当您单击新标记时,它应该会自动关闭,而无需调用该close()方法。

我也这样做,但是信息窗口需要 +1 秒才能在下一个标记上打开是否正常?有时它根本不打开。我使用完全相同的代码
2021-05-11 10:12:10
丹尼尔,好主意!!在此之前,我试图手动同步,但它显示了奇怪的 javascript 错误(例如 main.js 中的“c 为空”,或类似 (123 out of range 43))。
2021-05-15 10:12:10

在范围之外创建您的信息窗口,以便您可以共享它。

这是一个简单的例子:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}
我也这样做,但是信息窗口需要 +1 秒才能在下一个标记上打开是否正常?有时它根本不打开。我使用完全相同的代码
2021-04-20 10:12:10
谢谢你。使用“this”解决了我的大部分问题。我仍然不明白如何在 setContent 中使用自定义内容。例如,在我的标记循环中,我使用“i”变量创建了一个 contentHtml 变量并将其链接到数据库对象。如何将该 contentHtml 变量传递给侦听器?
2021-04-22 10:12:10
在我的情况下,窗口仅在我在 infowindow.open(map, this) 中使用“this”时打开;而不是“标记”。感谢分享您的解决方案。
2021-04-28 10:12:10

我有同样的问题,但最好的答案并没有完全解决它,我在 for 语句中必须做的是使用与我当前标记相关的 this 。也许这对某人有帮助。

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}
你传递 contentString 的方式对我很有用,谢谢。
2021-04-17 10:12:10

有点晚了,但我设法通过将 infowindow 设为全局变量只打开了一个信息窗口。

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

然后在监听器里面

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);
对我很有用:)
2021-05-07 10:12:10

声明一个全局变量var selectedInfoWindow;并使用它来保存打开的信息窗口:

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

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});