谷歌地图没有显示Ionic2

时间:2017-02-10 23:59:09

标签: google-maps angular ionic2

我已成功完成以下教程。但是,当我在多个页面中添加导航时,地图会停止加载。它只会在我将其设置为根页面时加载。

https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/

我已经尝试了以下表格中的一些建议,但没有取得任何成功。它确实在浏览器中工作但在我在Android模拟器中启动它时不起作用。

https://forum.ionicframework.com/t/google-maps-dont-work/55637/29

这是我的页面ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';

declare var google;

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController) {

  }

  ngOnInit(){
    this.loadMap();
  }

  loadMap(){

    Geolocation.getCurrentPosition().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(this.mapElement.nativeElement, mapOptions);

    }, (err) => {
      console.log(err);
    });

  }

}

0 个答案:

没有答案