uni-app(位置1)

news2025/4/2 6:45:27

文章目录

  • 一、获取当前的地理位置、速度 uni.getLocation(OBJECT)
  • 二、打开地图选择位置 uni.chooseLocation(OBJECT)
  • 三、使用应用内置地图查看位置。uni.openLocation(OBJECT)


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

  • App平台 manifest中配置好自己的地图厂商key,在地图厂商的后台,填写正确包名和证书摘要。地图厂商的sdk会在运行时校验key、包名、证书的一致性
  • Web平台 manifest中配置好自己的地图厂商key,使用web接口如涉及白名单,需确保自己的域名在地图厂商那里正确配置了域名白名单
  • 确保在地图厂商那里配额足够
  • 确保在地图厂商那里有周边服务的权限。否则无法获取周围地址
  • 如果运行在微信浏览器中,可以使用微信的jssdk的定位能力。这个是微信向腾讯地图申请的key,开发者无需配置自己的key。
  1. OBJECT 参数说明
    参数名类型必填说明平台差异说明
    typeString默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于 uni.openLocation 和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
    altitudeBoolean传入 true 会返回高度信息,由于获取高度需要较高精确度,会减慢接口返回速度抖音小程序、飞书小程序、支付宝小程序不支持
    geocodeBoolean默认false,是否解析地址信息仅App平台支持(安卓需指定 type 为 gcj02 并配置三方定位SDK)
    highAccuracyExpireTimeNumber高精度定位超时时间(ms),指定时间内返回最高精度,该值3000ms以上高精度定位才有效果App (3.2.11+)、H5 (3.2.11+)、微信小程序 (基础库 2.9.0+)
    timeoutString默认为 5,定位超时时间,单位秒仅飞书小程序支持
    cacheTimeoutNumber定位缓存超时时间,单位秒;每次定位缓存当前定位数据,并记下时间戳,当下次调用在cacheTimeout之内时,返回缓存数据仅飞书小程序、支付宝小程序支持
    accuracyString默默认为 high,指定期望精度,支持 high,best。当指定 high 时,期望精度值为100m,当指定 best 时期望精度值为20m。当定位得到的精度不符合条件时,在timeout之前会继续定位,尝试拿到符合要求的定位结果仅飞书小程序支持
    isHighAccuracyBoolean开启高精度定位App (3.4.0+)、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)
    successFunction接口调用成功的回调函数,返回内容详见返回参数说明。
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
  2. success 返回参数说明
    参数说明
    latitude纬度,浮点数,范围为-90~90,负数表示南纬
    longitude经度,浮点数,范围为-180~180,负数表示西经
    speed速度,浮点数,单位m/s
    accuracy位置的精确度
    altitude高度,单位 m
    verticalAccuracy垂直精度,单位 m(Android 无法获取,返回 0)
    horizontalAccuracy水平精度,单位 m
    address地址信息(仅App端支持,需配置geocode为true)
    <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 参数说明
    参数名类型必填说明平台差异说明
    latitudeNumber目标地纬度微信小程序(2.9.0+)、H5-Vue3(3.2.10+)
    longitudeNumber目标地经度微信小程序(2.9.0+)、H5-Vue3(3.2.10+)
    keywordString搜索关键字,仅App平台支持
    useSecureNetworkBoolean是否通过安全网络调用地点搜索、逆地址解析,默认false
    successFunction接口调用成功的回调函数,返回内容详见返回参数说明。
    failFunction接口调用失败的回调函数(获取定位失败、用户取消等情况下触发)
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
  2. success 返回参数说明
    参数说明
    name位置名称
    address详细地址
    latitude纬度,浮点数,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系。
    longitude经度,浮点数,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系。
    <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 参数说明
参数名类型必填说明平台差异说明
latitudeFloat纬度,范围为-90~90,负数表示南纬,使用 gcj02 国测局坐标系
longitudeFloat经度,范围为-180~180,负数表示西经,使用 gcj02 国测局坐标系
scaleInt缩放比例,范围5~18,默认为18微信小程序
nameString位置名支付宝必填
addressString地址的详细说明支付宝必填
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
<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>

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2303660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RabbitMQ服务异步通信

