uni-app中使用腾讯地图sdk(解析经纬度)获取用户所在位置信息

本文主要是介绍uni-app中使用腾讯地图sdk(解析经纬度)获取用户所在位置信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言: 技术选定
https://lbs.qq.com/dev/console/custom/apply
在这里插入图片描述
具体步骤:

  1. 注册开发者账号、申请密钥、开通webserviceAPI服务、下载小程序SDK、微信后台配置请求request域名。
    在这里插入图片描述
    ( 请按官方完成以上操作:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview )
    注意点:
    下载微信的sdk,考虑网络问题(点击没反应),直接F12 找到那串地址copy到地址栏,进行回车;
    SDK那串地址:( http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip )
    微信公众平台中配置request请求域名,注意找对位置及域名直接分号隔开,添加成功后微信开发者工具刷新;
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. copy解压后的 qqmap-wx-jssdk.js文件放到项目中,然后在页面引入使用
    [ uni-app中我们使用 qqmap-wx-jssdk.js 这个文件就好(另一个.min.js不管)]
    在这里插入图片描述
    3.上代码
    1.uni.getLocation方法 负责获取用户所在经纬度;
    2.使用腾讯sdk 的reverseGeocoder方法解析经纬度–拿到用户省市区街道信息;
<template></template><script>//引入腾旭地图sdkimport QQMapWX from '../../untils/qqmap-wx-jssdk.js'import app from '../../App.vue'export default {data() {return {title: 'Hello index'}},onLoad() {//拿地址this.getMapAddress();},methods: {getMapAddress() {const tMap = new QQMapWX({key: '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF' //开发者密钥});//使用 uni.getLocation获取用户所在经纬度uni.getLocation({type: 'wgs84',geocode: true,success: (res) => {console.log("获取经纬度成功");this.latitude = res.latitude;this.longitude = res.longitude;},fail: () => {console.log("获取经纬度失败");},complete: () => {// 使用腾讯sdk的reverseGeocoder方法 解析经纬度tMap.reverseGeocoder({location: {latitude: this.latitude,longitude: this.longitude},success: function(res) {console.log("解析地址成功", res);console.log("当前地址:", res.result.address);//保存缓存uni.setStorage({key:'local',data:res.result.address,success() {console.log("用户地址信息已缓存")}})},fail: function(res) {uni.showToast({title: '定位失败',duration: 2000,icon: "none"})console.log(res);},complete: function(res) { //无论成功失败都会执行wx.switchTab({url: '../appointment/appointment'})}})}})}}}
</script><style></style>

点击获取弹框提示信息:
在这里插入图片描述
解决方法:
在xhbuilder中的manifest.json文件中添加如下代码:(这里的提示信息,用于微信获取位置弹框中----自定义的描述文字)

 "permission" : {"scope.userLocation" : {"desc" : "你的位置信息将用于小程序定位" //}}

在这里插入图片描述
在这里插入图片描述
如下图:现在应该知道那串—描述文字的作用了吧。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

uni-app中使用腾讯位置服务实现小程序地图选点功能
https://gblfy.blog.csdn.net/article/details/122266518

这篇关于uni-app中使用腾讯地图sdk(解析经纬度)获取用户所在位置信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/563042

相关文章

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时:2478ms)【2】集合方式foreach(一万条数

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE