Question

我正在尝试添加多个标记的Google地图。所有标记都有信息窗口。我想显示默认情况下在页面加载时显示的所有信息窗口。当有人点击地图或标记时，所有信息窗口必须关闭，然后点击标记显示。

以下是我试图实现它的方法：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map {
    height: 100%
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];
    
function initMap() {
    var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
    mapOptions = {
        zoom:               8,
        center:             latlng
    }
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {
        var icon = '';
        if ( locations[i][0].length != '' && locations[i][1].length != '' ) {

            var marker = new google.maps.Marker({
                position:       new google.maps.LatLng(locations[i][1], locations[i][2]),
                map:            map,
                title:          locations[i][3],
            });
            
            var contentString = 'Title on Load';
            var infowindow = new google.maps.InfoWindow({
                content:    contentString,
                maxWidth:   160
            });
            infowindow.open(map, marker);

            // Event that closes the Info Window with a click on the map
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    var contentString = 'Title on Click';
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
}
google.maps.event.addDomListener(window, 'load', initMap);

</script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

上面的代码工作正常，但它显示了重复的infowindows。单击加载时打开的infowindows必须关闭但它们没有关闭。

Answer 1

你的infowindow变量需要函数闭包（IIFE）：

// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', (function(infowindow) {
  return function() {
    infowindow.close();
}})(infowindow));

proof of concept fiddle

代码段

var locations = [
  ['loan 1', 33.890542, 151.274856, 'address 1'],
  ['loan 2', 33.923036, 151.259052, 'address 2'],
  ['loan 3', 34.028249, 151.157507, 'address 3'],
  ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
  ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initMap() {
  var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
  mapOptions = {
    zoom: 8,
    center: latlng
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  for (i = 0; i < locations.length; i++) {
    var icon = '';
    if (locations[i][0].length != '' && locations[i][1].length != '') {

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: locations[i][3],
      });

      var contentString = 'Title on Load';
      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 160
      });
      infowindow.open(map, marker);

      // Event that closes the Info Window with a click on the map
      google.maps.event.addListener(map, 'click', (function(infowindow) {
        return function() {
          infowindow.close();
        }
      })(infowindow));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          // close all the other infowindows that opened on load
          google.maps.event.trigger(map, 'click')
          var contentString = 'Title on Click';
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

如何添加带有多个标记的Google地图，显示加载时的信息窗口并点击

1 个答案: