Ionic 3 Google 地图在 Android + IOS 上不显示

Posted 2023-03-27

【中文标题】Ionic 3 Google 地图在 Android + IOS 上不显示

【英文标题】：Ionic 3 Google Map does not display on Android + IOS

【发布时间】：2017-12-31 11:25:46

【问题描述】：

我使用 Ionic 3 版本，并尝试在我的应用程序中添加一个页面，以显示带有标记的地图。 我已经在我的应用程序中使用了用于自动完成的 Google 地图 ID（Google 地方...）。 我访问了 Google API，并将 Map Embed、javascript 等添加到我的 API 密钥中。 但是页面底部出现“谷歌”和显示按钮“，但地图是空的。 见附件...

安装 Cordova 和 Ionic Native 插件：

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_android="AIzaSyB6mEnxH4vC+++++++++9wnXXNNmK2co" --variable API_KEY_FOR_ios="AIzaSyB6mEnxH4v++++++++++++++ wnXXNNmK2co" $ npm install --save @ionic-native/google-maps

Home.ts：

import  NavController  from 'ionic-angular';
import  Component, ViewChild, ElementRef  from '@angular/core';
import  GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker  from "@ionic-native/google-maps";

@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)

export class HomePage 

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) 

  
  ngAfterViewInit() 
 this.loadMap();


loadMap() 
 // make sure to create following structure in your view.html file
 // and add a height (for example 100%) to it, else the map won't be visible
 // <ion-content>
 //  <div #map id="map" style="height:100%;"></div>
 // </ion-content>

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => 
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   
 );

 // create CameraPosition
 let position: CameraPosition = 
   target: 
     lat: 43.0741904,
     lng: -89.3809802
   ,
   zoom: 18,
   tilt: 30
 ;

 // move the map's camera to position
 

主页.HTML

Home.html :
<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>
 
<ion-content>
<div #map id="map" style="height:100%;"></div> 
</ion-content>

首页.scss

page-home 

【问题讨论】：

添加相关的 HTML 和 CSS（如果有）。

我编辑了我的 aks 并添加了 html 和 css。

【参考方案1】：

不要使用ngAfterViewInit。 你必须等待platform.ready()

// Wait the native plugin is ready.
platform.ready().then(() => 
  this.loadMap();
);

完整代码是https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md

回购：https://github.com/mapsplugin/ionic-google-maps

---

当前官方文档页面错误。我发送了一个拉取请求，但它现在正在等待。 https://github.com/ionic-team/ionic-native/pull/1834

【讨论】：

您好，我尝试了您的问题，但地图仍然没有出现。

在此之后，我按照您发送的链接的文档进行操作，但仍然没有出现地图。我想我的问题来自我的 API。您能否告诉我如何配置 API 以用于 Google 自动完成 + 使地图出现。

我在最新的代码中发现了一个错误。请尝试重新安装插件或为第二个参数指定相机选项。 github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/…

该错误已在@ionic-native/core 和@ionic-native/google-maps ver4.2.0 中修复，请重新安装这两个包。 npmjs.com/package/@ionic-native/corenpmjs.com/package/@ionic-native/google-maps

【参考方案2】：

请尝试以下代码并确保您使用正确的 API 密钥，在您的 .ts 文件中写入以下代码：

  ionViewDidLoad() 
    this.loadMap();
   
   loadMap() 

        let mapOptions: GoogleMapOptions = 
          camera: 
            target: 
              lat: 43.0741904,
              lng: -89.3809802
            ,
            zoom: 18,
            tilt: 30
          
        ;

        this.map = this.googleMaps.create('map_canvas', mapOptions);

        // Wait the MAP_READY before using any methods.
        this.map.one(GoogleMapsEvent.MAP_READY)
          .then(() => 
            console.log('Map is ready!');

            this.map.addMarker(
                title: 'Ionic',
                icon: 'blue',
                animation: 'DROP',
                position: 
                  lat: 43.0741904,
                  lng: -89.3809802
                
              )
              .then(marker => 
                marker.on(GoogleMapsEvent.MARKER_CLICK)
                  .subscribe(() => 
                    alert('clicked');
                  );
              );

          );
      

在您的 .html 文件中定义如下地图

<ion-content>
  <div id="map_canvas" style="height: 100%;"></div>
</ion-content>