Angular Google Maps在Android端无法显示标记的问题求助

我在自己的移动端应用里用@angular/google-maps实现地图功能，之前试过capacitor/google-map，但因为需要自定义聚合图标，那个库本身不支持这个需求，所以才转用Angular的Google Maps组件。现在网页端和iOS端的标记都能正常显示，唯独Android上完全看不到标记，有没有朋友遇到过类似的问题呀？

我的模板代码： #

<div class="map__wrapper">
  <div class="map__container">
    <google-map 
      [width]="'100%'" 
      [height]="'100%'" 
      [center]="center" 
      [zoom]="zoom" 
      [mapId]="'google-map'" 
      [options]="mapOptions">
      @if (userPosition) {
        <map-marker 
          [position]="userPosition" 
          [options]="{ 
            icon: { 
              url: '/assets/images/blue-car.png', 
            }, 
          }" 
        ></map-marker>
      }
      <map-marker-clusterer [renderer]="clusterRenderer">
        @for (stationPosition of stationPositions; track stationPosition) {
          <map-marker 
            [position]="stationPosition" 
            [options]="{ 
              icon: { 
                url: getMarkerContent('default'), 
              }, 
            }" 
          />
        }
      </map-marker-clusterer>
    </google-map>
  </div>
</div>

组件逻辑代码： #

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { StationsService } from '../../core/services/stations.service';
import { Station } from '@utils/interfaces/stations.interface';
import { Cluster, GoogleMapsModule, MapMarkerClusterer, Renderer } from '@angular/google-maps';
import { Icons } from '@utils/enums/icons.enum';
import { Geolocation } from '@capacitor/geolocation';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  standalone: true,
  imports: [IonicModule, GoogleMapsModule, MapMarkerClusterer],
})
export class MapComponent implements AfterViewInit {
  private stationsService = inject(StationsService);
  public stations!: Station[];
  public stationPositions: google.maps.LatLngLiteral[] = [];
  public center: google.maps.LatLngLiteral = { lat: 49.2268, lng: 31.5, };
  public zoom: number = 5;
  public mapOptions: google.maps.MapOptions = {
    disableDefaultUI: true,
  };
  public userPosition?: google.maps.LatLngLiteral;

  constructor() {}

  public async ngAfterViewInit() {
    await this.locateUser();
    this.initStations();
  }

  public clusterRenderer: Renderer = {
    render: ({ count, position }: Cluster) => {
      return new google.maps.Marker({
        position,
        icon: {
          url: '/assets/icons/cluster-icon.svg',
          scaledSize: new google.maps.Size(36, 44),
          anchor: new google.maps.Point(18, 44),
          labelOrigin: new google.maps.Point(18, 18),
        },
        label: {
          text: String(count),
          color: '#000',
          fontSize: '16px',
          fontWeight: '700',
        },
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
      });
    },
  };

  public getMarkerContent(status: string): string {
    switch (status) {
      case 'default':
        return Icons.MarkerDefault;
      case 'active':
        return Icons.MarkerActive;
      case 'disabled':
        return Icons.MarkerDisabled;
      case 'noConnection':
        return Icons.MarkerNoConnection;
      default:
        return Icons.MarkerDefault;
    }
  }

  private async locateUser() {
    try {
      const permission = await Geolocation.requestPermissions();
      if (permission.location !== 'granted') {
        await Geolocation.requestPermissions();
      }
      const position = await this.getUserPosition();
      this.userPosition = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
      this.center = this.userPosition;
      this.zoom = 13;
    } catch {
      console.error('Geolocation is not supported.');
    }
  }

  private async getUserPosition(): Promise<GeolocationPosition> {
    return new Promise<GeolocationPosition>((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        enableHighAccuracy: true,
        timeout: 8000,
      });
    });
  }

  private initStations(): void {
    this.stationsService.getChargingStations().subscribe((stations) => {
      this.stations = stations;
      this.stationPositions = stations.map((item) => {
        const [lat, lng] = item.location.coordinates.coordinates;
        return { lat, lng };
      });
    });
  }
}

我已经尝试过这些方法，但都没解决问题：

• 把图标从SVG格式换成了PNG格式，没有效果
• 确认了后端确实返回了所有站点的点位数据，排除了数据为空的可能

内容来源于stack exchange