EveryLike/pages/API/get-location/get-location.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1;">
  <!-- #endif -->
    <page-head :title="title"></page-head>
    <view style="padding: 4px">
      <text class="hello-text">
        定位功能默认调用操作系统定位API实现。也支持三方SDK定位\n
        部分老款Android手机因gms问题可能导致无法使用系统定位。\n
        Web、Android、iOS平台，gcj国标、逆地理信息等功能需调用腾讯定位。</text>
    </view>

    <view class="uni-padding-wrap uni-common-mt">
      <!-- #ifdef APP-ANDROID || APP-IOS -->
      <view class="uni-list-cell-db">定位服务商provider(如系统定位，腾讯定位等)</view>
      <view class="uni-list" style="margin-bottom: 20px">
        <radio-group @change="radioChangePV">
          <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in providerList" :key="item.id"
            :class="index < providerList.length - 1 ? 'uni-list-cell-line' : ''" :value="item.id"
            :checked="index === currentProvider">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
      <!-- #endif -->
      <view class="uni-list-cell-db">定位类型</view>
      <view class="uni-list">
        <radio-group @change="radioChange">
          <radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
            :class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
            :checked="index === current">
            {{ item.name }}
          </radio>
        </radio-group>
      </view>
      <view class="uni-list-cell uni-list-cell-pd" style="margin-top: 20px">
        <view class="uni-list-cell-db">高度信息</view>
        <switch :checked="altitudeSelect" @change="altitudeChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">开启高精度定位</view>
        <switch :checked="isHighAccuracySelect" @change="highAccuracySelectChange" />
      </view>
      <view class="uni-list-cell uni-list-cell-pd">
        <view class="uni-list-cell-db">是否解析地址信息</view>
        <switch :checked="geocodeSelect" @change="geocodeChange" />
      </view>
      <view class="get-location-result">{{ exeRet }}</view>
      <view class="uni-btn-v">
        <button class="uni-btn" type="default" @tap="getLocationTap">
          获取定位
        </button>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script lang="uts">
  type GetLocationType = 'wgs84' | 'gcj02'
  export type LocationItem = { id : string, name : string, provider ?: UniProvider }
  export type ItemType = { value : GetLocationType, name : GetLocationType }

  export default {
    data() {
      return {
        title: 'get-location',
        altitudeSelect: false,
        isHighAccuracySelect: false,
        geocodeSelect: false,
        exeRet: '',
        items: [
          {
            value: 'wgs84',
            name: 'wgs84'
          },
          {
            value: 'gcj02',
            name: 'gcj02'
          }
        ] as ItemType[],
        providerList: [] as LocationItem[],
        current: 0,
        currentProvider: 0,
        jest_provider: '',
        jest_type: 'wgs84' as GetLocationType,
        jest_isAltitude: false,
        jest_isGeocode: false,
        jest_isHighAccuracy: false,
        jest_altitude: -1000,
        jest_longitude: 200,
        jest_latitude: 100,
        jest_address: '',
        jest_errCode: 0,
        jest_complete: false
      }
    },
    onLoad: function () {
      // #ifdef APP
      this.getProvider()
      // #endif
    },
    methods: {
      getProvider() {
        // #ifdef APP

        let provider = uni.getProviderSync({
          service: "location",
        } as GetProviderSyncOptions)
        console.log(provider)
        provider.providerObjects.forEach((value : UniProvider) => {
          var currentProvider = value
          // if (value.id == 'system') {
          //   currentProvider = value as UniLocationSystemProvider
          // } else if (value.id == 'tencent') {
          //   currentProvider = value as UniLocationTencentProvider
          // }
          this.providerList.push({
            name: currentProvider.description,
            id: currentProvider.id,
            provider: currentProvider
          } as LocationItem);
        })

        this.providerList.forEach((value, index) => {
          if (value.id == "system") {
            this.currentProvider = index
          }
        })
        // #endif
      },
      altitudeChange: function (e : UniSwitchChangeEvent) {
        this.altitudeSelect = e.detail.value
      },
      geocodeChange: function (e : UniSwitchChangeEvent) {
        this.geocodeSelect = e.detail.value
      },
      highAccuracySelectChange: function (e : UniSwitchChangeEvent) {
        this.isHighAccuracySelect = e.detail.value
      },
      radioChange(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].value === e.detail.value) {
            this.current = i;
            break;
          }
        }
      },
      radioChangePV(e : UniRadioGroupChangeEvent) {
        for (let i = 0; i < this.providerList.length; i++) {
          if (this.providerList[i].id === e.detail.value) {
            this.currentProvider = i;
            break;
          }
        }
        if (e.detail.value == "system") {
          this.current = 0
        } else if (e.detail.value == "tencent") {
          this.current = 1
        }
      },
      getLocationTap: function () {
        // #ifdef APP
        if (this.providerList.length == 0) {
          uni.showToast({
            title: '未获取到provider，请确定基座中包含location功能',
            icon: "error"
          })
          console.log("未获取到provider，请确定基座中包含location功能")
          return
        }
        // #endif
        uni.showLoading({
          title: '定位中'
        })
        uni.getLocation(({
          // #ifdef APP
          provider: this.providerList[this.currentProvider].id,
          // #endif
          type: this.items[this.current].value,
          altitude: this.altitudeSelect,
          isHighAccuracy: this.isHighAccuracySelect,
          geocode: this.geocodeSelect,
          success: (res : any) => {
            uni.hideLoading()
            this.exeRet = JSON.stringify(res)
          },
          fail: (res : any) => {
            uni.hideLoading()
            this.exeRet = JSON.stringify(res)
          },
          complete: (res : any) => {
            uni.hideLoading()
            this.exeRet = JSON.stringify(res)
          }
        }));
      },

      // 仅用于自动化测试
      jestGetLocation() {
        this.jest_complete = false
        this.jest_errCode = 0
        uni.getLocation(({
          // #ifdef APP
          provider: this.jest_provider,
          // #endif
          type: this.jest_type,
          altitude: this.jest_isAltitude,
          isHighAccuracy: this.jest_isHighAccuracy,
          geocode: this.jest_isGeocode,
          success: (res) => {
            if (res.address != null) {
              this.jest_address = res.address!
            }
            this.jest_longitude = res.longitude
            this.jest_latitude = res.latitude
            this.jest_altitude = res.altitude
            this.jest_complete = true
          },
          fail: (err) => {
            this.jest_errCode = err.errCode
            this.jest_complete = true
          }
        }));
      }
    }
  }
</script>

<style>
  .get-location-result {
    /* #ifdef WEB || MP */
    word-break: break-all;
    /* #endif */
  }
</style>