Google Maps Api - 通过类别导航隐藏所有信息窗口

Question

我已经构建了一个导航来在谷歌地图上显示/隐藏不同的标记类别。每个标记在单击时显示一个信息窗口。如果单击标记类别，我想关闭打开的信息窗口。我曾尝试在此解决方案Close all info windows google maps API V3? 中工作，但无法使其工作。我有这个切换功能：

//toggle visibility of Marker Categories
function toggleGroup(type, elem, infoWindow, map) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }
}

小提琴：http://jsfiddle.net/vanith/upn9qms0/28/

Answer 1

如果您希望在toggleGroup 函数中可以访问 infoWindow，则需要将其传递给函数，您不会在单击事件上执行此操作（该函数有四个参数，您只传递两个):

toggleGroup('hotel', this);

// function definition
function toggleGroup(type, elem, infoWindow, map) {
// ...

一种选择是使地图和 infoWindow 成为全局并在调用 toggleGroup 函数时将其关闭。

//toggle visibility of Marker Categories
function toggleGroup(type, elem) {
  infoWindow.close();
  // ...

updated fiddle

代码 sn-p：

// global variables
var infoWindow = new google.maps.InfoWindow();
var map;

//toggle visibility of Marker Categories
function toggleGroup(type, elem) {
  // close infowindow
  infoWindow.close();

  for (var i = 0; i < markerGroups[type].length; i++) {
    // alert(markerGroups[type][i]);
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
      elem.classList.add('active');
    } else {
      marker.setVisible(false);
      elem.classList.remove('active');
    }
  }

}


// INIT
function load() {
  // Create Map
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(48.130266, 11.537999),
    zoom: 15,
    styles: styles,
    mapTypeControl: false,
    streetViewControl: false
  });

  // Home Polygon - Construct the polygon.
  var homepoly = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#003781',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#009ee0',
    fillOpacity: 0.2
  });
  homepoly.setMap(map);

  // downloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var website = markers[i].getAttribute("website");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng"))
    );
    bounds.extend(point);
    var type = markers[i].getAttribute("type");
    var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='" + website + "' target='_blank'>" + website + "</a>";
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    markerGroups[type].push(marker);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);


  //Print dat maps!
  var printMaps = function() {
    var body = $('body'),
      mapContainer = $('#map'),
      mapContainerParent = mapContainer.parent(),
      printContainer = $('<div>');
    body.prepend(printContainer);
    printContainer
      .addClass('print-container')
      .css('position', 'relative')
      .height('body.height()')
      .append(mapContainer);
    var content = body.children()
      .not('script')
      .not(printContainer)
      .detach();
    window.print();
    body.prepend(content);
    mapContainerParent.prepend(mapContainer);
    printContainer.remove();
  };
  $('.map-print').on('click', printMaps);

  // CLOSE INIT
}

// Click function Marker, Infowindow
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });

}


google.maps.event.addDomListener(window, 'load', load);

// Home Polygon - Define the LatLng coordinates for the polygon's path.
var triangleCoords = [{
  lat: 48.130723,
  lng: 11.536538
}, {
  lat: 48.130466,
  lng: 11.536259
}, {
  lat: 48.129191,
  lng: 11.538692
}, {
  lat: 48.130265,
  lng: 11.538976
}, {
  lat: 48.130265,
  lng: 11.538402
}, {
  lat: 48.130602,
  lng: 11.538402
}, {
  lat: 48.131114,
  lng: 11.537206
}, {
  lat: 48.130659,
  lng: 11.536755
}];


//Get Data of XML
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

var xmlStr = '<markers><marker name="Medienfabrik" address="Ganghoferstraße 68,80339 München" website="http://medienfabrik-muenchen.de/" lat="48.129975" lng="11.538764" type="home"/><marker name="Kongressbar" address="Theresienhöhe 15,80339 München" website="http://www.kongressbar.de" lat="48.1322911" lng="11.543943" type="bar"/><marker name="Motel One" address="" lat="48.13969" lng="11.53710" type="hotel"/><marker name="Stragula" address="" lat="48.13233" lng="11.53622" type="restaurant"/><marker name="Rossmann" address="" lat="48.133740" lng="11.545614" type="shopping"/><marker name="Bavariapark" address="" lat="48.131110" lng="11.542562" type="freizeit"/><marker name="Deutsches Museum Verkehrszentrum" address="" lat="48.132616" lng="11.542766" type="kultur"/></markers>';


