uniapp uses vue3 and ts to develop small programs to obtain user city location

The function of this component: it can be repositioned to obtain the user's specific location. This is obtained through the getLocation API and the Amap API. The getLocation API needs to be applied in the WeChat public platform background>Development Management>Interface Management You can only use it, otherwise you can't use it. It seems to be very difficult to apply for this interface and requires skills. I hope everyone can apply. Amap's API needs to be obtained from Amap's backend, and individual developers have a daily limit of 5,000 to use.

You can also click on the letters on the right to quickly jump to the corresponding city. You can click on popular cities or city lists to quickly locate a city.​ 

Select city page display: 

Specific code:

<template>
  <view class="main-Location">
    <!-- 字母区域 -->
    <view class="Location-Letter">
      <view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
      <view v-for="(l, i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)"
        :style="{ 'color': LetterId === l ? '#4662D9' : '#000' }">{
   
   { l }}</view>
    </view>

    <view class="ynq-AutoLocation u_flex jcsb">
      <view class="ynq-AutoAddress">
        <text class="ynq ynq-dizhi"></text>
        <text>当前定位：</text>
        <text>{
   
   { userStore.province }}</text>
      </view>

      <view class="ynq-ReLocation u_flex" @click="getLocationAuth">
        <u-icon name="reload" color="#000"></u-icon>
        <text class="ml5">重新定位</text>
      </view>
    </view>
    <scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
      <!-- 热门城市 -->
      <view class="ynq-HotCity" id="ScrollTop">
        <view class="ynq-HotCityTitle">
          <text class="ynq ynq-fire"></text>
          <text>热门城市</text>
        </view>
        <view class="ynq-HotCityList flex">
          <text class="radius-3" @tap="setProvince(item)" v-for="(item, index) in HotCity" :key="index">{
   
   { item }}</text>
        </view>
      </view>
      <!-- 城市列表 -->
      <view class="ynq-CityList">
        <block v-for="(item, index) in cityList" :key="index">
          <view class="ynq-CityLetter" :id="item.initial">{
   
   { item.initial }}</view>
          <view class="ynq-CityLine">
            <text @tap="setProvince(item_city.name)" v-for="(item_city, name_index) in item.list" :key="name_index">{
   
   {
              item_city.name }}</text>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import cityList from './city'
import useUserStore from '@/store/user';

// 这里我使用了pinia来进行状态管理
const userStore = useUserStore();

let CityName = ref('北京')
const HotCity = ['北京', '深圳', '上海', '成都', '广州', '广东']
const LatterName = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
  'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
let LetterId = ref("")

// 右侧字母跳转到对应的城市
const getLetter = (name) => {
  LetterId.value = name
  console.log("点击名字", name);
  uni.pageScrollTo({
    selector: '#' + name,
    duration: 300
  })
}

// 点击城市名字存储
const setProvince = (Name) => {
  userStore.setUser("province", Name)
  CityName.value = Name
  //跳转返回
  uni.navigateBack()
}

// 根据API获取用户位置
const getLocationAuth = () => {
  // uni.choose
  uni.getSystemInfo({
    success(res) {
      console.log('getSystemInfo', res);
      let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
      let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
      if (locationEnabled == false || locationAuthorized == false) {
        //手机定位服务（GPS）未授权
        console.log('手机定位服务');
        uni.showModal({
          title: '提示',
          content: '请打开定位服务功能',
          showCancel: false, // 不显示取消按钮
          success: (res) => {
            console.log('showModalres', res);
          }
        })
      } else {
        console.log('uni.authorize');
        uni.getLocation({
          geocode: true, // 返回城市信息
          success: function (loction) {
            console.log("getLocation", loction);
            uni.request({
              url: 'https://restapi.amap.com/v3/geocode/regeo',
              method: 'GET',
              data: {
                key: '高德地图的key',
                location: loction.longitude + ',' + loction.latitude
              },
              success: (resda: any) => {
                console.log("resda", resda)
                const { province, district } = resda.data.regeocode.addressComponent
                CityName.value = province
                userStore.setUser("province", province)
                uni.navigateBack()
              }
            })
          }
        })
      }
    }
  })
}

</script>
 
<style lang="scss" scoped>
.main-Location {
  height: 100vh;
}

.ynq-AutoLocation {
  width: calc(100% - 40rpx);
  background: rgba(250, 250, 250, .5);
  padding: 20rpx 20rpx;

  text.ynq {
    font-size: 32rpx;
    margin-right: 10rpx;
  }

  text {
    font-size: 30rpx;
  }
}

.ynq-HotCity {
  padding: 20rpx;
}

.ynq-HotCityTitle {
  padding: 0rpx 0rpx;

  text.ynq {
    margin-right: 10rpx;
    color: #ff0000;
    font-size: 32rpx;
  }

  text {
    font-size: 30rpx;
  }
}

.ynq-HotCityList {
  padding: 20rpx 0 0 0;
  flex-wrap: wrap !important;

  text {
    width: 190rpx;
    display: inline-block;
    text-align: center;
    background: rgba(200, 200, 200, .2);
    font-size: 26rpx;
    margin: 10rpx;
    padding: 20rpx 10rpx;
  }
}

.Location-Letter {
  position: fixed;
  right: 5rpx;
  top: 180rpx;
  width: 30rpx;
  z-index: 100;

  view {
    display: block;
    width: 30rpx;
    text-align: center;
    height: 35rpx;
    line-height: 35rpx;
    font-size: 22rpx;
    transition: ease .3s;
    -webkit-transition: ease .3s;
  }
}

.ynq-CityList {
  padding: 0px 40rpx 0 20rpx;

  .ynq-CityLetter {
    line-height: 30rpx;
    height: 40rpx;
    font-size: 24rpx;
    border-bottom: 1px solid #f7f7f7;
    padding-left: 10rpx;
    color: #909090;
  }

  .ynq-CityLine {
    margin: 20rpx 0px;

    text {
      display: block;
      line-height: 60rpx;
      padding: 0px 10rpx;
      font-size: 30rpx;
      color: #767676;

      &:nth-child(even) {
        background-color: rgba(200, 200, 200, .12);
      }
    }
  }
}

.ynq-ScrollView {
  height: calc(100vh - 160rpx);
}

.Click-Latter {
  font-size: 30rpx !important;
}

.jcsb {
  justify-content: space-between;
}

.u_flex {
  display: flex;
  align-items: center;
}
</style>