Question

问题是我看不到任何地图，并且在订阅运行时会出现错误。有谁知道如何帮助我？我尝试了一些方法，但他们没有工作 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发送一些参数才能加载Google地图。

{
    "colorsArray" : [ {
        "colorName" : "red",
        "hexValue" : "#f00"
    }, {
        "colorName" : "green",
        "hexValue" : "#0f0"
    }, {
        "colorName" : "blue",
        "hexValue" : "#00f"
    }, {
        "colorName" : "cyan",
        "hexValue" : "#0ff"
    }, {
        "colorName" : "magenta",
        "hexValue" : "#f0f"
    }, {
        "colorName" : "yellow",
        "hexValue" : "#ff0"
    }, {
        "colorName" : "black",
        "hexValue" : "#000"
    } ]
}

谷歌地图不会出现在Ionic2应用程序中

1 个答案: