Question

我有谷歌地图的页面

在地图上我有多个针脚。每个人都有一个打开的infoWindow / popup

我想添加同时关闭所有infoWindow的按钮/链接。

这是我的代码：

<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>

function closeAllInfoWindows()
{
    var infoWindow = new google.maps.InfoWindow();
    infowindow.close(map, markers);
}

地图代码：

 var markers = [
        <?PHP echo $markers ?>
];
window.onload = function () {
    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: <?PHP echo $mapZoom ?>,
        mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var infoWindow = new google.maps.InfoWindow();
    var lat_lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        lat_lng.push(myLatlng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title
        });
        latlngbounds.extend(marker.position);

        // open popup by click
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
        //

        // Open all popups
        var infowindow = new google.maps.InfoWindow({
            content: data.description
        });
        google.maps.event.addListener(marker, 'mouseover', function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);               
        //
    }
    map.setCenter(latlngbounds.getCenter());

}

编辑，这是Mayur代码：

-----------------------------------

 var markers = [
            <?PHP echo $markers ?>
    ];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: <?PHP echo $mapZoom ?>,
            mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });
            latlngbounds.extend(marker.position);

            // open popup by click
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            //

            // Open all popups
            var infowindow = new google.maps.InfoWindow({
                content: data.description
            });
            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.open(map, marker);
            });
            infowindow.open(map, marker);               
            //
        }
        map.setCenter(latlngbounds.getCenter());
    //  map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

        $(document).ready(function () {
            var infoWindows = [];

            //add infowindow to array
            infoWindows.push(infowindow);       
        });

        function closeAllInfoWindows()
        {
            for (var i=0;i<infoWindows.length;i++) {
               if (infoWindows[i])
                  infoWindows[i].close();
            }
        }           

    }

----------------

Answer 1

根据谷歌地图API文档，Infowindow有一个close()方法。

收集您在阵列中创建的所有Infowindows。然后迭代遍历此数组并为每个Infowindow调用close，当您需要立即关闭它们时。

在顶部，添加一个数组来保存所有创建的信息框。

$(document).ready(function () {
    var infoWindows = [];

在循环中，在infowindow.open(map, marker);行之后添加以下代码以将所有Infowindows保存在数组中。

//add infowindow to array
infoWindows.push(infowindow);

最后，添加下面的按钮和功能代码，用按钮关闭所有Infowindows。

<a href="#" onclick="closeAllInfoWindows();">Close all infowindows</a>

function closeAllInfoWindows()
{
    for (var i=0;i<infoWindows.length;i++) {
       if (infoWindows[i])
          infoWindows[i].close();
    }
}

编辑：由于OP已将代码放在错误的位置。

    var markers = [
                <?PHP echo $markers ?>
        ];
    var infoWindows = [];
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: <?PHP echo $mapZoom ?>,
                mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);

                // open popup by click
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                //

                // Open all popups
                var infowindow = new google.maps.InfoWindow({
                    content: data.description
                });
                google.maps.event.addListener(marker, 'mouseover', function () {
                    infowindow.open(map, marker);
                });
                infowindow.open(map, marker);  

                //add infowindow to array
                infoWindows.push(infowindow);               
                //
            }
            map.setCenter(latlngbounds.getCenter());
        //  map.fitBounds(latlngbounds);

            //***********ROUTING****************//

            //Initialize the Path Array
            var path = new google.maps.MVCArray();

            //Initialize the Direction Service
            var service = new google.maps.DirectionsService();

            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });         

        }   

function closeAllInfoWindows()
            {
                for (var i=0;i<infoWindows.length;i++) {
                   if (infoWindows[i])
                      infoWindows[i].close();
                }
            }

如何用按钮关闭所有infoWIndown

-----------------------------------

----------------

----------------

1 个答案: