Ionic 使用原生定位功能

我们在上一篇已经成功创建并编译了 hello-world 项目。现在增加读取当前坐标的功能。

新增读取当前坐标的功能

  1. 首先要安装 geolocation plugin

    npm install --save @ionic-native/geolocation
  2. 将 geolocation plugin 添加到 app.module.ts 的 providers 中:

    import { Geolocation } from "@ionic-native/geolocation";
    
    @NgModule({
      providers: [
        StatusBar,
        SplashScreen,
        Geolocation,
        { provide: ErrorHandler, useClass: IonicErrorHandler }
      ]
    })
    export class AppModule { }
  3. 在 home.html 中增加一个按钮,在按钮的 click 事件中调用 gps 插件获取当前坐标点并显示在 home.html 中:

    import { Geolocation } from '@ionic-native/geolocation';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(
        public navCtrl: NavController,
        private geolocation: Geolocation
      ) {
      }
      position = "()";
    
      ngOnInit() {
        this.isLoading = "加载完毕";
      }
    
      getPosition() {
        this.geolocation.getCurrentPosition().then((resp) => {
          this.position = `(${resp.coords.latitude}, ${resp.coords.longitude})`;
        }).catch((error) => {
          this.position = 'error:' + error.message;
          console.log('Error getting location', error);
        });
      }
    }
  4. 按上一篇的方法再次编译 apk。注意编译之前要把之前生成过的 apk 全部删除先。因为今后要经常进行编译 apk 的工作,建议把压缩未签名 apk、签名 apk、验证签名这 3 项工作放进一个叫做 “sign.bat” 的批处理文件并放置在项目根目录下,然后编写 npm scripts 如下:

    "scripts": {
      "prebuild": "del /F /Q C:\\projects\\ionic\\hello-world\\platforms\\android\\app\\build\\outputs\\apk\\release\\*.*",
      "build": "ionic cordova build android --prod --release",
      "postbuild": "sign"
    }

    这样今后只要执行“npm run build”就会先执行 prebuild 里面的脚本删除旧的 apk,然后编译出新的 apk,再执行签名脚本。

在手机上安装新版 apk 之后会发现获取不到当前坐标,错误信息为“application does not have sufficient geolocation permissions.”,也就是默认是没有获取定位的权限的。

请求定位权限

  1. 参考官方文档,首先要安装 android-permissions 插件,注意这两个都要装,可不是装一个插件的两种方法!

    ionic cordova plugin add cordova-plugin-android-permissions
    npm install --save @ionic-native/android-permissions
  2. 官方文档漏了必须的一步,要在

    C:\projects\ionic\hello-world\platforms\android\app\src\main\AndroidManifest.xml

    中添加要申请的权限:ACCESS_COARSE_LOCATION、ACCESS_FINE_LOCATION 和 ACCESS_LOCATION_EXTRA_COMMANDS:

    <?xml version='1.0' encoding='utf-8'?>
    <manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
        <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
        <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
            <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
                <intent-filter android:label="@string/launcher_name">
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
        <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="26" />
    </manifest>

    否则根本不会弹出权限请求系统对话框。
    其中权限字符串列表在Manifest.permission.html中可以查到。

  3. 安装之后同样要把它放置到 app.module.ts 的 providers 中,并在 home.ts 中添加请求权限的代码。值得注意的是 Android 26 以上要求在请求权限之前要有使用该权限的代码,否则同样不会弹出权限申请系统对话框,所以 home.ts 代码像这样:

    import { Geolocation } from '@ionic-native/geolocation';
    import { AndroidPermissions } from '@ionic-native/android-permissions';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(
        public navCtrl: NavController,
        private geolocation: Geolocation,
        private androidPermissions: AndroidPermissions
      ) {
      }
    
      position = "()";
    
      getPosition() {
        this.geolocation.getCurrentPosition().then((resp) => {
          this.position = `(${resp.coords.latitude}, ${resp.coords.longitude})`;
        }).catch((error) => {
          this.androidPermissions.requestPermissions([
            this.androidPermissions.PERMISSION.ACCESS_COARSE_LOCATION,
            this.androidPermissions.PERMISSION.ACCESS_FINE_LOCATION,
            this.androidPermissions.PERMISSION.ACCESS_LOCATION_EXTRA_COMMANDS]).then(r => {
              // 申请权限成功
              this.geolocation.getCurrentPosition().then((resp) => {
                this.position = `(${resp.coords.latitude}, ${resp.coords.longitude})`;
              });
            }).catch(err => {
              //申请权限失败:"
            });
        });
      }
    }
    原文作者:井22
    原文地址: https://segmentfault.com/a/1190000014643943
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