H5调用手机定位封装组件

使用的demo 具体如何应用 封装到安卓手机内调取定位权限设置,从而实现实时定位

<template>
  <div class="index-page">
    <div class="body">
      <pre>
        {{ position }}
      </pre>
      <button @click="onClick">获取定位</button>
    </div>
  </div>
</template>

<script>
import { getLocation } from '@/utils'

export default {
  data() {
    return {
      position: {}
    }
  },

  methods: {
    onClick() {
      // 获取当前定位
      getLocation(
        () => {
          window.XFTMapPlugin.startUpdatePosition(
            () => {
              window.XFTMapPlugin.readUpdatePosition(
                location => {
                  if (location) {
                    this.position = location
                    const { longitude, latitude } = location
                    if (longitude && latitude) {
                      console.log(`当前位置：${longitude}, ${latitude}`)
                    }
                  }
                },
                err => {
                  console.log(JSON.stringify(err))
                  console.log(err)
                }
              )
            },
            err => {
              console.log(err)
            },
            0
          )
        },
        err => {
          this.$toast(err)
        }
      )
    }
  }
}
</script>

封装的调用定位js

import { Dialog } from "vant";

/**
 * @typedef {Object} Location
 * @property {string} provider - 地理位置服务提供商，lbs:高德网络定位 gps: gps定位
 * @property {number} longitude - 经度
 * @property {number} latitude - 纬度
 * @property {number} speed - 速度
 * @property {number} accuracy - 精度
 * @property {string} [provinceName] - 省份
 * @property {string} [cityName] - 城市
 * @property {string} [cityCode] - 城市编码
 * @property {string} [districtName] - 区
 * @property {boolean} [isOffset]
 * @property {boolean} [isFixLastLocation]
 * @property {string} [coordType] - 坐标类型，bd09ll:百度经纬度坐标 gcj02:国测局加密坐标 wgs84:gps坐标
 */

function switchToSettingsDialog() {
  Dialog.confirm({
    title: '定位权限未开启',
    message: '请在设置中开启安庆智慧水利定位权限',
    cancelButtonText: '暂不',
    cancelButtonColor: '#1989fa',
    confirmButtonText: '去设置',
    confirmButtonColor: '#1989fa'
  }).then(() => {
    cordova.plugins.diagnostic.switchToSettings()
  })
}

/**
 * 获取定位信息
 *
 * @param {(location: Location) => void} onSuccess
 * @param {(error: string) => void} onError
 * @returns {void}
 */
export function getLocation(onSuccess, onError) {
  function evaluateAuthorizationStatus(status) {
    switch (status) {
      case cordova.plugins.diagnostic.permissionStatus.RESTRICTED:
        console.log('Permission restrcted')
        break
      case cordova.plugins.diagnostic.permissionStatus.NOT_REQUESTED:
        console.log('Permission not requested')
        break
      case cordova.plugins.diagnostic.permissionStatus.DENIED:
        console.log('Permission denied')
        break
      case cordova.plugins.diagnostic.permissionStatus.DENIED_ONCE:
        console.log('Permission denied once')
        break
      case cordova.plugins.diagnostic.permissionStatus.DENIED_ALWAYS:
        console.log('Permission denied always')
        switchToSettingsDialog()
        return
    }

    //请求位置授权 ios,android都可以呼出，并且有用户选择的回调
    cordova.plugins.diagnostic.requestLocationAuthorization(
      function (status2) {
        if (status2 === cordova.plugins.diagnostic.permissionStatus.GRANTED) {
          onSuccess(1111)
        }
      },
      function (error) {
        onError(error)
      },
      cordova.plugins.diagnostic.locationAuthorizationMode.WHEN_IN_USE
    )
  }

  //位置是否授权
  cordova.plugins.diagnostic.isLocationAuthorized(
    function (authorized) {
      console.log('Location is ' + (authorized ? 'authorized' : 'unauthorized'))
      if (authorized) {
        onSuccess(1111)
      } else {
        cordova.plugins.diagnostic.getLocationAuthorizationStatus(
          evaluateAuthorizationStatus,
          onError
        )
      }
    },
    function (error) {
      console.error('The following error occurred: ' + error)
    }
  )
}