uni-app(位置1)

文章目录


一、获取当前的地理位置、速度 uni.getLocation(OBJECT)

  • App平台 manifest中配置好自己的地图厂商key,在地图厂商的后台,填写正确包名和证书摘要。地图厂商的sdk会在运行时校验key、包名、证书的一致性
  • Web平台 manifest中配置好自己的地图厂商key,使用web接口如涉及白名单,需确保自己的域名在地图厂商那里正确配置了域名白名单
  • 确保在地图厂商那里配额足够
  • 确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
  • 如果运行在微信浏览器中,可以使用微信的jssdk的定位能力。这个是微信向腾讯地图申请的key,开发者无需配置自己的key。
  1. OBJECT 参数说明

    参数名 类型 必填 说明 平台差异说明
    type String 默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation 和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
    altitude Boolean 传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度 抖音小程序、飞书小程序、支付宝小程序不支持
    geocode Boolean 默认false,是否解析地址信息 仅App平台支持(安卓需指定 type 为 gcj02 并配置三方定位SDK)
    highAccuracyExpireTime Number 高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果 App (3.2.11+)、H5 (3.2.11+)、微信小程序 (基础库 2.9.0+)
    timeout String 默认为 5,定位超时时间,单位秒 仅飞书小程序支持
    cacheTimeout Number 定位缓存超时时间,单位秒;每次定位缓存当前定位数据,并记下时间戳,当下次调用在cacheTimeout之内时,返回缓存数据 仅飞书小程序、支付宝小程序支持
    accuracy String 默默认为 high,指定期望精度,支持 high,best。当指定 high 时,期望精度值为100m,当指定 best 时期望精度值为20m。当定位得到的精度不符合条件时,在timeout之前会继续定位,尝试拿到符合要求的定位结果 仅飞书小程序支持
    isHighAccuracy Boolean 开启高精度定位 App (3.4.0+)、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)
    success Function 接口调用成功的回调函数,返回内容详见返回参数说明。
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
  2. success 返回参数说明

    参数 说明
    latitude 纬度,浮点数,范围为-90~90,负数表示南纬
    longitude 经度,浮点数,范围为-180~180,负数表示西经
    speed 速度,浮点数,单位m/s
    accuracy 位置的精确度
    altitude 高度,单位 m
    verticalAccuracy 垂直精度,单位 m(Android 无法获取,返回 0)
    horizontalAccuracy 水平精度,单位 m
    address 地址信息(仅App端支持,需配置geocode为true)
    javascript 复制代码
    <template>
    	<view style="padding: 20px;">
    		<button @click="getLocation">获取地理位置</button>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    		};
    	},
    	onLoad() {
    	  
    	},
    	methods: {
    		getLocation() {
    			uni.getLocation({
    				type: 'wgs84',
    				success: function (res) {
    					console.log(res)
    					console.log('当前位置的经度:' + res.longitude);
    					console.log('当前位置的纬度:' + res.latitude);
    				}
    			})
    		}
    	},
    };	
    </script>


    需要配置权限,若没有配置会有弹窗提示

    若没有配置会有弹窗提示

    配置完,需要点击允许

