Ionic3/Google Maps API：点击地图外部自动关闭信息窗口

嗨，这个问题其实很容易搞定，咱们直接利用Google Maps API的原生事件监听就能解决，不需要复杂的逻辑，具体实现如下：

首先在你的HomePage类里补充相关代码，核心就是给地图绑定点击事件，触发时关闭已打开的弹窗：

declare const google;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  city: any;
  // 新增：声明infoWindow变量存储弹窗实例
  infoWindow: google.maps.InfoWindow;

  constructor(public navCtrl: NavController, private res...) {}

  // 假设你有初始化地图的方法，比如ionViewDidLoad
  ionViewDidLoad() {
    this.initMap();
  }

  initMap() {
    // ... 你的地图配置和初始化代码（比如设置中心点、缩放级别）
    const mapOptions = {
      center: new google.maps.LatLng(你的纬度, 你的经度),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    // 创建infoWindow实例
    this.infoWindow = new google.maps.InfoWindow({
      content: '<h4>你的弹窗内容</h4>'
    });

    // 给Marker绑定点击事件，打开弹窗
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(你的纬度, 你的经度),
      map: this.map
    });

    marker.addListener('click', () => {
      this.infoWindow.open(this.map, marker);
    });

    // 关键步骤：给地图绑定点击事件，点击非Marker/弹窗区域时关闭弹窗
    this.map.addListener('click', () => {
      this.infoWindow.close();
    });
  }
}

方案说明 #

默认情况下Google Maps的infoWindow点击地图空白区域会自动关闭，但如果你的代码里存在事件冒泡阻止、自定义事件拦截逻辑，就可能导致这个默认行为失效。手动给地图绑定click事件来关闭弹窗，是最直接可靠的兜底方案，而且代码量极少，完全符合“最简”的要求。

如果你的场景是多个Marker对应多个弹窗，只需要在打开新弹窗前先关闭已打开的弹窗即可——比如在Marker的点击事件里先执行this.infoWindow.close()，再打开当前Marker对应的弹窗。

内容的提问来源于stack exchange，提问作者Med Karim Garali