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

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain