agm-marker onMouseOver 打开 agm-info-window答案

【问题标题】：agm-marker onMouseOver open agm-info-windowagm-marker onMouseOver 打开 agm-info-window
【发布时间】：2017-10-03 09:44:03
【问题描述】：

我使用Angular Google Maps(AGM) 组件。我需要在标记鼠标悬停时打开信息窗口。如何在我的函数 onMouseOver 中检索 infowindow 实例以打开它？

<agm-map [fitBounds]="latlngBounds" [zoom]="15">
    <agm-marker *ngFor="let m of markers; let i = index"
                [latitude]="m.geoCode.latitude"
                [longitude]="m.geoCode.longitude"
                (mouseOver)="onMouseOver(m)"
                >

        <agm-info-window [disableAutoPan]="false">

            <div>
                <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">test<i class="fa fa-angle-double-right"></i></a>
            </div>

        </agm-info-window>


    </agm-marker>

</agm-map>



onMouseOver(data) {
        ???? /* how to open here the info window?
    }

【问题讨论】：

标签： angular google-maps-api-3

【解决方案1】：

您可以添加一个 mouseOut 事件并创建一个函数来关闭 InfoWindow onMouseOut

    <agm-map #gm [fitBounds]="latlngBounds" [zoom]="15">
    <agm-marker *ngFor="let m of markers; let i = index"
                [latitude]="m.geoCode.latitude"
                [longitude]="m.geoCode.longitude"
                (mouseOver)="onMouseOver(infoWindow, $event)" 
                (mouseOut)="onMouseOut(infoWindow, $event)"
                >

        <agm-info-window [disableAutoPan]="false" #infoWindow>

            <div>
                {{m.name}}
                {{m.rating}}
            </div>
            <div>
                <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">Daje <i class="fa fa-angle-double-right"></i></a>
            </div>

        </agm-info-window>


    </agm-marker>

</agm-map>


onMouseOver(infoWindow, $event: MouseEvent) {
        infoWindow.open();
    }

onMouseOut(infoWindow, $event: MouseEvent) {
        infoWindow.close();
    }

【讨论】：

infoWindow.lastOpen.close();

【解决方案2】：

最后我找到了解决办法：

<agm-map #gm [fitBounds]="latlngBounds" [zoom]="15">
    <agm-marker *ngFor="let m of markers; let i = index"
                [latitude]="m.geoCode.latitude"
                [longitude]="m.geoCode.longitude"
                (mouseOver)="onMouseOver(infoWindow,gm)"
                >

        <agm-info-window [disableAutoPan]="false" #infoWindow>

            <div>
                {{m.name}}
                {{m.rating}}
            </div>
            <div>
                <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right">Daje <i class="fa fa-angle-double-right"></i></a>
            </div>

        </agm-info-window>


    </agm-marker>

</agm-map>


onMouseOver(infoWindow, gm) {

        if (gm.lastOpen != null) {
            gm.lastOpen.close();
        }

        gm.lastOpen = infoWindow;

        infoWindow.open();
    }

【讨论】：

嗨皮佐尼。我想在特定位置打开 MapLoad 上的 agm-snazzy-info-window。（没有 MapCLick）我正在使用 Angular 4。你能帮忙吗？
@Pizzoni Alessio 我收到 infoWindow 没有 .open() 函数的错误
@John 在标记中你有传递信息窗口吗？ (mouseOver)="onMouseOver(infoWindow,gm)"

【解决方案3】：

就我而言，onMouseover() 仅在我将其设置为时才有效

onMouseOver(infoWindow, gm) {

  if (gm.lastOpen && gm.lastOpen.isOpen) {
    gm.lastOpen.close();
  }

  gm.lastOpen = infoWindow;

  infoWindow.open();
}

【讨论】：

每当 infoPane 因其他原因关闭（用户单击关闭）时，我都会收到上述解决方案的错误，所以我尝试了这个.. 但这不起作用，因为 gm.lastOpen.isOpen 总是错误，所以现在所有 infoPanes 都没有关闭