当前位置: 首页 > news >正文

uniapp小程序,使用腾讯地图获取定位

本篇文章分享一下在实际开发小程序时遇到的需要获取用户当前位置的问题,在小程序开发过程中经常使用到获取定位功能。uniapp官方也提供了相应的API供我们使用。
官网地址:uni.getLocation(OBJECT))
官网获取位置的详细介绍这里就不再讲述了,大家可以点击上方链接去官网查看。
我们本次开发的是小程序,需要注意的是,小程序获取定位使用的是腾讯位置服务,所以需要申请腾讯位置服务的SDK。

腾讯位置服务平台申请密钥和下载SDK

申请步骤:详细文档https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
在这里插入图片描述

1、申请开发者秘钥

点击文档中的申请秘钥链接,跳转至腾讯位置服务平台,如下图所示申请即可。(没有账号的先注册账号)
在这里插入图片描述

2、开通webServiceAPI服务

开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

1、申请key
在这里插入图片描述
2、复制申请好的Key值等待使用
在这里插入图片描述

3、下载微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下载地址(点击文字即可跳转)
在这里插入图片描述
下载好解压完成后,我们一般放在根目录下面的common目录下(如下图)
在这里插入图片描述

4、安全域名设置

安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
在这里插入图片描述
到这一步算是申请完成,再配置一下就好了

配置manifest.json文件

在这里插入图片描述
在这里插入图片描述
勾选之后,视图源码会自动加上这此段代码,如果没有可以直接复制手动加上。

 "permission" : {"scope.userLocation" : {"desc" : "为了您更好的体验,请确认获取您的位置"}
}	"requiredPrivateInfos": ["getLocation", "chooseLocation"]

示例代码演示

//引入下载好的SDK
import QQMapWX from "../../common/qqmap-wx-jssdk.js"//获取定位函数示例methods: {//获取位置信息async getLocationInfo() {return new Promise((resolve) => {//位置信息默认数据let location = {longitude: 0,latitude: 0,province: "",city: "",area: "",street: "",address: "",};uni.getLocation({type: "gcj02",success(res) {location.longitude = res.longitude;location.latitude = res.latitude;// 腾讯地图Apiconst qqmapsdk = new QQMapWX({key: 'XXXXXXXXXXXXXXXXXXXXXXXX'  //这里填写自己申请的key});qqmapsdk.reverseGeocoder({location,success(response) {let info = response.result;console.log(info);location.province = info.address_component.province;location.city = info.address_component.city;location.area = info.address_component.district;location.street = info.address_component.street;location.address = info.address;resolve(location);},});},fail(err) {console.log(err)resolve(location);},});});}}//调用函数
//函数调用可以自己去选择在页面加载的时候加载,或者有一个触发条件。(我是用的页面加载,所以放在了onload方法中)。async onLoad() {const location = await this.getLocationInfo();this.position = location.address
},
//注意:这里使用的this.position,是在data中定义的,代码示例中没有写。需要自己在data方法中定一个position变量//页面渲染
<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">当前定位:{{position}}
</view>

到此该功能完整实现!

相关文章:

uniapp小程序,使用腾讯地图获取定位

本篇文章分享一下在实际开发小程序时遇到的需要获取用户当前位置的问题&#xff0c;在小程序开发过程中经常使用到获取定位功能。uniapp官方也提供了相应的API供我们使用。 官网地址&#xff1a;uni.getLocation(OBJECT)) 官网获取位置的详细介绍这里就不再讲述了&#xff0c;大…...

Reactive 编程-Project Reactor

Reactive 编程与 Project Reactor Reactive 编程是一种编程范式&#xff0c;主要用于处理异步数据流。它旨在通过声明式的编程方式处理事件驱动的非阻塞任务&#xff0c;特别适合于构建响应式、可扩展、高并发的应用。随着互联网应用规模的扩大和响应速度的提升需求&#xff0…...

splice用法

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

Redis - 缓存

文章目录 目录 文章目录 1. 什么是缓存&#xff1f; 2. 使用Redis作为缓存 2.1 关系型数据库的缺点 3. 缓存的更新策略 3.1 定期生成 3.2 实时生成 缓存淘汰策略 4. 缓存预热, 缓存穿透, 缓存雪崩 和 缓存击穿 缓存预热 缓存穿透 缓存雪崩 缓存击穿 总结 1. 什么…...

基于SpringBoot+Vue的养老院管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…...

多线程爬虫接入代理IP:高效数据抓取的秘诀

在现代网络环境中&#xff0c;爬虫已经成为获取信息的利器。然而&#xff0c;随着网站反爬措施的不断升级&#xff0c;单线程爬虫往往无法满足需求。多线程爬虫与代理IP的结合&#xff0c;不仅能提高效率&#xff0c;还能有效规避IP封禁问题。本文将详细探讨多线程爬虫接入代理…...

[网络][CISCO]Cisco-PIX配置详解

Cisco PIX防火墙配置指南 任何企业安全策略的一个主要部分都是实现和维护防火墙&#xff0c;因此防火墙在网络安全的实现当中扮演着重要的角色。防火墙通常位于企业网络的边缘&#xff0c;使内部网络与Internet之间或与其他外部网络互相隔离&#xff0c;并限制网络互访&#x…...