二、打开地图选择位置 uni.chooseLocation(OBJECT)

  • 如果是cli或离线打包,需要配套升级cli和离线sdk
  • manifest中配置好自己的地图厂商key。web和app都需要。一般标准基座正常,自定义基座和打包后异常,都是这个原因
  • 确保在地图厂商那里配额足够
  • 确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
  • web平台确保自己的域名在地图厂商那里正确配置了域名白名单
    可使用差异:App,H5,微信小程序,支付宝小程序,百度小程序,抖音小程序、飞书小程序,QQ小程序
  1. OBJECT 参数说明

    参数名 类型 必填 说明 平台差异说明
    latitude Number 目标地纬度 微信小程序(2.9.0+)、H5-Vue3(3.2.10+)
    longitude Number 目标地经度 微信小程序(2.9.0+)、H5-Vue3(3.2.10+)
    keyword String 搜索关键字,仅App平台支持
    useSecureNetwork Boolean 是否通过安全网络调用地点搜索、逆地址解析,默认false
    success Function 接口调用成功的回调函数,返回内容详见返回参数说明。
    fail Function 接口调用失败的回调函数(获取定位失败、用户取消等情况下触发)
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
  2. success 返回参数说明

    参数 说明
    name 位置名称
    address 详细地址
    latitude 纬度,浮点数,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系。
    longitude 经度,浮点数,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系。
    javascript 复制代码
    <template>
    	<view style="padding: 20px;">
    		<button @click="getLocation">获取地理位置</button>
    	</view>
    </template>
    
    <script>
    export default {
    	data() {
    		return {
    		};
    	},
    	onLoad() {},
    	methods: {
    		getLocation() {
    			uni.chooseLocation({
    				success: function (res) {
    					console.log(res)
    					console.log('位置名称:' + res.name);
    					console.log('详细地址:' + res.address);
    					console.log('纬度:' + res.latitude);
    					console.log('经度:' + res.longitude);
    				}
    			});
    		}
    	},
    };	
    </script>


    点击确认后打印的位置

    注意:

    • 不同端,使用地图选择时基于的底层地图引擎不一样,详见地图map组件的地图服务商支持。
      • app 中也可以使用百度定位,在 manifest 中配置,打包后生效。
      • app-nvue 里只能用高德定位和Google地图(3.4+),不能用百度地图。另外选择地图、查看地图位置的API也仅支持高德地图和Google地图(3.4+)。所以App端如无特殊必要,建议使用高德地图。
    • H5 端 使用地图和定位相关,需要在 manifest.json 内配置腾讯或谷歌等三方地图服务商申请的秘钥(key)。
    • 微信内置浏览器 中可使用微信js sdk,详见
    • chooseLocation 属于封装型API,开发者若觉得不够灵活,可自行基于原始的 map 组件进行封装。插件市场已经有各种封装样例了。
    • 若 Android App端 位置不准,见上文 uni.getLocation 的注意事项
    • 微信小程序在2023年10月17日之后,使用API需要配置隐私协议

三、使用应用内置地图查看位置。uni.openLocation(OBJECT)

可使用差异:App,H5,微信小程序,支付宝小程序, 百度小程序 ,抖音小程序、飞书小程序,元服务 小红书小程序

  1. OBJECT 参数说明
参数名 类型 必填 说明 平台差异说明
latitude Float 纬度,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系
longitude Float 经度,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系
scale Int 缩放比例,范围5~18,默认为18 微信小程序
name String 位置名 支付宝必填
address String 地址的详细说明 支付宝必填
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
javascript 复制代码
<template>
	<view style="padding: 20px;">
		<button @click="getLocation">获取地理位置</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		getLocation() {
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function (res) {
					console.log(res)
					const latitude = res.latitude;
					const longitude = res.longitude;
					uni.openLocation({
						latitude: latitude,
						longitude: longitude,
						success: function (succ) {
							console.log(succ, 'success');
						}
					});
				}
			});
		}
	},
};	
</script>


相关推荐
SEO_juper4 分钟前
2026年用Python分析网站访问日志:看清Googlebot和AI爬虫怎么爬你的站(附完整代码)
开发语言·前端·seo·独立站·谷歌优化
摸鱼仙人~5 分钟前
React 原理进阶:彻底理解 re-render、React.memo、useMemo 与 useCallback
前端·vue.js
YHHLAI7 分钟前
从 SPA 到 Next.js 全栈:一个大前端的 SEO 突围笔记
javascript
IMPYLH9 分钟前
HTML 的 <small> 元素
前端·网络·html
IT_陈寒10 分钟前
Vue的响应式让我加班到凌晨,问题竟出在这个不起眼的地方
前端·人工智能·后端
AlienZHOU9 小时前
AI Coding 时代下,我的技术面试实践分享
前端·后端·面试
Captaincc12 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师13 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen14 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒14 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端