Ionic 离子谷歌Map不显示的iOS设备与Angular

tuwxkamq  于 2022-12-09  发布在  Ionic
关注(0)|答案(1)|浏览(170)

我目前正在做一个Ionic项目,我想在我的应用程序中包含GoogleMap。因此,我咨询了official capacitor Google Maps plugin。我让它在网络上工作,但在iOS设备上我的Map没有显示。
"我做了什么"
1.安装所需的软件包:

npm install @capacitor/google-maps
npx cap sync

1.更新了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>

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

版本

  • 离子型6.19.1

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

**编辑:**我读到我的M1 MacBook不支持谷歌MapSDK。因此,我在本地iPhone上安装了该应用程序,但不幸的是,这并没有解决我的问题。

new9mtju

new9mtju1#

我终于找到了我的问题的答案。当你使用插件时,你需要在你使用的每个@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 {}

希望这对你有帮助!

相关问题