带有 Angular 的 iOS 设备未显示离子谷歌地图答案

【问题标题】：Ionic Google Maps not showing for iOS-Devices with Angular带有 Angular 的 iOS 设备未显示离子谷歌地图
【发布时间】：2022-06-12 17:07:46
【问题描述】：

我目前正在从事一个 Ionic 项目，我想在我的应用程序中包含 Google 地图。因此，我咨询了official capacitor Google Maps plugin。我可以在网络上使用它，但在 iOS 设备上我的地图没有显示。

** 我做了什么？ **

安装所需的包：

npm install @capacitor/google-maps
npx cap sync

更新了 Info.plist 文件 (/Users//project/ios/App/App/Info.plist)。设置以下参数：

<key>NSLocationAlwaysUsageDescription</key>
<string>Privacy We need your Location Always</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Privacy We need your Location when App is in usage</string>

更新了 Angular 项目并添加了一个组件

map.component.html:
<capacitor-google-maps #map></capacitor-google-maps>
<ion-button (click)="createMap()">Create Map</ion-button>

map.component.scss:
capacitor-google-maps {
  display: inline-block;
  width: 275px;
  height: 400px;
  border: 3px solid red; 
}


map.component.ts:
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
  @ViewChild('map')
  mapRef: ElementRef<HTMLElement>;
  newMap: GoogleMap;


  constructor() {
  }

  ngOnInit() { }

  async createMap() {
    this.newMap = await GoogleMap.create({
      id: 'my-map',
      element: this.mapRef.nativeElement,
      apiKey: key,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }

}

** 版本**

离子 6.19.1

当我使用命令Ionic capacitor run ios -l —external 启动我的应用程序时，模拟器就会启动。此外，在我的网络浏览器中，如果我按下按钮，地图就会打开。但在我的 iOS 环境中它不起作用。有什么建议么？提前谢谢！

编辑： 我读到我的 M1 MacBook 不支持 Google Maps SDK。因此，我在本地 iPhone 上安装了该应用，但不幸的是，这并没有解决我的问题。

【问题讨论】：

标签： angular google-maps ionic-framework

【解决方案1】：

我终于找到了我的问题的答案。当您使用插件时，您需要在您使用的每个 @NgModule-Schema 中导入 CUSTOM_ELEMENTS_SCHEMA。请参见下面的示例：在我的情况下，我必须将它导入到我的 tab-map.module.ts 和我的 app.module.ts 中。

tab-map.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabMapPage } from './tab-map.page';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { TabMapPageRoutingModule } from './tab-map-routing.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabMapPageRoutingModule
  ],
  declarations: [TabMapPage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TabMapPageModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

希望这会有所帮助！

【讨论】：