Ionic 2 with Google maps - 出现空白屏幕

Question

我想这对 ionic/Angular 人来说应该很简单。由于某种原因，我无法让这个简单的脚本工作（带有 GMaps 的 Ionic2）。

这是我的代码： Map.html:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Google Map</ion-title>
  <ion-buttons end>
    <button (click)="addMarker()">
      <ion-icon name="add"></ion-icon>Add Marker
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="map">
  <div id="map"></div>
</ion-content>

Map.ts:

import {Page, NavController, Platform} from 'ionic-angular';
import {Geolocation} from 'ionic-native';

/*
  Generated class for the MapPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Page({
  templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
  constructor(public nav: NavController, platform: Platform) {
    this.nav = nav;
    this.map = null;
   // this.platform = platform;
   // this.initializeMap();

    this.platform = platform;

    platform.ready().then(() => {
      this.loadMap();
    });


  }
loadMap(){
  let options = {timeout: 10000, enableHighAccuracy: true};
    Geolocation.getCurrentPosition(options).then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    });
  }
}

我已经在这里添加了我的代码（里面有 Gmap 的 Ionic2 项目）： http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview

你可以在里面找到："home.ts" 脚本，我在下面注释了代码，因为此刻我正在添加它我所有的 ionic 项目都已关闭，你可以尝试取消注释它。

我也找到了带有Gmap 项目的Angular2，但是我找不到带有Gmap 的Ionic2 项目。这里：

Angular2 Gmap

有谁能看出那里出了什么问题吗？

非常感谢！

伊兰.

Answer 1

我已经使用 ionic2 和 google 地图创建了一个示例应用程序。 https://github.com/nazrul104/google-map-with-ionic2。可能对你有帮助！

Answer 2

感谢@Nazrul，这是我在 ts 页面文件中所做的更改：

export class Page1 {
  constructor() {
     this.loadMap();

  }
   loadMap(){
  let options = {timeout: 10000, enableHighAccuracy: true};
    //ENABLE THE FOLLOWING:

    Geolocation.getCurrentPosition(options).then((position) => {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(document.querySelector('#map'), mapOptions);
      var x = document.querySelector('#map');
      console.log(x);
    });
  }

}

现在我可以看到地图了:)

Answer 3

检查您是否以正确的方式安装了插件。
在 console.developers.google.com
确保注入贴图的 HTML 元素具有预定义的高度属性。
请确保您运行您的应用程序是在连接的或虚拟的设备。

如果这不起作用：我创建了一个 Ionic 2.0.0-rc.5 启动器，功能最少 https://github.com/0x1ad2/ionic2-starter-google-maps

Answer 4

我的解决方案是，不要在构造函数上初始化地图，而是在 ionViewDidLoad 上初始化它。

ionViewDidLoad() {
   console.log('ionViewDidLoad Maps');
   setTimeout(()=>{
      this.loadMap();
   }, 1000)

}

Ionic 2 with Google maps - 出现空白屏幕

Ionic 2 with Google maps - Blank screen appear

google-maps

google-maps-api-3

ionic-framework

ionic2

angular