Ionic2 google 映射 api 错误

Question

我正在尝试在我的 Ionic2 应用程序中使用 google 映射，如 here 所述，但是 new google.maps.Map 行上有如下错误，所以我想我看不到我页面上的地图：

我的app.ts

import { Component, ViewChild, provide } from '@angular/core';
import { App, ionicBootstrap, Platform, Nav, Config } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import {AuthHttp, AuthConfig} from 'angular2-jwt';

import { StartPage } from './pages/start/start.component';
import { FarmList } from './pages/farmList/farmList.component';
import { Slider } from './pages/slider/slider.component';
import { ProfilePage } from './pages/profile/profile.component';

@Component({
  templateUrl: 'build/app.html',
  styleUrls: ['/app.scss'],
  providers:[
    provide(AuthHttp, {
      useFactory: (http) => {
        return new AuthHttp(new AuthConfig, http);
      },
      deps: [Http]
    })
  ]
})


export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Slider;

  pages: Array<{title: string, component: any, name: any}>

  constructor(private platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [

      { title: 'Start', component: StartPage , name:'home' },
      { title: 'Farms', component: FarmList, name: 'list' },
      { title: 'Profile', component: ProfilePage, name: 'contact' },
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

ionicBootstrap(MyApp,[HTTP_PROVIDERS]);

我的index.html:

<body>

  <ion-app></ion-app>

  <script src="http://maps.google.com/maps/api/js"></script>
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

我的组件：

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

@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

    map:any

  constructor( private navController: NavController, private platform: Platform) {

    this.initializeMap();
  }

   initializeMap() {

        this.platform.ready().then(() => {
            var minZoomLevel = 12;

            this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(38.50, -90.50),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        });
    }   
}

我的HTML:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Start</ion-title>
</ion-navbar>


<ion-content padding class="page1">

    <div padding>
        <img src="images/icon_transperent.png" width="200"/>
    </div>

    <div id="map_canvas"></div> 

</ion-content>

我的 SCSS：

#map_canvas {
    width: 100%;
    height: 100%;
}

这里到底出了什么问题？

更新：完整的控制台截图

更新：

typings install dt~google.maps --global必须在工程目录下执行，否则无效！

Answer 1

however there is a error on new google.maps.Map line as follows and so I guess I can not see map on my page:

您遇到的错误类似于 Cannot find name google？如果是这样，那只是 typescript 抱怨对 google 对象一无所知。这不是错误，无论如何都应该转译您的代码。

如果你不想得到那个警告你可以安装definition for google maps（这样打字稿可以知道它的属性和方法）通过执行：

typings install google.maps --global

我要在您的代码中更改的内容是：

export class StartPage {

  // remove this line, by adding private platform : Platform as a parameter
  // in the constructor already creates an instance of the platform
  // platform : any

  // I've added the private keyword to platform, remember that setting this to
  // public / private is mandatory in the constructor, and by doing that you are
  // creating a variable called platform and asigning it the Platform object by
  // Dependency Injection.
  constructor( private navController: NavController, private platform: Platform) {

    // You don't need this because of what I say in the constructor's comment.
    // this.platform=platform

    this.initializeMap();
  }

========================================

编辑：

关于您刚刚添加的新错误，我认为问题是因为您在 index.html 中定义的内容安全策略。让我们尝试添加一个非常宽松的策略，它基本上允许我们加载任何资源。根据您的应用程序，您可能会考虑提供更严格的政策，但开放政策有利于发展：

修改您的 www/index.html 文件以包含以下元标记：

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'">

Ionic2 google 映射 api 错误

Ionic2 google maps api error

google-maps-api-3

typescript

ionic2

ionic3

angular

更新：