Angular google地图在新标记单击时关闭信息窗口
Angular google地图在新标记单击时关闭信息窗口
提问于 2018-02-27 15:50:14
我使用的是角度谷歌地图：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'
});回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-31 17:59:31
您可以非常简单地重写clickedMarker，如下所示
previous;
...
clickedMarker(infowindow) {
if (this.previous) {
this.previous.close();
}
this.previous = infowindow;
}在模板中对事件绑定函数进行更改
(markerClick)="clickedMarker(infoWindow)"实时代码是here
Stack Overflow用户
发布于 2018-03-29 20:42:10
您需要检查代码中是否有未定义的内容："this.infoWindowOpened !==未定义“
public clickedMarker(label: string, infoWindow: any, marker: any, index: number) {
if (this.infoWindowOpened === infoWindow) {
console.log("window already opened");
return;
}
if (this.infoWindowOpened !== null && this.infoWindowOpened !== undefined) {
this.infoWindowOpened.close();
}
this.infoWindowOpened = infoWindow;
}Stack Overflow用户
发布于 2020-07-08 06:02:08
我有这个问题，问题是当你更新数据时，所有的信息窗口都会被再次渲染。所以原件已经不复存在，无法关闭。要避免这种情况，请使用trackBy函数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49003652
复制相关文章
相似问题