0

我正在尝试基于 Tabs 模板将 Google 地图插入到我的 Ionic 2 应用程序中。

在我尝试在构造函数this.map方法中初始化之前，一切都运行良好。

import {Component} from '@angular/core';
import {Geolocation} from 'ionic-native';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {
  constructor(private navCtrl: NavController) {

    this.map = null;

    this.loadMap();

   }

   loadMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      scrollwheel: false,
      zoom: 8
    });
   }

}

现在控制台抛出错误 GET http://localhost:8100/build/js/app.bundle.js

我的终端中也有一个错误：

错误 TS2339：“MapPage”类型上不存在属性“map”。

发现了很多类似的案例，有问题错误 TS2339：“可观察”类型上不存在属性“地图”。

我已经更新了我的 npm - 没有帮助。从我的代码中删除this.map = null方法现在不会使我的应用程序正常工作，同样的错误和 ionic serve 命令不会加载我的应用程序（只有它的默认index.html页面）

如何将该属性“地图”添加到我的“地图页面”类中以解决问题？我的代码做错了什么？

4

1 回答 1

2

您需要map在使用之前声明该属性：

import {Component} from '@angular/core';
import {Geolocation} from 'ionic-native';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/map/map.html'
})
export class MapPage {

  private map: any; // <- declare the variable

  constructor(private navCtrl: NavController) {

    this.map = null; // <- Now the variable exists so you can initialize it

    this.loadMap();

   }

   loadMap() {
      // Instead of using a new variable, use this.map to use the existing map property
      this.map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      scrollwheel: false,
      zoom: 8
    });
   }

}
于 2016-09-04T09:38:17.540 回答