Ionic 3 Google maps - карта не отображается на Android - PullRequest
Новая
       1

Ionic 3 Google maps - карта не отображается на Android

0 голосов
/ 02 июня 2018

Я пытаюсь использовать геолокацию и карты Google с ionic 3, приложение отлично работает в браузере:

enter image description here

, но для некоторыхпричина, когда я строю apk не показывает карту на моем телефоне

enter image description here

это геолокация .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');
    });

  }



}

я не знаю, что не так, спасибо в совет


enter image description here

1 Ответ

0 голосов
/ 15 июня 2018

Ваша проблема в том, что вы звоните 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');
    });
}

В качестве альтернативы вы можете позвонить loadMap() в .catch() обещания геолокации и загрузить туда карту без координат. 

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