uniapp 之定位当前位置 (uni.getLocation,腾讯地图,javascript)

article/2025/7/11 16:46:40

第一种 uniapp
uniapp 封装的方法可以拿到城,市,县,经纬度。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实例:

 //获取位置GetLOcation: function() {var that = this;uni.getLocation({type: 'gcj02',success: (res) => {console.log(res)var latitude = parseFloat(res.latitude);var longitude = parseFloat(res.longitude);}});},

官网地址:https://uniapp.dcloud.io/api/location/location?id=%e6%b3%a8%e6%84%8f

第二种: javascript iframe方法
下面的操作如果你是vue的就直接引入到index.html文件中。

如果是uni-app就比较麻烦了:

1.首先新建一个template.h5.html文件;

2.在manifest.json -> 源码视图 -> h5 -> 添加 “template” : “template.h5.html”
在这里插入图片描述
在创建文件中引入:

<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"src="https://apis.map.qq.com/tools/geolocation?key=腾讯地图key&referer=myapp"></iframe>

在 body 中添加

  <div v-html="str"></div>

在要使用的文件中添加下面代码:

var options = {enableHighAccuracy: true,maximumAge: 30000,timeout: 12000}window.locationCallback = function(err, position) {if (err) {showError(err);return;}showPosition(position);}this.str = '<iframe src="javascript:(function(){ ' +'window.navigator.geolocation.getCurrentPosition(' +'function(position){parent && parent.locationCallback && parent.locationCallback(null,position);}, ' +'function(err){parent && parent.locationCallback && parent.locationCallback(err);}, ' +'{enableHighAccuracy : ' + options.enableHighAccuracy + ', maximumAge : ' + options.maximumAge + ', timeout :' +options.timeout + '})' +';})()" style="display:none;"></iframe>';window.showPosition = function(position) {var lat = position.coords.latitude; //纬度var lag = position.coords.longitude; //经度// var lags =  position.address.province;//城市名称// alert(lags)// alert('纬度:' + lat + ',经度:' + lon)}window.showError = function(error) {switch (error.code) {case error.PERMISSION_DENIED:alert('用户不允许地理定位!');break;case error.POSITION_UNAVAILABLE:alert('无法获取当前位置!');break;case error.TIMEOUT:alert('操作超时!');break;case error.UNKNOWN_ERROR:alert('未知错误!');break;}}

第三种: 腾讯地图
支持 浏览器,手机端,app 端目前不太支持。
先去腾讯地图官方申请 key 值 然后到项目中的 manifest.json 文件中的 h5 配置中添加你的腾讯地图 key值
腾讯地图 API 官方地址:https://lbs.qq.com/
在这里插入图片描述
在 项目中的 template.h5.html 文件中引入

<script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=腾讯开发者key值"></script>

应用实例:

let that = thisvar geolocation = new qq.maps.Geolocation("腾讯开发者 key 值", "myapp");var options = {timeout: 8000 //延时};// 定位成功之后调用的方法function showPosition(position) {console.log(position)let lat = position.lat;let lng = position.lng;}function showErr() {// alert('定位失败,请稍后重试');geolocation.getLocation(showPosition, showErr, options);//回调,如果获取定位失败,就重新来一次}geolocation.getLocation(showPosition, showErr, options);

http://chatgpt.dhexx.cn/article/Sm5NNfX0.shtml

相关文章

爆款专栏《Python 黑科技》目录导航丨进度:12/50

《Python 快速入门专栏丨掌握基础》和《Python 黑科技丨练习应用》由 CSDN 博客专家丨全站排名 Top 8 的硬核博主 不吃西红柿 倾力打造&#xff0c;旨在帮助大家快速入门掌握 Python。 更有学习资料&#xff0c;简历和 PPT 模板&#xff0c;微信公众号 【信息技术智库】关注我&…

安卓12解除进程限制方法汇总

一、关于安卓12 使用VMOS PRO 借助电脑激活步骤 第一步&#xff0c;使用usb线将手机连接至电脑。 第二步&#xff0c;打开手机的“开发者选项”&#xff0c;打开USB调试开关&#xff0c;确保手机已进入USB调试模式。 第三步&#xff0c;将激活程序包&#xff08;vmos_activa…

电脑技巧:推荐五款非常棒的小众软件,值得收藏

目录 1、Foodie&#xff08;美食相机&#xff09; 2、黑阈APP 3、Sleep Cycle 睡眠助手APP 4、烧杯——化验APP 5、123看图器 今天小编给大家分享五款非常棒的小众软件&#xff0c;生活中非常实用&#xff0c;感兴趣的朋友欢迎收藏&#xff01; 1、Foodie&#xff08;美食相…

永恒之黑漏洞复现

永痕之黑 1. 永恒之黑漏洞相关信息 漏洞介绍 https://nvd.nist.gov/vuln/detail/CVE-2020-0796 漏洞影响版本&#xff1a; Windows 10 Version 1903 for 32-bit Systems Windows 10 Version 1903 for x64-based Systems Windows 10 Version 1903 for ARM64-based Systems Wi…

手机技巧:推荐一款手机省电、提升流畅度APP

目录 软件详情 基本介绍 软件功能 软件特色 使用方法 软件对比 结论 今天给大家推荐一款手机省电、提升流畅度APP&#xff0c;感兴趣的朋友可以下载一下&#xff01; 软件详情 黑阈app是一款非常实用的系统优化类手机APP。使用它能够禁止软件后台运行耗电&#xff0c;既…

linux usb 黑 白 名单_安卓手机如何一键提升手机性能?用黑阈

安卓手机现状 安卓现在的旗舰机并不比苹果差&#xff0c;但是依然对手机小白很不友好&#xff0c;安卓属于开源&#xff0c;自由度较大&#xff0c;可供发挥的空间更高。需要一定基础才能充分利用安卓的性能。而苹果依然是针对小白的&#xff0c;系统会自行优化&#xff0c;自由…

如何root安卓手机_安卓手机如何一键提升手机性能?用黑阈

安卓手机现状 安卓现在的旗舰机并不比苹果差&#xff0c;但是依然对手机小白很不友好&#xff0c;安卓属于开源&#xff0c;自由度较大&#xff0c;可供发挥的空间更高。需要一定基础才能充分利用安卓的性能。而苹果依然是针对小白的&#xff0c;系统会自行优化&#xff0c;自由…

黑阈使用方法

一、从各大应用市场载「 黑阈 」。 二、切换到「 使用 」的页面&#xff0c;选择「 进入黑阈 」 三、打开「 开发者选项 」跟 「 USB调试 」 四、连接 USB &#xff0c;允许 USB 调试 五、电脑打开下面这个网页&#xff0c;下载相应的 SDK。 https://developer.android.goo…

使用树莓派3b+作为黑阈激活器

黑阈&#xff08;y&#xff09;不需要 root 就能待机&#xff08;App Standby&#xff0c;Android 6.0 引入&#xff0c;部分设备不支持&#xff09;或强行停止应用&#xff0c;防止应用持续运行。 黑阈不处理非“黑阈清单”内应用。当您启动应用&#xff0c;使用完退出&#x…

枚举类型是什么

C语言详解 - 枚举类型 注&#xff1a;以下全部代码的执行环境为VC 6.0 在程序中&#xff0c;可能需要为某些整数定义一个别名&#xff0c;我们可以利用预处理指令#define来完成这项工作&#xff0c;您的代码可能是&#xff1a; #define MON 1 #define TUE 2 #define WED 3 …

ts枚举类

参考官方文档:https://www.tslang.cn/docs/handbook/enums.html 理解:枚举是列举固定几个值,直接定义变量的话的话可以随意定义&#xff0c;枚举只能使用你定义好的几个值,枚举是个类&#xff0c;定义的值是基本类型,类能有更多操作 例如你定义一个方法接收一个参数&#xff0…

Java 枚举类型原理分析为什么枚举比用静态变量多消耗两倍的内存

一 起源&#xff1a;枚举是一种特殊的数据类型&#xff0c;一般用来列举有限个、同类型的常量。它能保证参数的安全性&#xff0c;如方法声明传入的参数&#xff0c;必须是指定枚举中的常量。但是Android开发文档指出&#xff0c;使用枚举会比使用静态变量多消耗2倍内存。为什么…

java枚举转json

1、背景 java后端的枚举类型&#xff0c;要展示到前端&#xff0c;提供给用户进行下拉选择&#xff0c;java后端需要封装enum为json字符串提供给前端&#xff0c;需要首先将枚举类型转为list&#xff0c;然后再转为json字符串。 2、方案 方案也很简单&#xff0c;使用EnumSe…

枚举类的使用

文章目录 前言一、自定义枚举类二、使用enum定义枚举类1.Enum类的主要方法2.实现接口的枚举类 前言 1&#xff09; 类的对象只有有限个&#xff0c;确定的。举例如下&#xff1a; 星期&#xff1a;Monday(星期一)、…、Sunday(星期天) 性别&#xff1a;Man(男)、Woman(女) 季节…

用户名枚举

一. 漏洞描述 常存在于系统登录界面&#xff0c;由于错误配置或设计缺陷&#xff0c;当向系统提交有效账户和无效账户时&#xff0c;服务器会有不同的响应&#xff0c;利用服务器响应的不同&#xff0c;攻击者可以获取到系统已经存在的账户&#xff0c;可用于暴力破解&#xff…

c++枚举

一、枚举类型的定义 枚举类型的定义&#xff1a;枚举类型(enumeration)是 C 中的一种派生数据类型&#xff0c;它是由用户定义的若干枚举常量的集合。 定义格式&#xff1a;枚举类型的定义格式为&#xff1a;enum <类型名> {<枚举常量表>}; 例如&#xff1a; en…

java枚举类及面试题为什么枚举实现单例模式是安全的?

目录 枚举类为什么会有枚举类&#xff1f;枚举类的使用枚举类的常用方法枚举的构造 枚举类型能被反射吗&#xff1f;为什么枚举实现单例模式是安全的&#xff1f; 枚举类的优缺点 枚举类 为什么会有枚举类&#xff1f; 假如说程序中有一些颜色的状态&#xff0c;或者说消息的类…

什么是枚举?

枚举有两种存在形式&#xff1a; 第一种是计算机编程语言的一种数据类型&#xff0c;enum&#xff0c;即枚举类型。在实际问题中&#xff0c;一些变量的取值被限制在一个有限的范围内&#xff0c;例如&#xff1a;一个星期内只有七天&#xff0c;一年只有十二个月…C语言为此提…

什么是枚举【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;什么是枚举&#xff0c;枚举是如何定义、初始化的&#xff0c;以及枚举到底如何使用&#xff0c;还有枚举这种语法存在的优点有那些&#x1f440;。 文章目录 一、什么是枚举&#x1f356;二、枚举类型的定义&#x1f356;三、枚举…

输入文字后不会自动变长的下划线如何制作

问题&#xff1a;设置下划线时&#xff0c;随着文字增多&#xff0c;下划线延长&#xff0c;出现不对齐的情况 &#xff0c;如下图 解决&#xff1a;制作表格&#xff0c;把不需要的边框删除&#xff0c;就我现在需要的效果&#xff0c;实现步骤如下 制作表格 设置单元格的边距…