在 Google Maps API v3 中打开第二个 InfoWindow答案

【问题标题】：Opening a second InfoWindow in Google Maps API v3在 Google Maps API v3 中打开第二个 InfoWindow
【发布时间】：2012-11-19 20:42:51
【问题描述】：

我正在为音乐场所和活动的数据库实现地图界面，但遇到了一个有趣的问题。我有一系列 HTML 元素，带有对某个 Javascript 函数的 onclick 调用。调用正确运行并且 javascript 函数第一次正确运行（所有信息都正确传递，我的调试警报正确显示），并且 infoWindow 显示。第二次单击其中一个 div 时，第一个会正确关闭，下面代码中的最终警报会以正确的信息触发，但不会弹出新的 InfoWindow。

地图设置代码：

function mapsInitialize() {
    var mapOptions = {
        center: new google.maps.LatLng(42.4439614, -76.5018807),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapSection"), mapOptions);
    google.maps.event.trigger(map, 'resize');

    for(var x = 0; x < markers.length; x++){
        var tempOptions = {
            position: markers[x].position,
            title: markers[x].name,
            map: map
        }
        markerObjects[markers[x].title] = new google.maps.Marker(tempOptions); 
    }
}

从 div 调用 onclick 的函数：

function generateInfoWindow(despacedName, despacedTitle, eventTitle, url, date, time){
    if(curInfoWindow){
        alert("closing " + curInfoWindow.getContent());
        curInfoWindow.close();
        curInfoWindow = null;
    }
    curInfoWindow = new google.maps.InfoWindow(options = {size: new google.maps.Size(150,50)});
    curInfoWindow.setContent("<a class=\"eventLink\" href=\""+url+"\">"+eventTitle+"</a><br><br>"+markerObjects[despacedName].title+"<br>"+date+" at "+time);
    curInfoWindow.open(map, markerObjects[despacedName]);
    alert(despacedName+" is "+markerObjects[despacedName]);
}

我可以保证markers[]数组被正确输入。

我已经尝试过，除此之外......

创建一个数组来保存 infoWindows，而不是使用一个 curInfoWindow 变量
数组中没有任何东西会像 generateInfoWindow() 函数的开头那样自动关闭
在 mapsInitialize() 函数中自动创建信息窗口

在搜索解决方案时，Google 上的大多数结果都为我提供了有关地图上事件侦听器的信息 - 这是触发此类事件的唯一方法，还是我正在尝试做的事情有效？

如果需要任何其他代码示例，请告诉我。感谢您的任何建议！

【问题讨论】：

您检查过您的 javascript 错误吗？
怎么调用generateInfoWindow？
您确定可以这样做curInfoWindow = new google.maps.InfoWindow(options = {size: new google.maps.Size 吗？
我尝试删除 Size 位但无济于事（我曾尝试将其作为建议添加）。 Firebug 不返回任何 Javascript 错误。 generateInfoWindow 是从我之前提到的 HTML div 中调用的，所有数据都正确传递。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

根据谷歌地图 API：

InfoWindows 可以附加到任一标记对象（在这种情况下他们的位置基于标记的位置）或地图本身在指定的 LatLng。如果您只希望一个信息窗口显示在一次（就像谷歌地图上的行为一样），您只需要创建一个信息窗口，您可以将其重新分配到不同的位置或标记根据地图事件（例如用户点击）。与 V2 中的行为不同然而，Google Maps API，一张地图现在可能会显示多个 InfoWindow 对象，如果你愿意的话。

也许这会起作用：

function generateInfoWindow(despacedName, despacedTitle, eventTitle, url, date, time){
    if(!curInfoWindow){
        curInfoWindow = new google.maps.InfoWindow({maxWidth:150});
    }
    curInfoWindow.setContent("<a class=\"eventLink\" href=\""+url+"\">"+eventTitle+"</a><br><br>"+markerObjects[despacedName].title+"<br>"+date+" at "+time);
    curInfoWindow.open(map, markerObjects[despacedName]);
    alert(despacedName+" is "+markerObjects[despacedName]);
}

根据规范，这应该将现有 curInfoWindow 移动到新标记并更新内容。

注意：此代码无效

new google.maps.InfoWindow(options = {size: new google.maps.Size(150,50)})

没有大小属性。你能做的最好的就是

new google.maps.InfoWindow({maxWidth:150})

更多关于InfoWindow API

【讨论】：