如何使用电容器/谷歌地图插件将 KML 图层添加到 Google 地图

Question

我正在使用 @capacitor/google-maps 插件使用以下代码将地图添加到离子应用程序。

  import { GoogleMap, Marker } from '@capacitor/google-maps';

  async createMap() {
    const mapsKey = 'XXXXXXXXXXXXXXXXXXXXXXXXXXX';
    this.map = await GoogleMap.create({
      forceCreate: true,
      id: 'map',
      element: this.mapRef.nativeElement,
      apiKey: mapsKey,
      config: {
        center: this.mapLoc,
        zoom: this.mapZoom,
      },
    });
    await this.addMarkers();
  }
  
  async addMarkers() {
    const markers: Marker[] = [
      {
        coordinate: { lat: 50.90778268021916, lng: -114.10515149551082, },
        title: 'My House',
        snippet: "'Best place on earth'"
      },
      {
        coordinate: { lat: 50.90778268021980, lng: -114.10515149551000, },
        title: 'random place',
        snippet: "Not sure"
      },
    ];
    
    await this.map.addMarkers(markers);

    this.map.setOnMarkerClickListener(async (marker) => {
      this.openMessage(marker)
    });
  }

Angular 使用以下内容导入 KML 图层

  // google-maps-demo.component.ts
  import {Component} from '@angular/core';
  import {GoogleMap, MapKmlLayer} from '@angular/google-maps';

  @Component({
    selector: 'google-map-demo',
    templateUrl: 'google-map-demo.html',
    standalone: true,
    imports: [GoogleMap, MapKmlLayer],
  })
  export class GoogleMapDemo {
    center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
    zoom = 4;

    kmlUrl = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
  }


  <!-- google-maps-demo.component.html -->
  <google-map height="400px" width="750px" [center]="center" [zoom]="zoom">
    <map-kml-layer [url]="kmlUrl" />
  </google-map>

我一直在浏览@capacitor/google-maps插件文档并在线搜索有关向插件添加图层的任何信息。这是可能的还是我应该删除插件并在 ionic 应用程序中使用 Angular？

Answer 1

事实证明，目前还没有办法使用 @capacitor/google-maps 插件来实现这一点。事实上，我发现该插件与现有功能至少有 5 个错误。我将继续使用 @angular/google-maps，因为它具有大部分 Google 地图功能。