var markerGroups = {
  "home": [],
  "bar": [],
  "hotel": [],
  "restaurant": [],
  "shopping": [],
  "freizeit": [],
  "kultur": []
};

var customIcons = {
  home: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  },
  bar: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
  },
  hotel: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/orange.png'
  },
  restaurant: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/red.png'
  },
  shopping: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'
  },
  freizeit: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/purple.png'
  },
  kultur: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/grey.png'
  }
};

// Create an array for Individuall Map-styles.
var styles = [{
  "featureType": "landscape.man_made",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#000000"
  }]
}, {
  "featureType": "administrative.locality",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "hue": "#2c2e33"
  }, {
    "saturation": 7
  }, {
    "lightness": 19
  }]
}, {
  "featureType": "landscape",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "hue": "#ffffff"
  }, {
    "saturation": -100
  }, {
    "lightness": 21
  }]
}, {
  "featureType": "poi",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "color": "#009ee0"
  }]
}, {
  "featureType": "transit.station",
  "elementType": "all",
  "stylers": [{
    "visibility": "simplified"
  }, {
    "hue": "#009ee0"
  }, {
    "saturation": 0
  }, {
    "lightness": 0
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry.fill",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#a4d65e"
  }, {
    "lightness": 0
  }]
}, {
  "featureType": "transit.line",
  "elementType": "geometry",
  "stylers": [{
    "color": "#4d4d4d"
  }, {
    "lightness": 70
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text",
  "stylers": [{
    "color": "#003781"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "color": "#ffffff"
  }]
}, {
  "featureType": "poi.business",
  "elementType": "geometry.fill",
  "stylers": [{
    "visibility": "off"
  }, {
    "hue": "#000000"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "all",
  "stylers": [{
    "hue": "#ffcc00"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.fill",
  "stylers": [{
    "hue": "#ffffff"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.stroke",


  "stylers": [{
    "color": "#eeeeee"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.fill",
  "stylers": [{
    "color": "#ffffff"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.stroke",
  "stylers": [{
    "color": "#eeeeee"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.icon",
  "stylers": [{
    "hue": "#ffcc00"
  }, {
    "saturation": 50
  }, {
    "lightness": 0
  }]
}]

body {
  font-family: arial;
}
#map {
  position: relative;
}
.filters {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 20px;
  left: 20px;
  border: 0px solid #999;
  border-radius: 2px;
  padding: 0;
  z-index: 999;
}
.filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filters ul li {
  display: block;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e4e4e4;
  border-bottom-color: rgba(228, 228, 228, 0.8);
  margin-bottom: -1px;
  font-size: 14px;
  color: #666;
}
.filters ul li img {
  margin: 0 3px -4px 0;
}
.filters ul li#bar.active {
  background: #e4002b;
  color: #fff;
}
.filters ul li#hotel.active {
  background: #00a9e0;
  color: #fff;
}
.filters ul li#restaurant.active {
  background: #ffcd00;
  color: #fff;
}
.filters ul li#shopping.active {
  background: #df1995;
  color: #fff;
}
.filters ul li#freizeit.active {
  background: #97d700;
  color: #fff;
}
.filters ul li#kultur.active {
  background: #7d55c7;
  color: #fff;
}
.filters ul li a img {
  margin: 0 5px -3px 0;
}
.filters ul li#bar:hover,
.filters ul li#hotel:hover,
.filters ul li#restaurant:hover,
.filters ul li#shopping:hover,
.filters ul li#freizeit:hover,
.filters ul li#kultur:hover {
  opacity: 0.8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="filters">
  <ul>
    <li id="bar" onclick="toggleGroup('bar', this);" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/green.png" />Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/orange.png" />Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/red.png" />Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/yellow.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/purple.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/grey.png" />Kunst & Kultur</li>
    <li class="map-print">Drucken</li>
  </ul>
</div>
<div id="map" style="width: 100%; height: 400px"></div>