Google Maps API 关闭信息窗口（自动）答案

【问题标题】：Google Maps API Close InfoWindow (Automatically)Google Maps API 关闭信息窗口（自动）
【发布时间】：2019-03-14 17:21:38
【问题描述】：

是否有人对单击另一个标记时如何自动关闭信息窗口有任何建议？当前，用户必须在单击另一个标记时手动关闭信息框。我希望有一种方法可以轻松地合并到我的代码中。看起来我正在为每个标记创建单独的信息框。当我们扩大这个项目的规模时，我们将拥有 10k 多个标记，这些标记将被不同的类别分开。

我阅读了有关创建一个 infoWindow 然后更改内容的建议，但如果我正确理解我的代码，我将为每个标记创建单独的信息框，因为它们来自 XML 文件。我如何将这种技术与我当前的代码结合起来？

您可以在此处找到我的项目的实时示例：http://www.officerage.com/maps/ 这是我的示例代码：

 <!DOCTYPE html>
<html lang="en">
<head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title>A Basic Map</title>
    <style>
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    </head>

    <body>
    <div id="map"></div>
    <script>

    function infoCallback(infowindow, marker) {
    return function() { infowindow.open(map, marker); }; 
}
    function initMap() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(37.5, -122),
            mapTypeId: 'roadmap'
        };


        var map = new google.maps.Map(document.getElementById('map'), mapOptions);





        $.ajax({
    type: "GET",
    async: true,
    url: "testxml.xml",
    dataType: "xml",
    success:
    function (xml) {


    var places = xml.documentElement.getElementsByTagName("place");


    for (var i = 0; i < places.length; i++) {
    var lat = places[i].getAttribute('latitude');
    var long = places[i].getAttribute('longitude');
    var category = places[i].getAttribute('Info');
    var latLng = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker({
        position:  latLng,
        map: map,
        category:places[i].info,
        label:places[i].name

    });

    var infowindow = new google.maps.InfoWindow({
    content:category});
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow,marker));


}



    }



}


);

    }
    </script>


<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz_-TAwsP-dL_dsEkmz8sGEU1hyPYKHik&callback=initMap">
</script>
</body>
</html>

【问题讨论】：

Google Map V3 - Allow only one infobox to be displayed at a time的可能重复
Google maps: infowindow is not closing的可能重复
Google Maps API - only one infowindow open at once的可能重复
Google Maps: Auto close open InfoWindows?的可能重复
Google Maps API - only one infowindow open at once的可能重复

标签： google-maps google-maps-api-3

【解决方案1】：

要修改您的代码以使用单个 infowindow，将其移动到单击的标记并更新其内容以反映该标记的数据，请将您的 infoCallback 更改为将 content 为第一个参数：

function infoCallback(content, marker) {
  return function() {
    infowindow.setContent(content);
    infowindow.open(map, marker);
  };
}
var infowindow;
function initMap() {
  infowindow = new google.maps.InfoWindow();
  // ...

然后像这样使用它：

var places = xml.documentElement.getElementsByTagName("place");
for (var i = 0; i < places.length; i++) {
  var lat = places[i].getAttribute('latitude');
  var long = places[i].getAttribute('longitude');
  var category = places[i].getAttribute('Info');
  var latLng = new google.maps.LatLng(lat, long);

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    category: places[i].info,
    label: places[i].name
  });
  google.maps.event.addListener(marker, 'click', infoCallback(category, marker));
}

proof of concept fiddle

代码 sn-p：

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

<div id="map"></div>
<script>
  function infoCallback(content, marker) {
    return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker);
    };
  }
  var infowindow;

  function initMap() {
    infowindow = new google.maps.InfoWindow();
    var mapOptions = {
      zoom: 3,
      center: new google.maps.LatLng(37.5, -122),
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var xml = parseXml(xmlStr);
    var places = xml.documentElement.getElementsByTagName("place");
    for (var i = 0; i < places.length; i++) {
      var lat = places[i].getAttribute('latitude');
      var long = places[i].getAttribute('longitude');
      var category = places[i].getAttribute('Info');
      var latLng = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        category: places[i].info,
        label: places[i].name
      });
      google.maps.event.addListener(marker, 'click', infoCallback(category, marker));
      bounds.extend(marker.getPosition());
    }
    map.fitBounds(bounds);
  }

  var xmlStr = '<places><place latitude="37.4529598" longitude="-122.1817252" Info="Menlo Park, CA"/><place latitude="37.43355" longitude="-122.2030209" Info="West Menlo Park, CA 94025"/><place latitude="37.424106" longitude="-122.1660756" Info="Stanford, CA"/></places>';

  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');
    }
  };
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

【讨论】：