谷歌地图不显示在 Ionic2 应用程序中

Question

问题是我没有看到任何地图，并且在订阅运行时出现错误。有谁知道如何帮助我？ 我尝试了一些方法，但它们不起作用 google-maps-into-ionic-2 或 google maps from ionic native

HTML：

<button (click)="getMapresults()"></button>
<ion-content>
   <div id="mapid"></div>
</ion-content>

打字稿：

import {Component, ViewChild, OnInit, NgZone} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {
  Geolocation, GoogleMap, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsMarkerOptions,
  CameraPosition, GoogleMapsLatLng
} from "ionic-native";
import {Observable} from "rxjs/Rx";
private gMap: GoogleMap;

location: {lat: number, lng: number};

constructor(public navCtrl: NavController,
            public platform:Platform
) {}

getMapresults() {
   this.platform.ready().then(()=>{
      console.log('Platform ready!');
      this.gMap = new GoogleMap('mapid');

      this.gMap.on(GoogleMapsEvent.MAP_READY)
      .subscribe(()=>{
        console.log('Map!');
      });

}

错误：

Uncaught (in promise): [object Object]

package.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "^2.1.1",
    "@angular/compiler": "^2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "^2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "^2.1.1",
    "@angular/platform-browser-dynamic": "^2.1.1",
    "@angular/platform-server": "^2.1.1",
    "@ionic/storage": "1.1.6",
    "angular2-google-maps": "^0.16.0",
    "ionic-angular": "2.0.0-rc.3",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.45",
    "typescript": "2.0.6"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "firstMobApp: An Ionic project"
}

Answer 1

您的代码几乎没有问题。您需要向 Google 地图 API 发送一些参数才能加载谷歌地图。

 import { Component } from '@angular/core';
 import { NavController, Platform } from 'ionic-angular';
 import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';

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

export class HomePage {

map: GoogleMap;

constructor(public navCtrl: NavController, public platform: Platform) {
    platform.ready().then(() => {
        this.loadMap();
    });
}

loadMap(){

    let location = new GoogleMapsLatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log('Map is ready!');
    });

}
}