Ionic 5 Google Maps 标记在缩放时闪烁

Posted 2023-03-16

【中文标题】Ionic 5 Google Maps 标记在缩放时闪烁

【英文标题】：Ionic 5 Google Maps markers flickering when zooming

【发布时间】：2021-03-24 23:35:54

【问题描述】：

我的 Ionic 5 项目中存在 Google 地图标记问题，该项目仅与原生 android 版本隔离。

放大或缩小时，我的自定义标记闪烁/闪烁。 闪烁在其他平台上不是问题。仅在原生 Android 上。

任何想法都将不胜感激。

这里在标记代码的sn-p中

  addMarker(station: StationModel, showMemberDiscount: boolean, index: number) 
    let selectedPrice = showMemberDiscount? station.selectedFuelTypePrice.discountedPrice : station.selectedFuelTypePrice.price;

    this.getMarkerIcons(station, showMemberDiscount).pipe(takeUntil(this.destroyed$)).subscribe(
      icons => 
        let marker = new google.maps.Marker(
          position:  lat: station.location.position.latitude, lng: station.location.position.longitude ,
          label: 
            text:  selectedPrice.toFixed(1) + '',
            color: '#FFFFFF',
            fontSize: '20px',
            fontWeight: 'bold',
          ,
          icon: icons.iconDefault,
          zIndex: index,
          map: this.map,
        );
        marker.addListener('click', () => 
          this.ngZone.run(() => 
            // reset previous active marker if there's one
            this.clearActiveMarker(true);
            this.map.panTo(marker.getPosition());
            // store the default icon for selected marker
            this.activeMarkerDefaultIcon = marker: marker, icon: icons.iconDefault, zIndex: marker.getZIndex();
            this.selectedStation.next(station);
            marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
            marker.setIcon(icons.iconSelected);
          );
        );
        this.markers.push(marker);
      );
  

【问题讨论】：

调试和生产版本都发生这种情况吗？ ionic cordova build android --prod

是的，发生在调试和生产版本上。我们正在使用电容器。命令是...ionic capacitor build android --prod

【参考方案1】：

将硬件加速设置为 false 解决了闪烁标记问题

<application android:hardwareAccelerated="false" ...>

https://developer.android.com/guide/topics/graphics/hardware-accel