如何用按钮打开所有的infoWIndows [英] how to open all infoWIndows with button

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

问题描述

感谢Mayur Patel，我能够添加按钮，关闭我地图中的所有infoWindows。



现在我想添加打开所有弹出窗口的按钮 - infoWindows。所以我添加函数 openAllInfoWindows 并添加 infoWindows [i] .open（）; 命令，但它不
$ b

HTML代码：



 < a href =的javascript：无效（0）;的onclick = closeAllInfoWindows（）; >关闭< / A>



地图代码：



  var markers = [
<？PHP echo $ markers？> 
]; 
 var infoWindows = []; //关闭按钮
 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）; 
 window.onload = function（）{
 
 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：'< div id = iw-container>'+'< div class =iw-title>'+ data.description +'< / div>'+'< / div>'，
 maxWidth： 350 
}）; 
 
 infowindow.open（map，marker）; 
 // 
 //将infowindow添加到数组（关闭按钮）
 infoWindows.push（infowindow）; 
} 
 map.setCenter（latlngbounds.getCenter（））; 
 
 //初始化路径数组
 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（）; 
 
 
 
函数openAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 if（infoWindows [i]）
 infoWindows [i] .open（）; 
} 
}


解决方案

@ Roi我正在使用我的上一个答案。



您需要使用全局地图对象和标记列表来显示所有使用按钮的infowindow。

步骤：请注意 infoWindows 将包含所有infowindows和marker。

  //将所有标记和在JSON数组中的infowindow ... 
 var dict_map = {}; 
 dict_map ['infoWinObj'] = infowindow; 
 dict_map ['markerObj'] = marker; 
 
 //在数组$ b $中推入JSON字典infoWindows.push（dict_map）;

打开按钮上的所有infowindows。

 < a href =javascript：void（0）; onclick =openAllInfoWindows（）;>打开所有infowindows< / a> 
 
函数openAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 infowindows [i] ['infoWinObj'] .open（map，infowindows [i] ['markerObj']）; 
 
 
 
 
 
 
 
完整代码包括打开和关闭所有infowindows： p> 
 
 
  var markers = [
<？PHP echo $ markers？> 
]; 
 var infoWindows = []; 
 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）; 
 window.onload = function（）{
 
 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存储在JSON数组中... 
 var dict_map = {}; 
 dict_map ['infoWinObj'] = infowindow; 
 dict_map ['markerObj'] = marker; 
 
 //在数组$ b $中推入JSON字典infoWindows.push（dict_map）; 
 // 
} 
 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] ['infoWinObj']）
 infoWindows [i] ['infoWinObj']。close（）; 
 
 
 
函数openAllInfoWindows（）
 {
 for（var i = 0; i< infoWindows.length; i ++）{
 infoWindows [i] ['infoWinObj']。open（map，infoWindows [i] ['markerObj']）; 
} 
} 
  
 
Thanks to Mayur Patel i was able to add button that close all infoWindows in my map.



Now I want to add button that open all pins popups - infoWindows. so I add function openAllInfoWindows and add the infoWindows[i].open(); command, but it doesn't work.



HTML code:



<a href="javascript:void(0);" onclick="closeAllInfoWindows();"  >Close</a>
<a href="javascript:void(0);" onclick="openAllInfoWindows();">Open</a>




Map code:



var markers = [
        <?PHP echo $markers ?>
];
var infoWindows = []; // for close button
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);   
window.onload = function () {

    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: '<div id="iw-container">' +'<div class="iw-title">' + data.description + '</div>' + '</div>',
            maxWidth: 350
        });

        infowindow.open(map, marker);               
        //
        //add infowindow to array (for close button)
        infoWindows.push(infowindow);               
    }
    map.setCenter(latlngbounds.getCenter());

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

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



 解决方案 
@Roi I am using my previous answer.



You need global map object and list of markers to display all infowindow using a button.



Steps: Please note infoWindows will hold all infowindows and markers.
//Store all marker and infowindow in JSON array...
var dict_map = {};
dict_map['infoWinObj'] = infowindow;
dict_map['markerObj'] = marker;

//push JSON dict in array
infoWindows.push(dict_map); 

Open all infowindows on button click.
<a href="javascript:void(0);" onclick="openAllInfoWindows();">Open all infowindows</a>     

function openAllInfoWindows()
            {
                for (var i=0;i<infoWindows.length;i++) {                   
                      infowindows[i]['infoWinObj'].open(map, infowindows[i]['markerObj']);
                }
            }     

Full code including open and close all infowindows:
      var markers = [
                <?PHP echo $markers ?>
        ];
        var infoWindows = [];
        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);
        window.onload = function () {

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

                //Store all marker and infowindow in JSON array...
                var dict_map = {};
                dict_map['infoWinObj'] = infowindow;
                dict_map['markerObj'] = marker;

                //push JSON dict in array
                infoWindows.push(dict_map);               
                //
            }
            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]['infoWinObj'])
                      infoWindows[i]['infoWinObj'].close();
                }
            } 

function openAllInfoWindows()
            {
                for (var i=0;i<infoWindows.length;i++) {                   
                      infoWindows[i]['infoWinObj'].open(map, infoWindows[i]['markerObj']);
                }
            }     



                        
这篇关于如何用按钮打开所有的infoWIndows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