如何在 ngx-mapbox-gl 中的标记上鼠标悬停时显示弹出窗口

Question

我目前正在单击标记时显示标记和弹出窗口。现在，我们需要在悬停上显示弹出窗口。

我的模板如下：

<mgl-map #map1 
    [style]="'mapbox://styles/mapbox/streets-v11'" 
    [zoom]="[4]"
    [maxZoom]="maxZoom"
    [center]="[-95.7129, 37.0902]"
    [fitBounds]="bounds"
    [fitBoundsOptions]="boundsOptions">
    <mgl-control mglNavigation [showCompass]="false"></mgl-control>
    <ngContainer *ngFor="let deal of unlockedDeals">
        <mgl-marker #myMarker [lngLat]="lngLat[deal.deal_id]">
            <div class="marker"></div>
            <span><b>{{ deal.deal_name }}</b></span>
        </mgl-marker>
        <mgl-popup [marker]="myMarker" class="" [closeButton]="true" [closeOnClick]="false"
            [anchor]="'top'">
            <div class="marker-popup-details">
             custom popup
            </div>
        </mgl-popup>
    </ngContainer>
</mgl-map>

与组件中的映射无关。

Answer 1

您需要一个带有MOUSETOUT和鼠标>事件的标记和一个弹出窗口：

<mgl-popup *ngIf="hoverFeature" [lngLat]="hoverFeature.geometry.coordinates" [closeButton]="false">
    <span>{{hoverFeature.properties.title}}</span>
</mgl-popup>
<mgl-marker [lngLat]="otherFeature.geometry.coordinates" anchor="bottom">
    <div (mouseover)="hoverFeature = otherFeature" (mouseout)="hoverFeature = null">
        {{otherFeature.properties.title}}
    </div>
</mgl-marker>