Ionic 2與谷歌地圖 - 空白屏幕出現

我想它應該是簡單的離子/ Angular人。由於某種原因，我無法得到這個簡單的腳本工作（Ionic2與GMaps）。Ionic 2與谷歌地圖 - 空白屏幕出現

這裏是我的代碼： 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); 
    }); 
    } 
}

我增加了我的代碼在這裏（內Ionic2項目，GMAP）： http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview

你可以在裏面找到：「home.ts」這個腳本，我對下面的代碼發表評論，因爲在我加入它的那一刻我的所有離子項目已關閉，您可以嘗試取消註釋。

我也發現Angular2與Gmap項目，但我找不到與Gmap的Ionic2項目。在這裏：

Angular2 Gmap

任何人都可以看到什麼是錯的呢？

非常感謝！

伊蘭。

來源

2016-05-12 Eran Levi

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

來源

2016-05-12 12:31:03

雖然鏈接可能回答這個問題，答案應該直接包含的相關部分。鏈接可能變得陳舊。 –

非常感謝，我翻閱了代碼，它的工作原理！ :) –

由於這裏@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); 
    }); 
    } 

}

現在我可以看到地圖:)

來源

2016-05-13 05:16:53

選擇是否安裝該插件的正確道路。
在console.developers.google.com上驗證您的API密鑰
確保地圖注入的HTML元素具有預定義高度屬性。
確保您在連接的或虛擬的設備上運行您的應用。

如果不工作：我創建了一個離子2.0.0 rc.5起動用最少的功能https://github.com/0x1ad2/ionic2-starter-google-maps

來源

2017-01-18 14:34:50 0x1ad2

我的解決辦法，不初始化地圖上的構造，在ionViewDidLoad上初始化它。

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

}

來源

2017-06-30 20:41:20

Ionic 2與谷歌地圖 - 空白屏幕出現

回答

相關問題