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实现, 也支持腾讯定位。\n
        部分手机因gms兼容不好可能导致无法使用系统定位, gcj国标、逆地理信息等功能需调用内置腾讯定位。</text>
    </view>

    <view class="uni-padding-wrap uni-common-mt">
      <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>
      <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>
      <text>{{ exeRet }}</text>
      <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">
  export type LocationItem = { id : string, name : string, provider ?: UniProvider }
  export type ItemType = { value : string, name : string }

  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
      }
    },
    onLoad: function () {
      this.getProvider()
    },
    methods: {
      getProvider() {
        uni.getProvider({
          service: "location",
          success: (e) => {
            console.log("location success:" + JSON.stringify(e), e.providerObjects.length);
            let array = e.providerIds as string[]
            array.forEach((value : string) => {
              let locationProvider = e.providerObjects.find((item) : boolean => {
                return item.id == value
              })
              if (locationProvider != null) {
                this.providerList.push({
                  name: locationProvider.description,
                  id: locationProvider.id,
                  provider: e.providerObjects.find((item) : boolean => {
                    return item.id == locationProvider.id
                  })
                } as LocationItem);
              }
            })
          },
          fail: (e) => {
            console.log("获取支付通道失败：", e);
          }
        });


        this.providerList.forEach((value, index) => {
          if (value.id == "system") {
            this.currentProvider = index
          }
        })
      },
      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 () {
        if (this.providerList.length == 0) {
          uni.showToast({
            title: '未获取到provider，请确定基座中包含location功能',
            icon: "error"
          })
          console.log("未获取到provider，请确定基座中包含location功能")
          return
        }
        uni.showLoading({
          title: '定位中'
        })
        uni.getLocation(({
          provider: this.providerList[this.currentProvider].id,
          type: this.items[this.current].value,
          altitude: this.altitudeSelect,
          isHighAccuracy: this.isHighAccuracySelect,
          geocode: this.geocodeSelect,
          success: (res : any) => {
            uni.hideLoading()
            console.log(res);
            this.exeRet = JSON.stringify(res)
          },
          fail: (res : any) => {
            uni.hideLoading()
            console.log(res);
            this.exeRet = JSON.stringify(res)
          },
          complete: (res : any) => {
            uni.hideLoading()
            console.log(res);
            this.exeRet = JSON.stringify(res)
          }
        }));


      }

    }
  }
</script>