无法将 Google 地图集成到我的 ionic 2 应用程序

Question

我正在尝试将谷歌地图放入我的应用程序中。

添加了 GMaps 插件。

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my android api" --variable API_KEY_FOR_IOS="my ios api"

添加了必要的依赖项。

npm install

但是，当我尝试运行该应用程序时，我收到此运行时错误。

**Runtime Error**
Uncaught (in promise): [object Object]
**Stack**
Error: Uncaught (in promise): [object Object]
    at s (http://localhost:8100/build/polyfills.js:3:4211)
    at s (http://localhost:8100/build/polyfills.js:3:4034)
    at http://localhost:8100/build/polyfills.js:3:4574
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723)
    at Object.onInvokeTask (http://localhost:8100/build/main.js:35879:37)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659)
    at e.runTask (http://localhost:8100/build/polyfills.js:3:7083)
    at i (http://localhost:8100/build/polyfills.js:3:3671)
    at HTMLAnchorElement.invoke (http://localhost:8100/build/polyfills.js:3:10876)

这是打字稿代码：

import {Component} from "@angular/core";
import {
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapsLatLng,
  GoogleMapsMarker,
  Geolocation
} from 'ionic-native';


@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  private _latitude: number;
  private _longitude: number;

  constructor() {}

  ngAfterViewInit() {
    let map = new GoogleMap(document.getElementById('map'));

    // when the map is ready
    map.one(GoogleMapsEvent.MAP_READY).then(() => {
      Geolocation.getCurrentPosition().then(pos => {
        this._latitude = pos.coords.latitude;
        this._longitude = pos.coords.longitude;

        // move the camera
        map.moveCamera({
          target: new GoogleMapsLatLng(this._latitude, this._longitude),
          zoom: 18,
          tilt: 30
        }).then(() => {

          // add a marker
          map.addMarker({
            position: new GoogleMapsLatLng(this._latitude, this._longitude),
            title: 'You are here!'
          })

            // show marker info
          .then((marker: GoogleMapsMarker) => {
            marker.showInfoWindow();

            // listen to all available events
            map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
              () => {
                alert('MAP_CLICK');
              });

            map.on(GoogleMapsEvent.MAP_LONG_CLICK).subscribe(
              () => {
                alert('MAP_LONG_CLICK');
              });

            map.on(GoogleMapsEvent.MY_LOCATION_CHANGE).subscribe(
              () => {
                alert('MY_LOCATION_CHANGE');
              });

            map.on(GoogleMapsEvent.MY_LOCATION_BUTTON_CLICK).subscribe(
              () => {
                alert('MY_LOCATION_BUTTON_CLICK');
              });

            map.on(GoogleMapsEvent.INDOOR_BUILDING_FOCUSED).subscribe(
              () => {
                alert('INDOOR_BUILDING_FOCUSED');
              });

            map.on(GoogleMapsEvent.INDOOR_LEVEL_ACTIVATED).subscribe(
              () => {
                alert('INDOOR_LEVEL_ACTIVATED');
              });

            map.on(GoogleMapsEvent.CAMERA_CHANGE).subscribe(
              () => {
                alert('CAMERA_CHANGE');
              });

            map.on(GoogleMapsEvent.CAMERA_IDLE).subscribe(
              () => {
                alert('CAMERA_IDLE');
              });

            map.on(GoogleMapsEvent.MAP_READY).subscribe(
              () => {
                alert('MAP_READY');
              });

            map.on(GoogleMapsEvent.MAP_LOADED).subscribe(
              () => {
                alert('MAP_LOADED');
              });

            map.on(GoogleMapsEvent.MAP_WILL_MOVE).subscribe(
              () => {
                alert('MAP_WILL_MOVE');
              });

            map.on(GoogleMapsEvent.MAP_CLOSE).subscribe(
              () => {
                alert('MAP_CLOSE');
              });

            map.on(GoogleMapsEvent.MARKER_CLICK).subscribe(
              () => {
                alert('MARKER_CLICK');
              });

            map.on(GoogleMapsEvent.OVERLAY_CLICK).subscribe(
              () => {
                alert('OVERLAY_CLICK');
              });

            map.on(GoogleMapsEvent.INFO_CLICK).subscribe(
              () => {
                alert('INFO_CLICK');
              });

            map.on(GoogleMapsEvent.MARKER_DRAG).subscribe(
              () => {
                alert('MARKER_DRAG');
              });

            map.on(GoogleMapsEvent.MARKER_DRAG_START).subscribe(
              () => {
                alert('MARKER_DRAG_START');
              });

            map.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
              () => {
                alert('MARKER_DRAG_END');
              });

          });
        });
      });
    });
  }
}

找不到问题出在哪里，好像是依赖或插件问题。

Answer 1

您可能必须先构建或在模拟器上运行应用程序，因为适用于 ionic 的谷歌地图 SDK 无法在浏览器上运行。

使用ionic run android 在模拟器上运行应用程序或
构建应用ionic build android