Question

我需要在打开另一个时关闭一个infoBox。我已经看过很多关于这个问题的线索，我已经尝试了所有我读过的内容而且没有运气。

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

这是我目前的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循环中实例化多个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处理程序，因为如果没有任何未与{{1}}绑定的标记，它将是多余的并且会泄漏。

谷歌地图关闭infoBox

1 个答案: