离子应用 google 地图显示 - 移动设备位置问题

Question

我正在使用 Ionic Cordova 和 Angular 开发一个 android 应用程序。在其中一个页面中，我的要求是显示 google 带有当前位置的地图。

因此，通过安装 ionic Cordova google 地图和地理定位插件 并使用 google 地图 API 键 并且我能够在具有当前位置的页面之一中显示 google 地图。如果移动设备位置处于打开状态，则此方法工作正常。如果移动设备关闭并且我们打开此地图页面（在移动设备中关闭位置），它会不断加载消息获取您的位置并自行点击那里。

我希望移动应用程序在移动设备位置关闭的情况下打开地图页面时向用户显示移动设备位置关闭的警告消息。

下面是我试过的代码：

app.module.ts 页面中导入的插件

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

在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
    }
  }




  }

在HTML中：

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

 </div>

 </ion-content>

请帮我解决这个问题，我怎样才能向用户显示消息以打开他的移动位置。

非常感谢

Answer 1

试试这个

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

离子应用 google 地图显示 - 移动设备位置问题

ionic app google maps displaying - mobile device location issue

android

google-maps

cordova

ionic-framework

angular