0

我创建了一个简单的地图；http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine

如果我打开 Gîte 和酒店，弹出窗口将保持打开状态。如果我打开第二个 Gîte 弹出窗口，第一个会自行关闭。

我希望所有弹出窗口都有这种行为。如果我单击一个项目，另一个弹出窗口会自行关闭。

我怎样才能做到这一点 ？

配置变量：

var googlemap_setting = {
 "gite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=gite",
 "hotel": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=hotel",
 "chambre": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=chambre-hote",
 "camping": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=camping",
 "insolite": "http://preprod-pnr.terresnouvelles.com/fr/decouvertes/les-hebergements-nature-et-patrimoine/@@hebergement_kml_view?q=insolite"
}

加载地图的 javascript：

$(document).ready(function() {

function initGoogleMaps() {
    if ($('#map_canvas').length==0) {
        return;
    }

    var myOptions = {
        center : new google.maps.LatLng(47.26804151097223,
                -0.08375246917164172),
        zoom : 9,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document
            .getElementById("map_canvas"), myOptions);

    var controlDiv = document.createElement('div');

    controlDiv.style.padding = '5px';

    // Set CSS for the control border.
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderWidth = '1px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Filtrer';
    controlDiv.appendChild(controlUI);

    // Set CSS for the control interior.
    var controlText = document.createElement('div');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '4px';
    controlText.style.paddingRight = '4px';
    controlText.innerHTML = $('#mapscontrol').html();
    $('#mapscontrol').remove();
    controlUI.appendChild(controlText);

    var camping = new google.maps.KmlLayer(
            googlemap_setting["camping"]);
    var gite = new google.maps.KmlLayer(
            googlemap_setting["gite"]);
    var chambre = new google.maps.KmlLayer(
            googlemap_setting["chambre"]);
    var hotel = new google.maps.KmlLayer(
            googlemap_setting["hotel"]);
    var insolite = new google.maps.KmlLayer(
            googlemap_setting["insolite"]);

    camping.setMap(map);
    gite.setMap(map);
    chambre.setMap(map);
    hotel.setMap(map);
    insolite.setMap(map);

    google.maps.event.addDomListener(controlDiv, 'click',
            function(event) {
                var item = event.srcElement;
                if (item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(map);
                    }
                    if (item.value == "gite") {
                        gite.setMap(map);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(map);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(map);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(map);
                    }
                }
                if (!item.checked) {
                    if (item.value == "camping") {
                        camping.setMap(null);
                    }
                    if (item.value == "gite") {
                        gite.setMap(null);
                    }
                    if (item.value == "chambre") {
                        chambre.setMap(null);
                    }
                    if (item.value == "hotel") {
                        hotel.setMap(null);
                    }
                    if (item.value == "insolite") {
                        insolite.setMap(null);
                    }
                }
            });

    map.controls[google.maps.ControlPosition.TOP_RIGHT]
            .push(controlDiv);
}
function initDataTable(){
    datatableconfig = {
            "iDisplayLength" : 20,
            "aaSorting": [[2, "asc"]],
            "oLanguage": {"sUrl": "@@collective.js.datatables.translation"},
            "aLengthMenu" : [ [ 20, 30, 50, -1 ],
                    [ 20, 30, 50, "Tous" ] ]
        };

    var oTable = $('#table-hebergement').dataTable(
            datatableconfig);

    /* ADD COLUMN SEARCH SUPPORT */
    $('#table-hebergement #head-type select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 0);
            });
    $('#table-hebergement #head-capacity select').change(
            function(eventObject) {
                oTable.fnFilter($(this).val(), 1);
            });

}
initGoogleMaps();
initDataTable();
});
4

1 回答 1

1

如果不查看您的代码，很难提出建议，但我会在弹出窗口的最外层元素中添加一个类，例如.popup，然后我会尝试.popup在打开一个元素之前关闭所有元素。用 jQuery 说：

$(".popup").hide();
于 2012-08-01T08:43:54.780 回答