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

Question

问题是我没有看到任何地图，并且在订阅运行时出现错误。有谁知道如何帮助我？ 我tryied某些方面BTU他们不工作 google-maps-into-ionic-2或google maps from ionic native

HTML：

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

Trypescript：

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!'); 
    }); 

} 
}