在新标记上单击Angular谷歌地图关闭信息窗口 [英] Angular google map close info window on new marker click

问题描述

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

I am using Angular google map: https://angular-maps.com/. Right now as default functionality, it open the info-window defined inside marker. And on click of any new marker it remains open old window. I need to close info window on click of another marker. This is html code:

<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>

这是单击标记时的代码:

this is code when marker is clicked:

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

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

页面刷新时有效.但是，一旦刷新标记变量，它就会显示此错误:

It works when the page refresh. But as soon as I refresh markers variable it show this error:

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'
            });

推荐答案

您可以非常简单地重写clickedMarker，如下所示:

You can rewrite your clickedMarker very simple as follows

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

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

Make the change to your event binding function in the template

(markerClick)="clickedMarker(infoWindow)"

实时代码位于此处

这篇关于在新标记上单击Angular谷歌地图关闭信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！