谷歌地图关闭信息框

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

不要在循环InfoBox中实例化多个 es mapDataTrending，而是使用空的 全局实例化一个 es content。然后你可以取出局部infobox变量，处理程序将使用全局引用。

你的脚本最终应该是这样的：

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.