谷歌地图关闭信息框

Question

当另一个信息框打开时，我需要关闭一个信息框。我已经看到了很多关于这个的线程，我已经尝试了我读过的所有东西，但没有运气。

我认为我的问题是没有信息框的全局变量，但在我做了一个之后仍然没有运气。但是如果你点击地图，它会关闭所有的信息框，所以不知道为什么会这样，但是当你点击另一个标记时却不行？

这是我当前的 JS：

var infobox;

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) {
        //circles for 4sq Trending data
        var cityCircle, cityCircle2, cityCircle3, infobox, infobox2, infobox3;  

        for (var i = 0; i < mapDataTrending.length; i++) { 
            contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>';  
            contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address;
            contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + "  ARE HERE";

            infobox = new InfoBox({
                 content: contentString,
                 //content: document.getElementById("infobox"),
                 disableAutoPan: false,
                 maxWidth: 150,
                 pixelOffset: new google.maps.Size(-140, 6),
                 zIndex: null,
                 boxClass: "infoTrending",
                 boxStyle: {
                    width: "200px"
                },
                closeBoxMargin: "1px",
                closeBoxURL: "img/close-btn.png",
                infoBoxClearance: new google.maps.Size(1, 1)
            });

            var markerIcon = [
                            "img/marker-icon-1.png",
                            "img/marker-icon-2.png",
                            "img/marker-icon-3.png",
                            "img/marker-icon-4.png",
                            "img/marker-icon-5.png",
                            "img/marker-icon-6.png",
                            "img/marker-icon-7.png",
                            "img/marker-icon-8.png",
                            "img/marker-icon-9.png",
                            "img/marker-icon-10.png"
                        ];

        var image = new google.maps.MarkerImage(
            markerIcon[i],
            // This marker is 129 pixels wide by 42 pixels tall.
            new google.maps.Size(18, 18),
            // The origin for this image is 0,0.
            new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 18,42.
            new google.maps.Point(9, 9)
        );



            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
                anchor: new google.maps.Point(0,32),
                icon: image,
                map: map
            });         


            bindInfoW(marker, contentString, infobox);

        }

        function bindInfoW(marker, contentString, infobox){
            google.maps.event.addListener(marker, 'click', function() {

                if(infobox){
                    infobox.close();
                }

                infobox.setContent(contentString);
                infobox.open(map, marker);

                google.maps.event.addListener(map, 'click', function() {
                    if(infobox){
                        infobox.close();
                    }
                });

            });
        }

Answer 1

不要在mapDataTrending 循环中实例化多个InfoBoxes，而是用一个空的content 全局实例化一个。然后你可以取出本地的infobox变量，handlers会使用全局引用。

你的脚本应该是这样结束的：

var infobox = new InfoBox({
     content: '',
     disableAutoPan: false,
     maxWidth: 150,
     pixelOffset: new google.maps.Size(-140, 6),
     zIndex: null,
     boxClass: "infoTrending",
     boxStyle: {
        width: "200px"
    },
    closeBoxMargin: "1px",
    closeBoxURL: "img/close-btn.png",
    infoBoxClearance: new google.maps.Size(1, 1)
});

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) {
    //circles for 4sq Trending data
    var cityCircle, cityCircle2, cityCircle3;  

    for (var i = 0; i < mapDataTrending.length; i++) { 
        contentString = '<p class="venuename"> ' + mapDataTrending[i].name + '</p>';  
        contentString += '<p class="venueaddress"> ' + mapDataTrending[i].address;
        contentString += '<p class="venuecount"> ' + mapDataTrending[i].count + "  ARE HERE";

        var markerIcon = [
                        "img/marker-icon-1.png",
                        "img/marker-icon-2.png",
                        "img/marker-icon-3.png",
                        "img/marker-icon-4.png",
                        "img/marker-icon-5.png",
                        "img/marker-icon-6.png",
                        "img/marker-icon-7.png",
                        "img/marker-icon-8.png",
                        "img/marker-icon-9.png",
                        "img/marker-icon-10.png"
                    ];

    var image = new google.maps.MarkerImage(
        markerIcon[i],
        // This marker is 129 pixels wide by 42 pixels tall.
        new google.maps.Size(18, 18),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
        new google.maps.Point(9, 9)
    );


        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
            anchor: new google.maps.Point(0,32),
            icon: image,
            map: map
        });         


        bindInfoW(marker, contentString);

    }

    function bindInfoW(marker, contentString){
        google.maps.event.addListener(marker, 'click', function() {

            if(infobox){
                infobox.close();
            }

            infobox.setContent(contentString);
            infobox.open(map, marker);

        });
    }

我还删除了在每次点击时绑定的第二个 click 处理程序，因为如果您没有任何未与 bindInfoW 绑定的标记，那么它是多余的和泄漏的。