消息队列在使用过程中&#xff0c;面临着很多实际问题需要思考&#xff1a; 1. 消息可靠性 消息从发送&#xff0c;到消费者接收&#xff0c;会经理多个过程&#xff1a; 其中的每一步都可能导致消息丢失&#xff0c;常见的丢失原因包括&#xff1a; 发送时丢失&#xff1a; 生…

CSS基础(浮动、相对定位、绝对定位、固定定位、粘性定位、版心、重置默认样式)

文章目录 1. 浮动&#xff08;float&#xff09;1.1 简介1.2 元素浮动后的特点1.3 脱离文档流示例图1.4 浮动产生的影响1.4.1 积极影响1.4.2 消极影响 1.5 解决浮动产生的影响1.5.1 清除浮动&#xff08;Clearfix&#xff09;1.5.2 创建新的块格式化上下文&#xff08;BFC&…

Spring Cloud — Hystrix 服务隔离、请求缓存及合并

Hystrix 的核心是提供服务容错保护&#xff0c;防止任何单一依赖耗尽整个容器的全部用户线程。使用舱壁隔离模式&#xff0c;对资源或失败单元进行隔离&#xff0c;避免一个服务的失效导致整个系统垮掉&#xff08;雪崩效应&#xff09;。 1 Hystrix监控 Hystrix 提供了对服务…

RagFlow+Ollama 构建RAG私有化知识库

RagFlowOllama 构建RAG私有化知识库 关于RAG一、什么是RAGFlow一、RAGFlow 安装配置测服已有服务&#xff1a; mysql、redis、elasticsearch 二、RAGFlow 配置 ollama&#xff1a;本地运行大型语言模型的工具软件。用户可以轻松下载、运行和管理各种开源 LLM。降低使用门槛&…

【Linux】【网络】不同子网下的客户端和服务器通信

【Linux】【网络】不同子网下的客户端和服务器通信 前两天在进行socket()网络编程并进行测试时&#xff0c;发现在不同wifi下两个电脑无法进行连接&#xff0c;大概去查找了如何解决 看到可以使用 frp 这个快速反向代理实现。 frp 可让您将位于 NAT 或防火墙后面的本地服务器…

SpringBoot教程(十四) SpringBoot之集成Redis

SpringBoot教程&#xff08;十四&#xff09; | SpringBoot之集成Redis 一、Redis集成简介二、集成步骤 2.1 添加依赖2.2 添加配置2.3 项目中使用之简单使用 &#xff08;举例讲解&#xff09;2.4 项目中使用之工具类封装 &#xff08;正式用这个&#xff09;2.5 序列化 &…

OpenHarmony分布式数据管理子系统

OpenHarmony分布式数据管理子系统 简介 目录 组件说明 分布式数据对象数据共享分布式数据服务Key-Value数据库首选项关系型数据库标准数据化通路 相关仓 简介 子系统介绍 分布式数据管理子系统支持单设备的各种结构化数据的持久化&#xff0c;以及跨设备之间数据的同步、…

单片机 Bootloade与二进制文件的生成

单片机的 Bootloader 是一种特殊的程序&#xff0c;负责在单片机上电后初始化硬件、更新用户应用程序&#xff08;固件&#xff09;&#xff0c;并将控制权移交给用户程序。以下是其运行机制和关键流程的详细说明&#xff1a; 1、单片机 Bootloader 的核心作用 固件更新&…

MySQL数据库(3)—— 表操作

目录 一&#xff0c;创建表 1.1 创建表的SQL 1.2 演示 二&#xff0c;查看表 三&#xff0c;修改表 四&#xff0c;删除表 常用的表操作会涉及到两种SWL语句 DDL&#xff08;Data Definition Language&#xff09;数据定义语言&#xff1a;建表、改表、删表等&#xff0…

Springboot + Ollama + IDEA + DeepSeek 搭建本地deepseek简单调用示例

