帶有Google地圖的Ionic 2-出現空白屏幕

Question

我想對於離子/角度的人來說應該很簡單。 由於某種原因，我無法使用這個簡單的腳本（帶有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

1. 檢查是否正確安裝了插件。
2. 在console.developers.google.com上驗證您的API密鑰
3. 確保將地圖插入到其中的HTML元素具有預定義的height屬性。
4. 確保在連接的設備或虛擬設備上運行應用程序。

如果那不起作用：我創建了一個具有最小功能的Ionic 2.0.0-rc.5入門版https://github.com/0x1ad2/ionic2-starter-google-maps

Answer 2

我用ionic2和google map創建了一個示例應用程序。 https://github.com/nazrul104/google-map-with-ionic2 。 它可以幫助您！

Answer 3

感謝@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 4

我的解決方案是，不要在構造函數上初始化映射，而在ionViewDidLoad上初始化它。

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

}