Question

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

现在我想添加打开所有引脚弹出窗口的按钮 - infoWindows。所以我添加了函数openAllInfoWindows并添加了infoWindows[i].open();命令，但它不起作用。

HTML code：

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

地图代码：

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

Answer 1

infoWindow[i].open()需要一个或两个参数，您需要使用之前在代码中使用的相同参数（infowindow.open(map, marker);）来调用它，或者在每个标记上调用google.maps.event.trigger(marker, 'click')。

无论哪种方式，您都需要保留对所有标记的引用。

function openAllInfoWindows() {
  for (var i = 0; i < gmarkers.length; i++) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
}

（其中gmarkers是google.maps.Marker个对象的数组）

proof of concept fiddle

（请注意，您的标记点击侦听器功能中存在拼写错误）

代码段

var markers = [{
  lat: 37.4419,
  lng: -122.1419,
  description: "Palo Alto"
}, {
  lat: 37.4529598,
  lng: -122.1817252,
  description: "Menlo Park"
}];
var gmarkers = []; // for open button
var infoWindows = []; // for close button
var mapOptions = {
  center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
};

window.onload = function() {
  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
    });
    gmarkers.push(marker);
    latlngbounds.extend(marker.position);

    // 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);

    // open popup by click
    google.maps.event.addListener(marker, "click", (function(marker, infowindow, data) {
      return function(e) {
        infowindow.setContent(data.description);
        infowindow.open(map, marker);
      }
    })(marker, infowindow, data));


    //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 < gmarkers.length; i++) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
}

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<a href="javascript:void(0);" onclick="closeAllInfoWindows();">Close</a>
<a href="javascript:void(0);" onclick="openAllInfoWindows();">Open</a>
<div id="map-canvas"></div>

Answer 2

@Roi我正在使用我的previous answer.

您需要全局地图对象和标记列表才能使用按钮显示所有信息窗口。

步骤：请注意infoWindows将保留所有信息和标记。

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

点击按钮打开所有信息窗口。

<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']);
                }
            }

完整代码，包括打开和关闭所有信息窗口：

      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

HTML code：

地图代码：

2 个答案: