1

別の情報ボックスが開いているときに、その情報ボックスを閉じる必要があります。私はこれについて多くのスレッドを見てきました.

私の問題にはインフォボックスのグローバル変数がないと思っていましたが、作成した後もまだ運がありません。しかし、マップをクリックするとすべてのインフォボックスが閉じてしまうので、なぜそれが機能するのかわかりませんが、別のマーカーをクリックすると機能しませんか?

これが私の現在の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();
                    }
                });

            });
        }
4

1 に答える 1

4

ループ内で複数のInfoBoxesをインスタンス化する代わりに、空のを使用して1つをグローバルにインスタンス化します。次に、ローカル変数を取り出すことができ、ハンドラーはグローバル参照を使用します。mapDataTrendingcontentinfobox

スクリプトは次のようになります。

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でバインドされていないマーカーがない場合は冗長でリークが発生するため、クリックごとにバインドされていた2番目のハンドラーも削除しましたbindInfoW。

于 2013-02-25T18:08:40.120 に答える