0

我正在尝试在我的 Ionic2 应用程序中使用谷歌地图，如此处所述，但是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必须在项目目录下执行，否则无效！

4

1 回答 1

2

但是新的 google.maps.Map 行有一个错误，如下所示，所以我想我在我的页面上看不到地图：

你得到的错误是这样的Cannot find name google？如果是这样，它只是抱怨对谷歌对象typescript一无所知。这不是错误，无论如何都应该编译您的代码。

如果您不想收到该警告，您可以通过执行以下命令安装谷歌地图的定义（以便打字稿可以了解其属性和方法）：

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'">
于 2016-07-05T05:09:01.770 回答