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与谷歌地图 - 空白屏幕出现

回答

相关问题