mapbox-gl和Angular 8 click事件无法在移动设备上触发？

编程问答 2022-08-11

问题描述

我有两个使用mapbox-gl的程序：^ 1.11.0。第一个内置于Angular ^ 7.2.15中。 Angular中的第二个〜8.2.14。这两个地图都有一个mgl图层，可在地图上显示边界。这两个地图都有一个mgl-popup，当用户单击边界时应显示。这两个程序都可以使用鼠标或触控板。 Angular ^ 7.2.15中的地图可与移动触摸屏设备一起使用，而Angular〜8.2.14中的地图不显示边界触摸时的弹出窗口。我的理论是，新的Angular〜8.2.14中的现代Web浏览器组件会干扰mapbox触摸事件。将Angular〜8.2.14返回Angular ^ 7.2.15将是一项重大任务。

更新：我在控制台日志中发现了此错误：

enter image description here

错误所指向的事件监听器是mapbox_gl事件监听器。我所有的搜索结果都表明我应该在事件侦听器上设置“ passive：false”，但是由于它是mapbox-gl事件侦听器，而不是我的代码中的事件侦听器，因此我不确定该怎么做。

正在寻找我可能缺少的任何明显的解决方法。

Image of expected behavior

<div class="small-12 cell" id="mapContainer">
<div id="mapboxContainer">
  <!-- <button id="gpsButton" (click)="showGPS = true;" title="Fly to My Location" class="mapbox-gl-draw_ctrl-draw-btn">
      <i class="fas fa-map-marked-alt"></i>
    </button> -->
  <mgl-map id="map" *ngIf="dataLoaded" [style]="mapStyle" style="width: 100%; height:78vh;" [zoom]="[mapZoom]"
    [center]="mapCenter" [cursorStyle]="cursorStyle" (zoom)="mapZoom = map.getZoom();" (load)="map = $event;  
              afterMapLoaded();">
    <mgl-control mglGeolocate [positionOptions]="{enableHighAccuracy: true}" [trackUserLocation]="true"
      position="bottom-right"></mgl-control>

    <mgl-geojson-source *ngIf="fieldBoundariesData" id="fieldboundary-source" [data]="fieldBoundariesData">
    </mgl-geojson-source>

    <mgl-layer *ngIf="fieldBoundariesData" id="fieldBoundariesLayer" type="line" source="fieldboundary-source"
      [paint]='{
                "line-color": "#FF0000","line-width": 1
              }'>
    </mgl-layer>
    <mgl-layer *ngIf="fieldBoundariesData" id="fieldBoundariesClickableLayer" type="fill"
      source="fieldboundary-source" [paint]='{
              "fill-color": "transparent"
            }' (click)="boundaryClicked($event)" (touch)="boundaryClicked($event)" (mouseEnter)="cursorStyle = 'pointer'"
      (mouseLeave)="cursorStyle = ''">
    </mgl-layer>

    <mgl-geojson-source *ngIf="shadedFieldsData" id="selectedfield-source" [data]="shadedFieldsData">
    </mgl-geojson-source>

    <mgl-layer *ngIf="shadedFieldsData" id="selectedFieldLayer" type="fill" source="selectedfield-source" [paint]='{
          "fill-color": "rgba(23,121,186,0.4)"
        }'>
    </mgl-layer>

    <mgl-popup *ngIf="fieldBoundariesData" [feature]="pointInBoundary">
      <span>{{fieldName}}</span><br>
      <!-- [innerHTML]="pointInBoundary.properties?.name" -->
      <!-- *ngIf="pointInBoundary.properties?.name" -->
      <a *ngIf="pointInBoundary.properties?.tempId && pointInBoundary.properties?.canBeMultiPolygon "
        (click)="selectMultiPolygon(pointInBoundary)">Select for MultiPolygon<br></a>
      <a *ngIf="!pointInBoundary.properties?.include && pointInBoundary.properties?.tempId"
        (click)="includeInOrder(pointInBoundary)">Add to Order<br></a>
      <a *ngIf="pointInBoundary.properties?.include && pointInBoundary.properties?.tempId"
        (click)="removeFromOrder(pointInBoundary)">Remove from Order<br></a>
      <a *ngIf="pointInBoundary.properties?.tempId" (click)="editBoundary(pointInBoundary.properties?.tempId)">Edit
        this Boundary<br></a>
      <a *ngIf="pointInBoundary.properties?.include && pointInBoundary.properties?.tempId"
        (click)="editFieldProperties(pointInBoundary.properties?.tempId)">Edit
        Field Properties<br></a>
      <span *ngIf="!pointInBoundary.properties?.tempId" [innerHTML]="pointInBoundary.properties?.tempId"></span>
    </mgl-popup>
  </mgl-map>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularjavascriptmapbox-gl