Question

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

这是我的代码： 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”脚本，我已经评论了下面的代码，因为在我添加它的那一刻我所有的离子项目都已关闭，你可以尝试取消它。

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

Angular2 Gmap

任何人都可以看到那里出了什么问题？

非常感谢！

叶兰。

Answer 1

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

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

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

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

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

}

带有Google地图的Ionic 2 - 出现空白屏幕

3 个答案: