Angular-google-maps: 单击新的时关闭标记信息窗口吗？

是的，我之前也遇到过同样的问题。

这是工作中的小伙伴
http://plnkr.co/edit/cwuwBN?p=preview

我不能使用这种方法。
我的解决方案已下载源代码，并在文件（google-map-info-window.ts）中包含以下代码：

//在顶部文件中设置此属性，在下面让infoWindowId = 0; （第7行）
让infoWindowLastContext：SebmGoogleMapInfoWindow = null;

open（）：承诺{
if（infoWindowLastContext！== null）{
this._infoWindowManager.close（infoWindowLastContext）
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

我希望这有帮助...

我的仅模板解决方案：

<sebm-google-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <sebm-google-map-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </sebm-google-map-info-window>
</sebm-google-map-marker>

@soyersoyer @lazarljubenovic

<agm-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <agm-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </agm-info-window>
</agm-marker>

使用新的1.0.0-beta.0-green-zebra AOT无法正常工作：
属性“ lastOpen”在类型“ AgmMap”上不存在

会发生什么？

效果很好，我的模板用法调用了一个自定义的click函数，如下所示

(markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"

你好，

即使使用@ Martin-B解决方案，它也不起作用：/

有什么帮助吗？

@ Martin-B感谢您提供解决方案。 工作请客！

@ Martin-B不错，谢谢！
@melbouhy可耻的是我； 忘记在<agm-info-window>添加#infoWindow <agm-info-window> 。 也许您犯了同样的错误？

公共openIW（数据=未定义）{
如果（this.IW）{
this.IW.close（）;
}

this.IW = data;

}

@ Martin-B如何在agm-marker中使用此（（markerClick）=“ gm.lastOpen？.close（）; gm.lastOpen = infoWindow; markerClicked（m）;”），请使用.ts代码进行回复

@menakav这是一个有效的代码：
在.ts文件中：
`
markerClicked（infoWindow）{
if（this.infoWindowOpened === infoWindow）
返回;

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

    this.infoWindowOpened = infoWindow;
}

in .html file: （markerClick）=“ gm.lastOpen？.close（）; gm.lastOpen = infoWindow; markerClicked（m）;”`

@menakav您的代码不适用于我
:(

我测试了该论坛中的所有代码，但我的问题是在这里收到的infoWindow ：

  clickedMarker(infoWindow, index: number) {
    ...
  }

infoWindow始终是第一个，无论我有多少要点。 我总是收到_id = 0的infoWindow 。

参数index接收单击的标记的真实ID...。

这是我的html：

<agm-marker *ngFor="let point of points; let i = index" [latitude]="point.latitude"
                            [longitude]="point.longitude"
                            [iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, i)">
<agm-info-window [disableAutoPan]="true" #infoWindow *ngIf="!isDetailMovil">
        <div class="marker__tittle">{{point.name}}</div>

有什么想法为什么总是出现相同的infoWindow吗？

@soyersoyer的“仅模板”解决方案效果很好。 但是，一旦将初始的agm-marker数组替换为新的marker元素（例如，在ajax更新之后），突然之间，以前的信息窗口将不再自动关闭。 这可能是什么问题？

@markschmid我的解决方法是替换初始的agm-marker数组。
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

我的解决方案基于@lauwrentius答案：

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

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

    this.infoWindowOpened = infoWindow;   
}

@JimmyTheNerd

您能否解释一下如何运行filter(){infoWindowOpened = null;}而不会抛出“无法找到infoWindowOpened”错误？ 更改标记图标阵列后会发生这种情况。

我解决了问题。
我分享了代码：
（markerClick）=“ clickedMarker（infoWindow，point，point.latitude，point.longitude）”>

clickedMarker（data = undefined，currentPoint：any，lat：string，lng：string）{
如果（this.IW）{
this.IW.close（）;
}
const details = data._infoWindowManager._infoWindows;
如果（details.size> 0）{
details.forEach（（element，key）=> {
如果（key.hostMarker.latitude === lat && key.hostMarker.longitude === lng）{
IW =键；
}
}）;
}
}

我希望它会有所帮助。

谢谢你。

2018年4月28日星期六，02：04，克里斯蒂安·埃尔南德斯（Cristian Hernandez） [email protected]
写道：

我解决了问题。
我分享了代码：
[latitude] =“ point.latitude” [longitude] =“ point.longitude”
[iconUrl] =“ iconUrl”（markerClick）=“ clickedMarker（infoWindow，点，
point.latitude，point.longitude）“> [disableAutoPan] =“ true” * ngIf =“！isDetailMovil”>

clickedMarker（data = undefined，currentPoint：any，lat：string，lng：
字符串）{如果（this.IW）{this.IW.close（）; } const详细信息=
data._infoWindowManager._infoWindows; 如果（details.size> 0）{
details.forEach（（element，key）=> {如果（key.hostMarker.latitude === lat &&
key.hostMarker.longitude === lng）{this.IW = key; }}）; }}

我希望它会有所帮助。

-
您收到此邮件是因为有人提到您。
直接回复此电子邮件，在GitHub上查看
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
。

这是我的解决方案。 适用于角度6。
HTML：

<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude"[longitude]="marker.longitude" (markerClick)="markerClick(infoWindow)">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>

打字稿：

lastSelectedInfoWindow: any;
markerClick(infoWindow: any) {
        if (infoWindow == this.lastSelectedInfoWindow) {
            return;
        }
        if (this.lastSelectedInfoWindow != null) {
         try{
            this.lastSelectedInfoWindow.close();
          } catch {} //in case if you reload your markers
        }
        this.lastSelectedInfoWindow = infoWindow;
    }

经过长时间的研究和不明确的解决方案，终于有了一个好的解决方案，可以在打开新的agm-info-window时清除先前的agm-info-window

这是我的component.html：

 <agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
     <div *ngFor="let data of zonas">
        <agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
           <agm-info-window #infoWindow >            
           </agm-info-window>
         </agm-marker>
      </div>
  </agm-map>

这是我的component.ts：

constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
  this.previous_info_window.close()
  }    
}

select_marker(data,infoWindow){
 if (this.previous_info_window == null)
  this.previous_info_window = infoWindow;
 else{
  this.infoWindowOpened = infoWindow
  this.previous_info_window.close()
 }
 this.previous_info_window = infoWindow
}

因此，每次打开新窗口时，它都会检测到该事件并关闭上一个事件，如果用户在地图的任何其他部分中单击窗口外，这也将关闭已打开的窗口

谢谢@JimmyTheNerd ，它为我工作！

我的解决方案基于@lauwrentius答案：

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

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

    this.infoWindowOpened = infoWindow;   
}

谢谢@JimmyTheNerd ，它的工作。

由于此问题最近没有活动，因此已被自动标记为陈旧。 如果没有其他活动发生，它将关闭。 感谢你的贡献。