как добавить карты Google в android - PullRequest
Новая
       15

как добавить карты Google в android

0 голосов
/ 14 апреля 2020

Я хочу показать карту в моем приложении. я создаю его с помощью c, когда я запускаю с ionic cordova run browser, это показывалось так, как я хочу, вот так.

enter image description here

но когда я пытаюсь запустить его с реального устройства android ionic cordova run android он показывает мне белый экран с google lo go, как показано ниже:

enter image description here

здесь мой код: в .ts файле. 

export class AddAccountPage implements OnInit {
  modalTitle:string;
  modelId:number;
  @ViewChild('map') element: ElementRef;
  map: GoogleMap;

  constructor(private modalController: ModalController, public plt: Platform, public nav: NavController) { }

  ngOnInit() {

  }

  ionViewDidEnter() {
    this.plt.ready().then(() => {
      this.initMap();
    });
  }

  initMap() {

    // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'key',
      'API_KEY_FOR_BROWSER_DEBUG': 'key'
    });

    this.map = GoogleMaps.create(this.element.nativeElement);

    this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
      let coordinates: LatLng = new LatLng(36.06731743465648, -79.79521393775941);
      let position = {
        target: coordinates,
        zoom: 17
      };
    this.map.animateCamera(position);
      let markerOptions: MarkerOptions = {
        position: coordinates
      };
      const marker = this.map.addMarker(markerOptions)
        .then((marker: Marker) => {
          marker.showInfoWindow();
        });
    })
  }

}

в .html файле 

<ion-content fullscreen>
  <div #map style="height:100%;"></div>
</ion-content>

и, наконец, config.xml.

для api я использую случайную строку, не настоящую api, потому что у меня ее нет. 

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />

1 Ответ

1 голос
/ 14 апреля 2020

Try blow Пример:

Установить плагин для текущего местоположения: https://ionicframework.com/docs/native/geolocation

В вашем индексе. html добавить ключ API 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

В вашем HTML: 

<ion-content>
  <div #map id="map"></div>
</ion-content>

В вашем CSS: 

#map {
  width: 100%;
 height: 100vh;
}

В вашем .ts 

import { Component, ViewChild, ElementRef  } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
declare var google;

export class HomePage {

@ViewChild('map', {static: false}) mapElement: ElementRef;

  map: any;

  constructor(
    private geolocation: Geolocation
  ) {}

  ngOnInit() {
    this.loadMap();
  }

  loadMap() {
    let that = this;
    this.geolocation.getCurrentPosition().then((resp) => {
      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }
}
...