我的编程空间,编程开发者的网络收藏夹
学习永远不晚

uniapp小程序端使用腾讯地图

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

uniapp小程序端使用腾讯地图

一、获取腾讯地图密钥

1. 找到腾讯地图API

腾讯地图A地址PI

注册并登录后点击开发文档选择微信小程序JavaScript SDK

在这里插入图片描述

进入后按照 Hello world! 中的步骤进行

在这里插入图片描述

2. 申请密钥

点击上面第一步中的 申请密钥,进入我的应用,在创建应用中输入创建的名称和类型

在这里插入图片描述

创建成功后点击 添加key 输入名称和描述,选择微信小程序,将自己小程序的 APPID输入进去后点击确认即可。

在这里插入图片描述

在这里插入图片描述

二、小程序中的配置

1. 如果没有小程序账号

小程序 注册地址 中进行注册,找到开发管理中的开发设置,里面会有 APP ID

在这里插入图片描述

开发设置 -> “服务器域名” 中设置request合法域名,添加 https://apis.map.qq.com

在这里插入图片描述

三、代码实现

下载微信小程序JavaScriptSDK,微信小程序 JavaScriptSDK v1.2

在这里插入图片描述

1. 新建一个 uniapp项目

目录结构,新建utils将下载的JavaScriptSDK v1.2中的文件引入进去

在这里插入图片描述

2. 项目中的配置

开发过程中,需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置

"permission": {    "scope.userLocation": {      "desc": "你的位置信息将用于小程序位置接口的效果展示"    } }

在manifest.json的源码视图中配置:配置appid和地理位置

"mp-weixin": { "appid": "", //需要配置appid"setting": {"urlCheck": false},"usingComponents": true,"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}}
3. 页面具体代码
4. 开发完成~如下图所示

在这里插入图片描述

四、获取当前位置的经纬度

1. 页面具体代码
2. 报错处理

直接运行会出现下图中的错误

在这里插入图片描述

**原因:**自从2022年7月开始,新开发的小程序如果想要获取用户的位置信息需要先申请然后在app.json中配置才能使用。

在这里插入图片描述

3. 申请权限

在微信开发者工具中进行权限的申请

开发–> 开发管理–> 接口设置,然后根据你的需要以及你的小程序是否有权限申请来申请对应的接口

在这里插入图片描述

4. 代码配置

目前需要配置的接口如下(参考官方文档

在这里插入图片描述

在uniapp中的 unpackage > dist > dev > mp-weixin > app.json 中配置一下代码即可:

"requiredPrivateInfos": [     "getLocation",    "onLocationChange",    "startLocationUpdateBackground",    "chooseAddress"  ]

最终就可以获取到定位地址

在这里插入图片描述

来源地址:https://blog.csdn.net/weixin_53156345/article/details/130738858

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

uniapp小程序端使用腾讯地图

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

uniapp小程序端使用腾讯地图

一、获取腾讯地图密钥 1. 找到腾讯地图API 腾讯地图A地址PI 注册并登录后点击开发文档选择微信小程序JavaScript SDK 进入后按照 Hello world! 中的步骤进行 2. 申请密钥 点击上面第一步中的 申请密钥,
2023-08-18

【uniapp小程序实战】—— 使用腾讯地图获取定位

文章目录 🍍前言🍋正文1、首先看官网uni.getLocation(OBJECT)#注意 2、腾讯位置服务平台申请密钥和下载SDK2.1 申请开发者秘钥2.2 开通webserviceA
2023-08-16

uniapp小程序实战之利用腾讯地图获取定位

使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp小程序实战之利用腾讯地图获取定位的相关资料,需要的朋友可以参考下
2023-02-08

小程序怎么调用腾讯地图

本篇内容介绍了“小程序怎么调用腾讯地图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  腾讯地图提供了供小程序使用的SDK,可结合地图组件和
2023-06-26

uniapp小程序如何使用高德地图api实现路线规划

今天小编给大家分享一下uniapp小程序如何使用高德地图api实现路线规划的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。路线
2023-07-04

uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决

这篇文章主要介绍了uniApp微信小程序使用腾讯地图定位功能及getLocation需要在app.json中声明permission字段问题解决,需要的朋友可以参考下
2022-12-24

uniapp 开发小程序,封装一个方法,让图片使用线上地址

1.在main.js文件中,添加以下代码: 复制使用: // 图片使用网络地址Vue.prototype.localImgSrc = function(img){//项目的地址域名,例如百度return "https://baidu.cn
2023-08-30

怎么使用uniapp开发小程序

要使用uniapp开发小程序,你可以按照以下步骤进行操作:首先,安装uni-app开发工具,官方提供了uni-app的开发工具,你可以去uni-app官网下载并安装。创建一个新的uni-app项目,可以选择使用Vue.js或者原生小程序组件
怎么使用uniapp开发小程序
2024-04-09

uniapp小程序使用高德地图api实现路线规划的示例代码

路线规划常用于出行路线的提前预览,我们提供4种类型的路线规划,分别为:驾车、步行、公交和骑行,满足各种的出行场景,这篇文章主要介绍了uniapp小程序使用高德地图api实现路线规划,需要的朋友可以参考下
2023-01-10

小程序地图组件怎么用

本文小编为大家详细介绍“小程序地图组件怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序地图组件怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。微信小程序地图组件升级,支持多套地图模板,开发者可根据
2023-06-26

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录