使用插件时，谷歌地图未在 Ionic 上显示答案

【问题标题】：Google maps not showing on Ionic when the plugin is used使用插件时，谷歌地图未在 Ionic 上显示
【发布时间】：2018-04-26 00:59:11
【问题描述】：

我想在我的应用程序中显示地图，但 Google 地图没有显示。我已经在 Ionic 上创建了应用程序，并且使用了 Cordova Google Maps 插件。 Here 是我的代码的链接。请帮我。

【问题讨论】：

标签： google-maps ionic-framework

【解决方案1】：

尝试将其添加到 config.xml 插件列表中：

<plugin name="cordova-plugin-googlemaps" spec="~2.0.6">
    <variable name="API_KEY_FOR_ANDROID" value="Your_key" />
</plugin>

【讨论】：

你也可以使用标签，并在其中直接打开谷歌地图。因为我也可能面临问题，所以我写了同样的。
非常感谢。添加 iframe 使其工作。感谢一百万次。
嘿，它昨天工作，但今天又停止工作了
检查我昨天在讨论聊天中发送的代码，让我知道它是否有效。

【解决方案2】：

您是否已在 Google 地图中注册并为您的应用添加了 API KEY？

【讨论】：

控制台有错误吗？该指令是否向页面添加了任何内容？
当我使用 ionic lab 运行时出现以下错误：GET google-analytics.com/analytics.js (anonymous) @ ionic-lab:124 (anonymous) @ ionic-lab:125 否则没有错误
您是将应用程序部署到手机还是使用它或桌面？它可能无法在桌面上运行 - 尝试将其部署到手机上
我也在手机上部署了它，但仍然出现空白屏幕。
我看不到 npmjs.com/package/@ionic-native/google-maps 它应该添加到依赖项中

【解决方案3】：

这是有效的代码：

import { Component } from '@angular/core';


import { NavController } from 'ionic-angular';
import { GoogleMap, GoogleMaps, LatLng, CameraPosition, GoogleMapsEvent } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public googleMaps: GoogleMaps) {

  }

  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {
    let element = document.getElementById('map');
    let map: GoogleMap = this.googleMaps.create(element, {});
    let latlng = new LatLng(40.7128, -74.0059);


    map.one(GoogleMapsEvent.MAP_READY).then(() => {
        let position: CameraPosition = {
      target: latlng,
      zoom: 10,
      tilt: 30
        }
        map.moveCamera(position);
    })
  }

}

在你的 HTML 文件中

<div #map id="map" style="height:100%;"></div>

这是教程：http://tphangout.com/ionic-2-google-maps/

【讨论】：

【解决方案4】：

1.打开项目目录并在cmd中运行

 ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="api key" -variable API_KEY_FOR_IOS="api key here"

2.在特定的地图页面添加这个

declare var google;

3.同班

    ionViewDidLoad() {
    if (this.global.checkNetwork() == true) {
      this.initializeMap();
    }
    else {
      this.showAlert("Internet is not available");
    }
  }

  initializeMap() {

    let locationOptions = { timeout: 20000, enableHighAccuracy: true };

    navigator.geolocation.getCurrentPosition(

      (position) => {

        let options = {
          center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        this.map = new google.maps.Map(document.getElementById("map_canvas"), options);
      },

      (error) => {
        console.log(error);
      }, locationOptions
    );
  }

4.in home.html

    <ion-content>
    <!-- <button ion-button (click)="presentModal()">presentModal</button> -->
    <div id="map_canvas"></div>
</ion-content>

5.in home.scss

page-home {
    #map_canvas {
        width: 100%;
        height: 100%;
    }
}

包含在您的 src/index.html 文件中（在 cordova.js 文件上方）：

就是这样

【讨论】：