首页 > 解决方案 > 如何使用 Cordova-Advanced.Geolocation 在离子前端显示变量以及如何在地图上显示网络单元的位置

问题描述

我对 Ionic (5.0.1) 和 Angular 有疑问。我想在主页中可视化一些 java 变量,这些变量涉及有关本地化的信息或有关网络单元的某些参数的信息。我找到了一个关于如何安装“Cordova AdvancedGeolocation”插件的示例,但我只能查看默认地图,实际上我希望我可以访问插件的变量以显示在前端。

我在 app.component.ts 中使用此代码,然后更改 config.xml,最后,我将“sample-map.html”放在 src 字段中。

我看到带有位置 gps 和网络的地图,但我不明白如何访问变量 Java 并将它们显示在前端。

非常感谢。

    import { Component, NgZone } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Geolocation, Geoposition } from '@ionic-native/geolocation/ngx';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {


  AdvancedGeolocation: any;
  currentLat: any;
  currentLng: any;
  watch: any;


  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    // tslint:disable-next-line: no-shadowed-variable
    private zone : NgZone,
    private geolocation: Geolocation
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      if (this.platform.is('android')) {
        this.platform.ready().then(() => {
          this.AdvancedGeolocation.start((success) => {
            //loading.dismiss();
            // this.refreshCurrentUserLocation();
            try {
              var jsonObject = JSON.parse(success);
              console.log("Provider " + JSON.stringify(jsonObject));
              switch (jsonObject.provider) {
                case "gps":
                  console.log("setting gps ====<<>>" + jsonObject.latitude);

                  this.currentLat = jsonObject.latitude;
                  this.currentLng = jsonObject.longitude;
                  break;

                case "network":
                  console.log("setting network ====<<>>" + jsonObject.latitude);

                  this.currentLat = jsonObject.latitude;
                  this.currentLng = jsonObject.longitude;

                  break;

                case "satellite":
                  //TODO
                  break;

                case "cell_info":
                  //TODO
                  break;

                case "cell_location":
                  //TODO
                  break;

                case "signal_strength":
                  //TODO
                  break;
              }
            }
            catch (exc) {
              console.log("Invalid JSON: " + exc);
            }
          },
            function (error) {
              console.log("ERROR! " + JSON.stringify(error));
            },
            {
              "minTime": 500,         // Min time interval between updates (ms)
              "minDistance": 1,       // Min distance between updates (meters)
              "noWarn": true,         // Native location provider warnings
              "providers": "all",     // Return GPS, NETWORK and CELL locations
              "useCache": true,       // Return GPS and NETWORK cached locations
              "satelliteData": false, // Return of GPS satellite info
              "buffer": false,        // Buffer location data
              "bufferSize": 0,         // Max elements in buffer
              "signalStrength": false // Return cell signal strength data
            });

        });
      } else {

        // **For IOS**

        let options = {
          frequency: 1000,
          enableHighAccuracy: false
        };

        this.watch = this.geolocation.getCurrentPosition({ enableHighAccuracy: true }).then((resp) => {
          console.log("current location at login" + JSON.stringify(resp.coords));

            // Run update inside of Angular's zone
            this.zone.run(() => {
              this.currentLat = resp.coords.latitude;
              this.currentLng = resp.coords.longitude;
            });

        }, Error => {
          console.log(Error);
        }).catch(Error => {
          console.log(Error);
        }) ;
      }
    });
  }
}

标签: javaangularcordovaionic-framework

解决方案


推荐阅读