Google maps 爱奥尼亚3谷歌地图-地图不'；在android上无法显示

我正在尝试将地理定位和谷歌地图与爱奥尼亚3配合使用，该应用程序在浏览器中运行良好：

但由于某些原因，当我构建apk时，它并没有在我的手机上显示地图

这就是地理定位

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');
    });

  }



}

我不知道怎么了，谢谢你的建议

---

您的问题是只有在成功获取地理位置后才能调用

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');
    });
}

---

或者，您可以在geolocation promise的

.catch（）

中调用

loadMap（）

，然后在没有coords的情况下将地图加载到那里

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
    });
}

---

控制台有错误吗？没有，它甚至显示latitud和longitud，没有错误，就是这样，它在我的手机上不工作，但在浏览器上。我想你的地图分区还没有加载。。使用ViewChild而不是document.getelement您可以控制台log

mapEle

？是的，它显示了一个非常大的div，有了id映射，我会将屏幕截图添加到原始PostThank man，这个问题已经解决，但我会给您接受的答案（我不知道如何关闭主题）没有问题。通常，如果你的问题得到解决，你会自己发布答案并接受它，这样未来的读者就可以得到答案。