infowindow

infowindow

关注
发信
关注(28)粉丝(399)

如何使用按钮关闭所有infoWIndown

本文介绍了如何使用按钮关闭所有infoWIndown的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有谷歌地图页面$ / b>

在地图上，我有许多针脚。每个人都有一个开放的infoWindow /弹出窗口

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



这是我的代码： 

 < a href =＃onclick =closeAllInfoWindows（）; >关闭所有infowindows< / a> 
 
 function closeAllInfoWindows（）
 {
 var infoWindow = new google.maps.InfoWindow（）; 
 infowindow.close（地图，标记）;

地图代码：

  var 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）; 
 
 //点击
打开弹出窗口（function（marker，data）{
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（data.description）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data）; 
 // 
 
 //打开所有弹出窗口
 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）; 
 
 //点击
打开弹出窗口（function（marker，data）{
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（data.description）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data）; 
 // 
 
 //打开所有弹出窗口
 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）; 
 
 // ***********路由**************** // 
 
 //初始化路径数组
 var path = new google.maps.MVCArray（）; 
 
 //初始化定向服务
 var service = new google.maps.DirectionsService（）; 
 
 //设置路径笔画颜色
 var poly = new google.maps.Polyline（{map：map，strokeColor：'＃4986E7'}）; 
 $ b $（文档）.ready（函数（）{
 var infoWindows = []; 
 
 //将infowindow添加到数组
 infoWindows.push （infowindow）; 
}）; 
 
函数closeAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 if（infoWindows [i]）
 infoWindows [i] .close（）; 
} 
} 
 
}



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



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




解决方案

根据谷歌地图API文档，Infowindow有一个 -method。



收集您在数组中创建的所有Infowindows。然后遍历这个数组并在每个Infowindow中调用close，当你需要一次关闭它们时。



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

  $（document）.ready（function（）{
 var infoWindows = [];

在循环中，在 infowindow.open（map，marker）; 

  //将infowindow添加到数组
 infoWindows.push  line将所有Infowindows保存在数组中。 （infowindow）;

最后，添加下面的按钮和函数代码以关闭所有的Infowindows按钮。 

 < a href =＃onclick =closeAllInfoWindows（）;>关闭所有infowindows< / a> 
 
函数closeAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 if（infoWindows [i]）
 infoWindows [i] .close（）; 
} 
}

编辑：由于OP已经放置co de问题出在错误的地方。

  var 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）; 
 
 //点击
打开弹出窗口（function（marker，data）{
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（data.description）; 
 infoWindow.open（map，marker）; 
}）; 
}）（marker，data）; 
 // 
 
 //打开所有弹出窗口
 var infowindow = new google.maps.InfoWindow（{
 content：data.description 
}）; 
 google.maps.event.addListener（marker，'mouseover'，function（）{
 infowindow.open（map，marker）; 
}）; 
 infowindow.open（map，marker）; 
 
 //将infowindow添加到数组
 infoWindows.push（infowindow）; 
 // 
} 
 map.setCenter（latlngbounds.getCenter（））; 
 // map.fitBounds（latlngbounds）; 
 
 // ***********路由**************** // 
 
 //初始化路径数组
 var path = new google.maps.MVCArray（）; 
 
 //初始化定向服务
 var service = new google.maps.DirectionsService（）; 
 
 //设置路径笔画颜色
 var poly = new google.maps.Polyline（{map：map，strokeColor：'＃4986E7'}）; 
 
 
 $ b函数closeAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 if（infoWindows [i]）
 infoWindows [i] .close（）; 
} 
}


I have page with google map

On the map i have number of pins. each one have an open infoWindow / popup

I would like to add button/link that will close all infoWindow at the same time.

This is my code:

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

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

code for the map:

 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());

}

Edit, here is Mayur code:

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

 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();
            }
        }           

    }

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

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

解决方案

As per the google map API docs, an Infowindow has a close()-method.

Collect all the Infowindows you create in an array. Then iterate over this array and call close for each Infowindow, when you need to close them all at once.

In the top, add an array to hold all the infoboxes created.

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

In loop, add below code after infowindow.open(map, marker); line to hold all your Infowindows in array.

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

And finally, add below code of button and function to close all Infowindows with button.

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

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

EDIT : As OP have placed code at wrong place in question.

    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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-03 13:11
Powered by LMLPHP ©2024 infowindow 0.001658