Question

我正在使用angular-google-map。单击标记时，信息窗口将打开，并且单击其他标记时将隐藏previos窗口。现在，我想在鼠标单击地图时关闭信息窗口。

 <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles" [disableDefaultUI]="false" [zoomControl]="true"
[scrollwheel]="false" [streetViewControl]="false" [fitBounds]="false" (zoomChange)="onagmZoomChange($event)">


     <agm-marker *ngFor="let c of markers; let i = index" (markerClick)="clickedMarker(infowindow, i)" [latitude]="c.location_details_lat"
  [longitude]="c.location_details_lon" [iconUrl]="m.icon">
           <agm-info-window #infowindow [maxWidth]="320" >
                <div class="info-header">
                     <h2>add: {{ c.add }}</h2>
                </div>
           </agm-info-window>
           </agm-marker>
   </agm-map>

Answer 1

为AgmMap上的mapClick事件添加一个处理程序，该处理程序检查是否有打开的信息窗口，如果有，则将其关闭。由于您已经实现了只打开一个信息窗口的处理程序，因此可能有一个变量保存着打开的窗口，例如：

private singleInfoWindow: AgmInfoWindow = null;

您的AgmMap mapClick事件处理程序可以关闭该infoWindow：

if (this.singleInfoWindow) {
    this.singleInfoWindow.close();
    this.singleInfoWindow = null;
}

Answer 2

最好的解决方案是在您的snazzy-info-window实例上使用closeOnMapClick属性选项：

[closeOnMapClick]= "true"

这取自closeOnMapClick的文档，您可以在其中进一步阅读：https://github.com/atmist/snazzy-info-window#closeonmapclick

当鼠标从角度角度为7的信息窗口中单击时，关闭agm-info-window

2 个答案: