Ionic 3 谷歌地图 - 在安卓设备上无法显示地图

Question

我将尝试使用地理定位和谷歌地图与Ionic 3相关联，应用程序在浏览器中正常工作：

但是出于某些原因，当我构建APK时，在我的手机上没有显示地图。

这是地理位置.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';

declare var google;

@IonicPage()
@Component({
  selector: 'page-geo',
  templateUrl: 'geo.html',
})
export class GeoPage {
  map: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public geo: Geolocation) { }

  ionViewDidLoad() {
    this.getPosition();
  }

  getPosition():any{
    this.geo.getCurrentPosition().then(resp => {

      this.loadMap(resp);

    }).catch((error) =>{
      console.log(error);
    })
  }
  loadMap(position: Geoposition){

let latitud = position.coords.latitude;
let longitud = position.coords.longitude;
console.log(latitud, longitud);

let mapEle: HTMLElement = document.getElementById('map');

let myLatLng = {lat: latitud, lng: longitud};

this.map = new google.maps.Map(mapEle, {
  center: myLatLng,
  zoom: 12
});



google.maps.event.addListenerOnce(this.map, 'idle', () => {
  let marker = new google.maps.Marker({
    position: myLatLng,
    map: this.map,
    title: 'Hello World!'
  });
  mapEle.classList.add('show-map');
    });

  }



}

我不知道出了什么问题，谢谢提前。

- Héctor Pérez Silva

---

控制台有任何错误吗？ - Suraj Rao

不，它甚至显示了纬度和经度，没有错误，这就是问题所在，它在我的手机上无法工作，但在浏览器上可以。 - Héctor Pérez Silva

我认为你的地图div还没有加载好...使用ViewChild而不是document.getElement。 - Suraj Rao

你能在控制台输出 mapEle 吗？ - Suraj Rao

是的，它显示一个具有id为map的非常大的div，我将在原始帖子中添加截图。 - Héctor Pérez Silva

Answer 1

你的问题在于只有成功获取地理位置后才调用loadMap(resp)。

如果地理位置请求失败（由于权限原因），则应用程序将无法加载。

你需要先加载地图，然后设置中心点：

ionViewDidLoad() {
    this.loadmap()
    this.getPosition();
}

getPosition(): any {
    this.geo.getCurrentPosition().then(resp => {
        this.setCenter(resp);
    }).catch((error) => {
        console.log(error);
    })
}

loadMap() {
    let mapEle: HTMLElement = document.getElementById('map');
    this.map = new google.maps.Map(mapEle, {
        center: myLatLng,
        zoom: 12
    });
}

setCenter(position: Geoposition) {
    let myLatLng = { lat: position.coords.latitude, lng: position.coords.longitude };
    this.map.setCenter(myLatLng);

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
        let marker = new google.maps.Marker({
            position: myLatLng,
            map: this.map,
            title: 'Hello World!'
        });
        mapEle.classList.add('show-map');
    });
}

---

或者，您可以在地理位置承诺的.catch()中调用loadMap()，然后在那里加载地图而不需要坐标。

getPosition(): any {
    this.geo.getCurrentPosition().then(resp => {
        this.loadMap(resp);
    }).catch((error) => {
        // Load the map even if we fail
        this.loadMapFallback();
        console.log(error);
    });
}

/*
 ... old load map function
 */

loadMapFallback() {
    let mapEle: HTMLElement = document.getElementById('map');

    this.map = new google.maps.Map(mapEle, {
        zoom: 12
    });
}

- Clint

---

谢谢，问题已经解决了，但我会给你采纳的答案（我不知道如何关闭话题）。 - Héctor Pérez Silva

没问题。通常情况下，如果您的问题得到解决，您会自己发布答案并接受它，以便未来的读者可以获得答案。 - Clint