如何使用 Google Maps 3 API 关闭信息窗口？答案

【问题标题】：How do I close an infowindow with Google Maps 3 API?如何使用 Google Maps 3 API 关闭信息窗口？
【发布时间】：2010-05-14 19:43:29
【问题描述】：

我看过其他帖子，但他们没有像我的那样动态循环标记。如何使用以下代码创建一个在单击另一个标记时关闭信息窗口的事件？

$(function(){
    var latlng = new google.maps.LatLng(45.522015,-122.683811);
    var settings = {
        zoom: 10,
        center: latlng,
        disableDefaultUI:false,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

    $.getJSON('api',function(json){
        for (var property in json) {
            if (json.hasOwnProperty(property)) {
                var json_data = json[property];
                var the_marker = new google.maps.Marker({
                    title:json_data.item.headline,
                    map:map,
                    clickable:true,
                    position:new google.maps.LatLng(
                        parseFloat(json_data.item.geoarray[0].latitude),
                        parseFloat(json_data.item.geoarray[0].longitude)
                    )
                });
                function buildHandler(map, marker, content) {
                    return function() {
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
                        });
                        infowindow.open(map, marker);
                    };
                }
                new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
            }
        }
    });
});

【问题讨论】：

标签： javascript jquery model-view-controller api google-maps

【解决方案1】：

我终于想通了...不用感谢这里的任何人...实际上很容易：

首先，设置一些变量来存储信息窗口：

var infowindow;

然后将它添加到触发另一个 infowindow.open() 的 onClick 函数的任何位置。不过把它放在空旷的地方：

if(infowindow) {infowindow.close()}

在您的循环内，或者您正在添加标记。

例如全面行动：

在我的脚本的最顶部：

var infowindow;

在我添加标记的循环中：

function buildHandler(map, marker, content) {
    return function() {
        if(infowindow) {infowindow.close()}
        infowindow = new google.maps.InfoWindow({
            content: 'My Content here'
        });
        infowindow.open(map, marker);
    };
}

【讨论】：