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

【问题标题】：How to show popup on mouse hover of marker in ngx-mapbox-gl如何在 ngx-mapbox-gl 中的标记鼠标悬停时显示弹出窗口
【发布时间】：2022-07-09 01:52:50
【问题描述】：

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

我的模板如下：

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

组件中没有与地图相关的代码。

【问题讨论】：

标签： angular mapbox mapbox-gl-js mapbox-marker

【解决方案1】：

您需要一个带有mouseout 和mouseover 事件的标记和一个弹出窗口：

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

【讨论】：