1. 版本说明 springboot 版本 3.3.8 Java 版本 17 spring-ai 版本 1.0.0-M5 deepseek 模型 deepseek-r1:7b 需要注意一下Ollama的使用版本&#xff1a; 2. springboot项目搭建 可以集成在自己的项目里&#xff0c;也可以到 spring.io 生成一个项目 生成的话&#xff0c;如下…

七星棋牌源码高阶技术指南:6端互通、200+子游戏玩法深度剖析与企业级搭建实战(完全开源)

在棋牌游戏行业高速发展的今天&#xff0c;如何构建一个具备高并发、强稳定性与多功能支持的棋牌游戏系统成为众多开发者和运营团队关注的焦点。七星棋牌全开源修复版源码 凭借其 六端互通、200子游戏玩法、多省区本地化支持&#xff0c;以及 乐豆系统、防沉迷、比赛场、AI智能…

HarmonyOS 开发套件 介绍 ——上篇

HarmonyOS 开发套件 介绍 ——上篇 在当今科技飞速发展的时代&#xff0c;操作系统作为智能设备的核心&#xff0c;其重要性不言而喻。而HarmonyOS&#xff0c;作为华为推出的全新操作系统&#xff0c;正以其独特的魅力和强大的功能&#xff0c;吸引着越来越多的开发者和用户的…

网络空间安全(1)web应用程序的发展历程

前言 Web应用程序的发展历程是一部技术创新与社会变革交织的长卷&#xff0c;从简单的文档共享系统到如今复杂、交互式、数据驱动的平台&#xff0c;经历了多个重要阶段。 一、起源与初期发展&#xff08;1989-1995年&#xff09; Web的诞生&#xff1a; 1989年&#xff0c;欧洲…

JUC并发—9.并发安全集合三

大纲 1.并发安全的数组列表CopyOnWriteArrayList 2.并发安全的链表队列ConcurrentLinkedQueue 3.并发编程中的阻塞队列概述 4.JUC的各种阻塞队列介绍 5.LinkedBlockingQueue的具体实现原理 6.基于两个队列实现的集群同步机制 1.并发安全的数组列表CopyOnWriteArrayList …

Baklib云智协同:数字资产赋能企业效能跃升

内容概要 在数字化转型加速的背景下&#xff0c;Baklib通过构建智能化的知识中台架构&#xff0c;为企业打造了贯穿知识采集、整合、应用的全链路解决方案。该平台以动态知识图谱为核心技术底座&#xff0c;支持文档、音视频、代码等20余种格式的数字资产全生命周期管理&#…

wordpress adrotate插件 文件上传漏洞

当你爆破进wordpress后台但权限不是管理员的时&#xff0c;如果你有adrotate插件操作权限可以用adrotate的文件上传功能get webshell 该漏洞需要AdRotate版本 < 5.13.3 第一步按顺序点击上传文件 在这里文件一定要压缩成zip格式&#xff0c;上传的时候也是上传这个zip 上…

Python爬虫入门到精通:从零开始的数据采集之旅

一、网络世界的"小蜘蛛":什么是爬虫? 想象一下,你是一只勤劳的小蜘蛛,每天在互联网这张巨大的网上爬来爬去。你不需要自己织网,只需要顺着别人织好的网络路径,把有价值的信息收集到自己的小篮子里。这就是爬虫最形象的比喻——一个自动化的信息采集程序。 Py…

Transformer解析——(四)Decoder

本系列已完结&#xff0c;全部文章地址为&#xff1a; Transformer解析——&#xff08;一&#xff09;概述-CSDN博客 Transformer解析——&#xff08;二&#xff09;Attention注意力机制-CSDN博客 Transformer解析——&#xff08;三&#xff09;Encoder-CSDN博客 Transforme…

毕业项目推荐:基于yolov8/yolov5/yolo11的番茄成熟度检测识别系统(python+卷积神经网络)

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…

Blaze RangePartitioning 算子Native实现全解析

引言&#xff1a;本文将全面且深入地解析Blaze RangePartitioning算子的Native实现过程。相较于原生Spark&#xff0c;RangePartitioning的Native实现在执行时间上达到了30%的显著下降&#xff0c;同时在资源开销方面节省了高达76%。这一改进大幅降低了运行成本&#xff0c;展现…