Question

我正在使用Angular谷歌地图：https://angular-maps.com/。现在作为默认功能，它打开标记内定义的信息窗口。点击任何新标记，它仍保持打开旧窗口。我需要在点击另一个标记时关闭信息窗口。这是HTML代码：

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
          <agm-marker 
              *ngFor="let m of markers; let i = index"
              (markerClick)="clickedMarker(m.label, infoWindow, i)"
              [latitude]="m.lat"
              [longitude]="m.lng"
              [markerDraggable]="m.draggable"                
              [iconUrl]="m.icon">

            <agm-info-window #infoWindow>
              <strong>{{m.name}}</strong><br>
            </agm-info-window>

          </agm-marker>
        </agm-map>

这是点击标记时的代码：

clickedMarker(label: string, infoWindow, marker, index: number) {
     if( this.infoWindowOpened ===  infoWindow)
      return;

    if(this.infoWindowOpened !== null)
    {
     this.infoWindowOpened.close();
    }
    this.infoWindowOpened = infoWindow;
}

页面刷新时有效。但是，只要我刷新标记变量，就会显示以下错误：

ERROR TypeError: Cannot read property 'then' of undefined
at InfoWindowManager.close (info-window-manager.js:48)
at AgmInfoWindow.close (info-window.js:94)
at SearchComponent.clickedMarker (search.component.ts:188)

刷新标记的组件代码：

this.markers.push({
              name: item.Name,  
              lat: parseFloat(item.latitude.toString()),
              lng: parseFloat(item.longitude.toString()),
              draggable: false,      
              icon:'assets/img/marker.png'
            });

Answer 1

您可以将clickedMarker重写为非常简单，如下所示

previous;
...
clickedMarker(infowindow) {
    if (this.previous) {
      this.previous.close();
    }
    this.previous = infowindow;
  }

在模板中更改事件绑定功能

(markerClick)="clickedMarker(infoWindow)"

实时代码为here

Answer 2

您需要在代码中检查未定义：＆＃34; this.infoWindowOpened！== undefined＆＃34;

{{1}}

Answer 3

我有同样的问题infoWindow不会自动关闭。在我的场景中，我有两个按钮可以在地图上显示喜欢和不喜欢的图标。我在每次喜欢和不喜欢的按钮单击时都在 ngOnInint（）中调用 this.infoWindowOpened = null 。因此它将每次单击初始化为null。这样就解决了我的问题。可能对其他人有帮助。

mvn -Dsurefire.suiteXmlFiles=src/test/resources/testng.xml test

Answer 4

我遇到了这个问题，问题在于，当您续订数据时，所有信息窗口都将再次呈现。因此原来的物品不再存在，无法关闭。为避免这种情况，请使用trackBy函数。

在新的标记点击的Angular谷地图关闭信息窗口

4 个答案: