Uniapp verwendet vue3 und ts, um kleine Programme zu entwickeln, um den Standort der Benutzerstadt zu ermitteln

Die Funktion dieser Komponente: Sie kann neu positioniert werden, um den spezifischen Standort des Benutzers zu ermitteln. Dies wird über die getLocation-API und die Amap-API abgerufen. Die getLocation-API muss im Hintergrund der öffentlichen WeChat-Plattform angewendet werden>Entwicklungsmanagement>Schnittstellenverwaltung Das ist möglich Verwenden Sie es nur, sonst können Sie es nicht verwenden. Es scheint sehr schwierig zu sein, sich für diese Schnittstelle zu bewerben und erfordert Fähigkeiten. Ich hoffe, dass sich jeder bewerben kann. Die API von Amap muss vom Backend von Amap bezogen werden, und einzelne Entwickler dürfen täglich maximal 5.000 verwenden.

Sie können auch auf die Buchstaben rechts klicken, um schnell zur entsprechenden Stadt zu springen. Sie können auf beliebte Städte oder Städtelisten klicken, um eine Stadt schnell zu finden.​ 

Stadtseitenanzeige auswählen: 

Spezifischer 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>