单击其他标记时如何使用 Google Maps API 关闭信息窗口？

Question

当我单击地图中的其他位置或其他标记时，我希望关闭该信息窗口。即，同时只有一个信息窗口打开，所有其他信息窗口都关闭。

但我该怎么办呢？

我的代码：

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

addMarker({
  coords: { lat: 62.791711, lng: 22.808479 },
  content: 'test 1'
});
addMarker({
  coords: { lat: 65.799962, lng: 24.497773 },
  content: 'test 2'
});
addMarker({
  coords: { lat: 62.331629, lng: 22.890667 },
  content: 'test 3'
});

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map
  });

  if (props.content) {
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
}

Answer 1

要一次仅打开一个信息窗口，请创建一个全局变量来保存单个 InfoWindow 实例。

var infoWindow;

然后，在初始化函数 ( initMap) 中，实例化信息窗口：

infoWindow = new google.maps.InfoWindow();

将您的函数更改addMarker为以下内容：

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map
  });

  if (props.content) {
    marker.addListener('click', function() {
      infoWindow.setContent(props.content);
      infoWindow.open(map, marker);
    });
  }
}

如果您想在用户单击地图时关闭信息窗口，您可以将此事件侦听器添加到地图中：

map.addListener('click', function() {
    if (infoWindow) infoWindow.close();
});

这是一个带有工作示例的JSBin 。