Ionic 2与谷歌地图 - 空白屏幕出现 [英] Ionic 2 with Google maps - Blank screen appear

问题描述

我想这对离子/角度的人应该很简单。
出于某种原因，我无法得到这个简单的脚本（Ionic2 with GMaps）。

这是我的代码：
Map。 html：

 < ion-navbar * navbar> 
< button menuToggle> 
< ion-icon name =menu>< / ion-icon> 
< / button> 
< ion-title> Google地图< / ion-title> 
< ion-buttons end> 
< button（click）=addMarker（）> 
< ion-icon name =add>< / ion-icon>添加标记
< / button> 
< / ion-buttons> 
< / ion-navbar> 
 
< ion-content padding class =map> 
< div id =map>< / div> 
< / ion-content> 
  

Map.ts：

 从'ionic-angular'导入{Page，NavController，Platform}; 
从'ionic-native'导入{Geolocation}; 
 
 / * 
为MapPage页面生成的类。 
 
请参阅http://ionicframework.com/docs/v2/components/#navigation了解关于
离子页面和导航的更多信息。 
 * / 
 @Page（{
 templateUrl：'build / pages / map / map.html'，
}）
导出类MapPage {
构造函数（公共导航：NavController，平台：平台）{
 this.nav = nav; 
 this.map = null; 
 // this.platform = platform; 
 // this.initializeMap（）; 
 
 this.platform = platform; （）=> {
 this.loadMap（）; 
}）; 
 
 platform.ready（）。 
 
 
 $ b loadMap（）{
 let options = {timeout：10000，enableHighAccuracy：true}; 
 Geolocation.getCurrentPosition（options）.then（（position）=> {
 let latLng = new google.maps.LatLng（position.coords.latitude，position.coords.longitude）; 
让mapOptions = {
 center：latLng，
 zoom：15，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 
 this.map = new google.maps.Map（document.getElementById（map），mapOptions）; 
}）; 
 
 
 
 
 
 
 $ b 
我在这里添加了我的代码（Ionic2项目使用Gmap里面）：
  http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview  
 
 
你可以在里面找到：home.ts这个脚本，我对下面的代码发表评论，因为现在我把它加回去了。我的离子项目已关闭，您可以尝试并取消注释。
 
 
 
我也用Gmap项目找到了Angular2，但是我找不到Gmap的Ionic2项目。这里：
 
 
 
  Angular2 Gmap  
 
 
 
 
 $ b $ p 
 
 $ b 
 Eran。 
 
解决方案
我创建了一个带有ionic2和google地图的示例应用程序。 
  https://github.com/nazrul104/google-map-with-ionic2 。它可以帮助你！
 
I guess it should be simple for the ionic/Angular people.
from some reason, I can't get this simple script to work (Ionic2 with GMaps).

Here is my code:
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);
    });
  }
}
I have added my code here (Ionic2 project with Gmap inside):
http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview

you can find inside: "home.ts" the script, I have comment the code below, since in the moment I'm adding it back All of my ionic project is down, you can try and uncomment it.

I also have found Angular2 with Gmap project, But I couldn't find Ionic2 project with Gmap. here:

Angular2 Gmap

Anyone can see what is wrong there?

Thank you very much!

Eran.
解决方案
I have created an example app with ionic2 and google map.
https://github.com/nazrul104/google-map-with-ionic2. It may help you!

                        
这篇关于Ionic 2与谷歌地图 - 空白屏幕出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！