本文介绍了如何用按钮打开所有的infoWIndows的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
感谢Mayur Patel，我能够添加按钮，关闭我地图中的所有infoWindows。
现在我想添加打开所有弹出窗口的按钮 - infoWindows。所以我添加函数 openAllInfoWindows 并添加 infoWindows [i] .open（）; 命令，但它不
$ b HTML代码：
< a href =的javascript：无效（0）;的onclick = closeAllInfoWindows（）; >关闭< / A>
。
您需要使用全局地图对象和标记列表来显示所有使用按钮的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！