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

相关文章

Mysql中设计数据表的过程解析

《Mysql中设计数据表的过程解析》数据库约束通过NOTNULL、UNIQUE、DEFAULT、主键和外键等规则保障数据完整性,自动校验数据,减少人工错误,提升数据一致性和业务逻辑严谨性,本文介绍My... 目录1.引言2.NOT NULL——制定某列不可以存储NULL值2.UNIQUE——保证某一列的每一

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

最新Spring Security的基于内存用户认证方式

《最新SpringSecurity的基于内存用户认证方式》本文讲解SpringSecurity内存认证配置,适用于开发、测试等场景,通过代码创建用户及权限管理,支持密码加密,虽简单但不持久化,生产环... 目录1. 前言2. 因何选择内存认证?3. 基础配置实战❶ 创建Spring Security配置文件

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND

C# $字符串插值的使用

《C#$字符串插值的使用》本文介绍了C#中的字符串插值功能,详细介绍了使用$符号的实现方式,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录$ 字符使用方式创建内插字符串包含不同的数据类型控制内插表达式的格式控制内插表达式的对齐方式内插表达式中使用转义序列内插表达式中使用

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具