uniapp选个城市定个位置你会了吗（四 picker选择城市的使用并获取定位位置）
先看一下我们最终实现的效果
1、认识picker选择器
接下来我们实现一下省市区选择器的下拉操作
官方的介绍在这里 uniapp.dcloud.net.cn/component/p…
picker选择器是从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。
这里我们使用的就是他的省市区选择器类型，全部技术就是在uniapp之中采用vue3写法利用picker实现一个省市区选择器，并且我们不使用外部插件来实现。
2、使用选择器picker
👉 接下来我们可以先在文件下common里面新建一个文件city.json ，这个文件部分专门来存放城市数据,这里我们简单的举个例子。
我们的城市下面的数据是这样子的
3、搭建我们的城市选择
最后我们的效果是这样子的：
接下来我们就去搭建最简单的选择城市
👉 接下来我们搭建一个最简单的部分，选择城市然后确认城市的弹出窗
这里我们直接拿微信给我们提供的picker部分进行实现，地址在这里 uniapp.dcloud.net.cn/component/p…
<picker
mode="selector"
:range="cities"
:value="selectedCityIndex"
@change="onCityChange">
<view class="picker">
{{ selectedCity || '请选择城市' }}
</view>
</picker>
然后我们写一下其中数据的含义
- CityData 这个就是我们在选择范围内的一个数组数据
- selectedCityIndex 是我们绑定的值，最后通过这个我们拿到其中选择的城市数据
- @change="onCityChange"事件，我们通过这个去每次监听数据的变化，然后赋值
👉 然后我们完善一下参数和下面方法的完善
<script setup>
import { ref } from 'vue';
const cities = ['北京', '上海', '广州', '深圳', '杭州'];
const selectedCityIndex = ref(0);
const selectedCity = ref(cities[selectedCityIndex.value]);
const onCityChange = (event) => {
const index = event.detail.value;
selectedCityIndex.value = index;
selectedCity.value = cities[index];
}
</script>
然后看一下我们的效果图
输出参数然后我们查看一下
console.log(selectedCity.value,'selectedCity.value');
这里最后我们拿到的selectedCity 就是我们拿到的值。也就是我们的城市位置的下拉其实已经好了 ！
4、获取当前位置
接下来我们简单做一个搜索类型的部分，展示我们如何获取定位，并且回显
👉 这里我们先搭建一下布局，左侧是门店的数量，右侧是我们获取地理位置，这里我们使用一下icon，相关部分的官方文档在这里：
uniapp.dcloud.net.cn/component/u…
然后我们使用的时候需要先进行下载和安装，然后导入我们的HbuildX部分
ext.dcloud.net.cn/plugin?name…
这里就显示我们已经导入了，接下来我们就可以进行使用了
<uni-icons type="contact" size="30"></uni-icons>
这里我们写成这样子就行，然后我们预览一下
👉 这里我们就可以完善点击事件了，点击的时候获取当前的位置
<view class="right locationbox" @click="getLocationAuth">
<view class="txtlocation">重新获取位置</view>
<uni-icons class="locaicon" type="location" size="20"></uni-icons>
</view>
补充上我们的位置
接下来就是实现点击然后去获取我们的位置，但是这里需要注意，就是如果我们使用的是Web平台本API，之前调用了腾讯地图的gcj02坐标免费转换接口，该接口从2024年7月18日起被腾讯逐步下线。相关的文档部分在这里：
uniapp.dcloud.net.cn/api/locatio…
👉 开通相关API权限
这里需要注意，在小程序之中使用定位是需要官方给我们授权的，必须去后台先开通权限。
因为这次定位功能使用的是 GPS 来定位的，这就需要获取用户的地理位置信息。在小程序中，要获取用户的地理位置，微信官方提供了部分 API ，这些 API 有权限要求，先登陆 小程序后台 去申请。
👉 提交申请
登陆后，按路径「开发」-「开发管理」-「接口设置」中找到相关 API ，填写你使用 API 的理由，提交申请即可。
这里我发现应该是这两种都可以使用
官方给我们最简单的调用是这样子的
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
个人未认证，然后这里没有通过，哎，只好简单写写代码实现一下了
主要部分其实也挺简单的！
uni.getLocation({
type: 'gcj02',
geocode: true,
isHighAccuracy: true,
accuracy: "best", // 精度值为20m
success: function(res) {
let lat = res.latitude;
let lng = res.longitude;
let key = '申请到的key'; //申请地址：https://lbs.qq.com/dev/console/application/mine
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng + '&key=' + key,
method: "GET",
success(ress) {
let data = ress.data; //获取到所有定位的数据
let CityName = ress.data.result.address_component.city
that.CityName = CityName
let Street = ress.data.result.address_component.street
that.CityName = Street
uni.setStorage({
key: 'City_Name',
data: Street
})
},
fail() {
uni.showToast({
'title': '对不起，数据获取失败！',
'icon': 'none'
})
}
})
},
})
ok！
5、门店位置和列表
接下里开发我们的门店位置和列表部分
这里就比较简单了，直接放效果！
