谷歌地图API - 通过类别导航隐藏所有信息窗口

Google Maps Api - Hide all info windows through Category Navigation

本文关键字：隐藏所 信息 信息窗 窗口 导航 API 谷歌地图      更新时间：2023-09-26

我已经建立了一个导航来显示/隐藏谷歌地图上的不同标记类别。每个标记在单击时显示一个信息窗口。如果单击标记类别，我想关闭打开的信息窗口。我尝试在此解决方案中工作 关闭所有信息 窗口谷歌地图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/

如果您希望在

toggleGroup函数中可以访问 infoWindow，则需要将其传递给函数，而您在单击事件中不会这样做（该函数接受四个参数，您只传入两个）：

toggleGroup('hotel', this);
// function definition
function toggleGroup(type, elem, infoWindow, map) {
// ...

一种选择是将地图和信息窗口设置为全局，并在调用toggleGroup函数时将其关闭。

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

更新的小提琴

代码片段：

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

相关文章：