拒绝千篇一律,AI帮你定制独一无二的个人写真

每个女人都渴望展现最美的自己&#xff0c;你是否厌倦了拍出千篇一律的照片&#xff1f;今天&#xff0c;我要告诉你一个秘密&#xff0c;用简单三步&#xff0c;即可打造属于你的独一无二个人写真&#xff01;文生图、蒙版换脸、图生图&#xff0c;三步化身超级模特&#xff0…...

在云服务器上安装 RabbitMQ:从零到一的最佳实践

&#x1f6e0; 1. RabbitMQ 简介 RabbitMQ 是一个开源的消息代理中间件&#xff0c;广泛应用于高并发、异步任务队列的场景中。在分布式系统架构中&#xff0c;RabbitMQ 可以充当消息的中转站&#xff0c;帮助不同服务之间进行高效的消息通信。 在这篇文章中&#xff0c;我们…...

【nginx】搭配okhttp 配置反向代理

nginx的默认是一个反向代理。 nginx会默认把输入的请求,转向其他的服务器执行。 这些转向的服务器与客户端发起的服务器不是同一个。 客户端只认识nginx,不知道ngiix转向何方。 正向代理修改okhttp的proxy,实际上很多代理都是正向的。 反向代理修改请求路径到nginx。 感觉还…...

Android V 广播注册和配置注意事项问题

现象 在Android V平台上&#xff0c;应用注册非Protected广播时&#xff0c;如果没有加导出flag会抛出异常导致进程crash。 E/AndroidRuntime: FATAL EXCEPTION: main java.lang.SecurityException: com.demo.myapplication: One of RECEIVER_EXPORTED or RECEIVER_NOT_EXPORT…...

深入解读Docker核心原理:Namespace资源隔离机制详解

在容器技术中&#xff0c;资源隔离 是容器化能够实现轻量级虚拟化的关键技术之一。通过资源隔离&#xff0c;容器可以拥有自己的独立环境&#xff0c;确保容器之间互不干扰&#xff0c;从而实现应用的安全和稳定。Docker作为主流的容器平台&#xff0c;其核心的资源隔离机制依赖…...

学习通、智慧职教刷课脚本

&#x1f410;个人主页 可惜已不在 &#x1f40b;可以分享给身边有需要的人&#x1f436; &#x1f409;有用的话就留下一个三连吧&#x1f63c; 目录 一.安装 脚本运行器 篡改猴 - Microsoft Edge Addons 二.安装脚本 三.扩展 一.安装 脚本运行器 安装浏览器 Microsoft E…...

SEO写作:从实战到精进的全方位指南

在数字化浪潮中&#xff0c;SEO不再是简单的关键词堆砌&#xff0c;而是成为企业品牌建设与市场拓展的核心策略。作为一名深耕SEO领域的实践者&#xff0c;我深知其中的门道与奥秘。今天&#xff0c;我将结合过往实战经验&#xff0c;以独特视角&#xff0c;带你一窥SEO写作的精…...

解决 git 不是内部或外部命令,也不是可运行的程序

目录 报错提示&#xff1a; 一、解决办法 1、从git官网下载windows版本的git 2、安装 3、注意事项 二、报错 1、解决 fatal: Not a git repository (or any of the parent directories): .git 问题 报错提示&#xff1a; 一、解决办法 Windows下配置Git&#xff1a; 1…...

【卷起来】VUE3.0教程-07-异步请求处理(springboot后端)

&#x1f332; 服务端接口准备 pom文件&#xff0c;引入mybatis/mybatis-plus相关依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>&…...

初一信息科技2024指南辅助教学软件(抓包软件)

专门针对信息科技20204指南写的程序&#xff0c;互联网和直播等知识中包含tcp/ip和udp&#xff0c;三次握手等原理&#xff0c;需要简单明了的实验来说明&#xff0c;在机房中需要用抓包软件&#xff0c;可能需要安装windump npcap等软件非常繁琐&#xff0c;还需要接触保护卡&…...

上汽大众:存储成本节约85%,查询性能提升5倍|OceanBase案例

近日&#xff0c;上汽大众汽车有限公司&#xff08;简称“上汽大众”&#xff09;的积分卡券等关键业务系统&#xff0c;已成功升级至 OB Cloud 云数据库。借助 OceanBase 原生分布式数据库的卓越性能与先进技术&#xff0c;实现了存储成本的大幅降低&#xff0c;高达85%&#…...

如何快准稳 实现MySQL大表历史数据迁移?

历史迁移解决方案以微服务架构为基础&#xff0c;使用多种设计模式&#xff0c;如&#xff1a;单例、桥接、工厂、模板、策略等。其中涉及的核心技术有多线程、过滤器等&#xff0c;致力于解决MySQL大表迁移的问题&#xff0c;提供多种迁移模式&#xff0c;如&#xff1a;库到库…...

C和指针:函数

函数定义 函数体就是一个代码块&#xff0c;它在函数被调用时执行。 类型 函数名(形式参数) 代码块 与函数定义相反&#xff0c;函数声明出现在函数被调用的地方。 函数声明 编译器是如何知道该函数期望接受的是什么类型和多少数量的参数。 原型 int *find_int( int key…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

Python Ovito统计金刚石结构数量

大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...