affichage de google maps de l'application ionique

Question

Je développe une application Android avec Ionic Cordova et Angular . dans l'une des pages, mon exigence est d'afficher la carte google avec l'emplacement actuel.

Donc, en installant des plugins ionic Cordova google map et de géolocalisation et avec la clé API google maps et iam capable d'afficher google map dans l'une des pages avec l'emplacement actuel. Cela fonctionne correctement si l'emplacement de l'appareil mobile est activé. Si l'appareil mobile est éteint et que nous avons ouvert cette page de carte (ayant l'emplacement dans le mobile éteint), il se charge en permanence avec le message Récupération de votre emplacement et s'y trouve lui-même.

Je souhaite que l'application mobile affiche un message d'alerte à l'utilisateur indiquant que l'emplacement dans Mobile est désactivé lors de l'ouverture de la page de carte avec l'emplacement de l'appareil mobile désactivé.

ci-dessous est le code que j'ai essayé:

Plugins importés dans la page app.module.ts

import { GoogleMaps } from '@ionic-native/google-maps/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';

Dans le fichier page.ts

import { Component, OnInit, NgZone, ViewChild, OnDestroy } from '@angular/core';
   declare var google;

import {
 ToastController,
 Platform,
 LoadingController,
 AlertController
} from '@ionic/angular';
import {
 GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Marker,
GoogleMapsAnimation,
LocationService,
MyLocation,
GoogleMapOptions,
LatLng,
Environment
 } from '@ionic-native/google-maps/ngx';
 import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from 
 '@ionic-native/native-geocoder/ngx';

import { Router } from '@angular/router';
import { SelectedPickupPoint } from 'src/app/models/map.model';
 import { HelperService } from 'src/app/services/helper.service';
 import { ApiService } from 'src/app/services/api/api.service';
 import { PickupPoint } from 'src/app/models/pickupPoint.model';
 import { Subscription } from 'rxjs';

  @Component({
selector: 'app-pickup-map',
  templateUrl: './pickup-map.page.html',
  styleUrls: ['./pickup-map.page.scss'],
    })
    export class PickupMapPage implements OnInit, OnDestroy {

   @ViewChild('map_canvas', { static: true }) mapElement: any;
private myLocation: MyLocation;
private loading: any;
private map: GoogleMap;
public search: string = '';
private googleAutocomplete = new google.maps.places.AutocompleteService();
pickupPointsData: Array<PickupPoint>;
public searchResults = new Array<any>();
private pickUpPointsSubscription: Subscription;

constructor(
public toastCtrl: ToastController,
private platform: Platform,
private loadingCtrl: LoadingController,
private ngZone: NgZone,
private nativeGeocoder: NativeGeocoder,
public router: Router,
private helperService: HelperService,
private apiService: ApiService,
private alertController: AlertController

)

 ngOnInit() {
this.helperService.showLoader('Fetching your location');
this.mapElement = this.mapElement.nativeElement;
this.getUserLocation().then(
  res => {
    
    this.myLocation = res;
    this.helperService.hideLoader();
    return this.myLocation;
  }
).then(
  res => {
    this.apiService.pickupList(this.apiService.loggedInUser.value.id, this.myLocation.latLng.lat, this.myLocation.latLng.lng, this.selectedRadius)
      .then(
        res => {
          // alert('ONINITRESP' + JSON.stringify(res));
          this.pickUpPointsSubscription = this.apiService.castpickUpPointsList.subscribe(
            data => {
              // alert('uppper' + JSON.stringify(data));
              if (data.length === 0) {
                this.pickupPointsData = data;
                this.loadMapWithoutMarkers(this.myLocation.latLng.lat, this.myLocation.latLng.lng).then(
                  res => {
                    alert('There are no pickup points in this location, Please try with a different one or change the Radius');
                  }
                );
              } else if (data.length !== 0) {
                this.nearestCenter = data[0];
                this.pickupPointsData = data;
                try {
                  this.loadMap(this.myLocation.latLng.lat, this.myLocation.latLng.lng);
                } catch (err) {
                  alert(err);
                } finally {
                  this.loading.dismiss();
                }
              }
            },
            error => {
               alert(JSON.stringify(error));
            });
        },
        err => {
           alert(err);
          }
        )
    }
  )
}





  async getUserLocation(): Promise<MyLocation> {
   let myLocation: MyLocation = await LocationService.getMyLocation();
   return myLocation;
  }

 async loadMapWithoutMarkers(latitude, longitude) {
  this.loading = await this.loadingCtrl.create({
  message: 'Loading Map. Please wait...'
   })
    await this.loading.present();

   try {
  const mapOptions: GoogleMapOptions = {
    controls: {
      zoom: false
    }
  }
  if (!this.map) {
    this.map = GoogleMaps.create(this.mapElement, mapOptions);
  }
  this.addOriginMarker(latitude, longitude);
  this.loading.dismiss();
} catch (error) {
  alert(error);
  this.loading.dismiss();
 }
 }

 async loadMap(latitude, longitude) {
 this.loading = await this.loadingCtrl.create({
  message: 'Loading Map. Please wait...'
  })
  await this.loading.present();
   const mapOptions: GoogleMapOptions = {
    controls: {
    zoom: false
    }
  }




  }

En HTML:

<ion-content>
<div #map_canvas id="map_canvas">

 </div>

 </ion-content>

s'il vous plaît aidez-moi à ce sujet, comment puis-je afficher un message à l'utilisateur pour activer sa localisation mobile.

Merci beaucoup

Answer 1

Essaye ça

  ngOnInit() {
    this.helperService.showLoader("Fetching your location");
    this.mapElement = this.mapElement.nativeElement;
    this.getUserLocation()
      .then((res) => {
        this.myLocation = res;
        this.helperService.hideLoader();
        return this.myLocation;
      })
      .catch((error) => {
          console.log('Error getting location', error);
          this.helperService.hideLoader();

          //alert message code goes here

      })
      .then((res) => {
        this.apiService
          .pickupList(
            this.apiService.loggedInUser.value.id,
            this.myLocation.latLng.lat,
            this.myLocation.latLng.lng,
            this.selectedRadius
          )
          .then(
            (res) => {
              // alert('ONINITRESP' + JSON.stringify(res));
              this.pickUpPointsSubscription = this.apiService.castpickUpPointsList.subscribe(
                (data) => {
                  // alert('uppper' + JSON.stringify(data));
                  if (data.length === 0) {
                    this.pickupPointsData = data;
                    this.loadMapWithoutMarkers(
                      this.myLocation.latLng.lat,
                      this.myLocation.latLng.lng
                    ).then((res) => {
                      alert(
                        "There are no pickup points in this location, Please try with a different one or change the Radius"
                      );
                    });
                  } else if (data.length !== 0) {
                    this.nearestCenter = data[0];
                    this.pickupPointsData = data;
                    try {
                      this.loadMap(
                        this.myLocation.latLng.lat,
                        this.myLocation.latLng.lng
                      );
                    } catch (err) {
                      alert(err);
                    } finally {
                      this.loading.dismiss();
                    }
                  }
                },
                (error) => {
                  alert(JSON.stringify(error));
                }
              );
            },
            (err) => {
              alert(err);
            }
          );
      });
  }