uniapp打开地图选择位置(查看位置)详解

开发小程序的时候,有时候要做打开地图选择位置和打开地图查看当前位置。我前段时间刚做的时候也是一脸懵逼(新手上路)。

我是用的uniapp做的,配置方法和原生小程序的配置方法不太一样。下面就是我写的配置方法以及步骤,感兴趣的大家可以看看。

第一步:uniapp需要先调取用户授权请求询问用户是否授权
uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})

详细文档说明在这链接: 点击这里.

第二步:我这里是做获取用户位置,所以其他功能暂时就不说了。
2.1:找到uniapp配置文件
找到uniapp配置文件
2.2:找到小程序配置勾选位置接口,描述里所填项就是授权时向用户展示的授权原因
在这里插入图片描述

剩下的就可以开始调取不同的api,比如说选择位置和查看位置
打开地图选择位置官方文档: 点击这里
打开地图选择位置官方文档: 点击这里

	// 点击调起地图选择位置
			goMap() {
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.chooseLocation({
    						success: function (res) {
       							 console.log('位置名称:' + res.name);
       							 console.log('详细地址:' + res.address);
       							 console.log('纬度:' + res.latitude);
       							 console.log('经度:' + res.longitude);
   							 }
						});
					},
					fail(err) {
				
					}
				})
			},
	// 点击调起地图查看位置
			goMap() {
			//查看位置需要传经纬度才能执行
				const lat = parseFloat(latitude)
				const log = parseFloat(longitude)

				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.openLocation({
							latitude: lat,
							longitude: log,
							success: function() {}
						});
					},
					fail(err) {
						
					}
				})
			},

以上就是uniapp打开地图选择位置(查看位置)的完整使用方法。(如有问题,请立即提出。)

UniApp 是一款基于 Vue.js 开发的前端框架,它旨在提供一套跨平台的解决方案,用于快速构建原生应用。其中涉及到的城市区域选择三级联动通常是指在一个下拉菜单组件中,展示一个包含省、市、区(县)三个层级的选择列表,用户可以根据需要逐级筛选地理位置。 这种设计常见于需要定位用户所在地区或者设置服务配送范围的应用场景。在 UniApp 中,你可以使用其内置的动态数据绑定和递归组件功能来实现这个效果。首先,你需要准备一个包含所有行政区划数据的数据结构,然后创建一个基础的下拉选项模板,通过 v-for 循环遍历各级数据,并在点击当前项时显示下一层次的选项,直到达到最底层。 以下是一个简化的示例: ```html <template> <view> <select @change="handleSelectChange"> <option v-for="(item, index) in provinces" :key="index" :value="item.id">{{ item.name }}</option> </select> <transition-group name="city-transition"> <view v-if="currentProvince"> <select @change="handleCityChange"> <option v-for="(city, cityIndex) in currentProvince.cities" :key="cityIndex" :value="city.id">{{ city.name }}</option> </select> <!-- 类似地,你可以添加一个区县的三级联动选择 --> <!-- ... --> </view> </transition-group> </view> </template> <script> export default { data() { return { provinces: [], // 假设这是从后台获取的省级数据 currentProvince: null, }; }, methods: { handleSelectChange(province) { this.currentProvince = province; // 清空城市选项 this.$refs.citySelect.children.forEach(child => child.value = ''); }, handleCityChange(city) { // 更新市级数据... }, // 其他处理后续层级联动的方法 }, }; </script> ``` 在这个例子中,`handleSelectChange` 方法会在切换省份时触发,更新 `currentProvince` 并清空下一个层级的选择。后续可以根据实际需求进一步完善。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值