微信小程序导入腾讯地图

Snowyufly

已于 2023-11-17 15:12:20 修改

阅读量705

点赞数

文章标签：微信小程序小程序

于 2023-11-07 00:51:21 首次发布

本文链接：https://blog.csdn.net/Snowyufly/article/details/134257917

版权

本文介绍了如何在微信小程序中导入并使用腾讯地图，包括安装微信开发者工具、注册获取App id、请求位置权限、配置页面、编写js和wxml代码以及wxss样式，最后展示了在手机端测试的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装微信开发者工具（下载稳定版）

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 去微信小程序注册获取App id（开发管理-开发设置）

小程序 (qq.com)

3. 获取位置信息需要设备的允许，在全局的app.json文件做一个请求获取位置信息

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

4. 在app.json中添加文件名，"pages/maps/maps"，命名随意，这里命名为maps

5. 选择编译模式，切换到maps

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Snowyufly

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）

高级前端工程师

02-21

1万+

微信小程序使用腾讯地图完整流程，微信小程序 接入腾讯地图，如何在微信小程序中接入腾讯地图，微信小程序引入腾讯地图API方法，腾讯地图小程序SDK，微信小程序实现使用腾讯地图SDK步骤详细介绍，微信小程序接入腾讯地图(线路规划、逆解析)、高德地图，微信小程序之使用腾讯地图，微信小程序 接入第三方地图，小程序服务器配置地图,微信小程序接入腾讯地图，微信小程序插入腾讯地图教程，微信小程序如何调用腾讯地图，如何在微信小程序中接入腾讯地图，微信小程序腾讯地图SDK使用方法，在微信小程序上创建一个简单的腾讯地图，微信小

微信小程序-腾讯地图及页面跳转

私信可回答各种问题~

05-07

1917

微信小程序-腾讯地图及页面跳转

参与评论您还未登录，请先登录后发表或查看评论

小程序接入腾讯地图并使用（完整版带api示例）

最新发布

m0_64820041的博客

03-20

506

点击“添加Key”，在弹出的窗口中勾选“微信小程序”并填写“授权APP ID”，勾选“WebServiceAPI”，并保存设置。在“配额管理”->“账户额度”中选择“逆地址解析”，为其分配额度，即可使用。同时使用腾讯地图的逆地址解析 API，将经纬度转换为具体的地址信息。使用 wx.getLocation 方法获取用户当前位置的经纬度。注册登录后，点击“应用管理”->“我的应用”->“创建应用”。应用创建成功后，进入“应用管理”->“我的应用”->“设置”。这里代码里需要获得密钥KEY的值。

微信小程序引入腾讯地图图解

Ronion123的博客

10-17

4638

> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com。7.下载后引入qqmap-wx-jssdk.js文件到components文件夹中。4.点击创建应用，随意输入,点击创建就创建完成了，然后点击添加key。5.勾选webServiceAPI和微信小程序，填入需要的内容。填写信息-登录邮箱激活-信息登记。2.完成后，就会进入这个页面。2.注册完成后，点击控制台。3.点击应用管理-我的应用。8.创建微信小程序页面。

微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API

克里斯蒂亚诺更新的博客

07-04

3821

设置key的时候，还需要小程序的APPID。看清哪一个key并且设置配额。最终展示：点击搜索周边KFC就出现红色的预设值坐标的地址。2 调用的接口要开通相应的接口权限。入门中第一步：申请开发者密钥key。1 调用API有次数和额度限制。

微信小程序引入腾讯地图

qq_45906680的博客

06-02

889

这篇博客主要记录在使用uni-app开发微信小程序引入腾讯地图时候的一些问题。在后台管理系统中对某一区域进行绘制,将该区域于对应的人员进行绑定.然后在小程序端展示绘制的区域,并将与该区域绑定的人员展示在区域的中心,并绑定点击事件.

微信小程序使用腾讯地图

qq_41104976的博客

02-26

773

第一步：设置起始跳转页在wxml里面设置view控件 <view bindtap="toMap" data-address="{{address}}"> <text>跳转到地图</text> </view> js里面设置跳转的值 Page({ data: { address:"成都市" }, onLoad: functi...

微信小程序 腾讯地图显示偏差问题解决

10-16

在开发微信小程序时，经常需要集成地图功能，腾讯地图是一个常用的选择。然而，在实际应用中，开发者可能会遇到地图显示偏差的问题，尤其是在使用不同地图API获取的经纬度数据时。本文主要探讨了微信小程序中腾讯...

多人会议，uniapp - 微信小程序 - 腾讯云

10-20

对于微信小程序，需要在小程序开发工具中导入相应的SDK库。 3. **初始化RTC客户端**：在应用启动时，使用获取到的API密钥和AppID初始化RTC客户端，设置必要的回调函数，如连接状态、音视频事件等。 4. **创建和...

微信小程序 使用腾讯地图SDK详解及实现步骤

08-31

主要介绍了微信小程序 使用腾讯地图SDK详解及实现步骤的相关资料,需要的朋友可以参考下

利用腾讯地图实现位置的选择的微信小程序demo

04-08

这是一个利用腾讯地图实现位置的选择的微信小程序demo，需要去腾讯地图中申请个人的key。地址：https://lbs.qq.com/dev/console/key/manage。谢谢各位大佬批评指导。

微信小程序_腾讯地图定位源代码

10-27

地图定位功能是APP必备的功能，代码规范，值得借鉴和学习

微信小程序校园地图设计开发.docx.docx

05-25

- **技术选择**：虽然微信小程序默认支持腾讯地图API，但本系统选择了百度地图API，主要是因为其更高的定位精度。 - **实现步骤**： - 申请百度地图API的使用权限和开发者密钥。 - 使用HTML5技术实现百度地图API的...

精选微信小程序源码：地图定位小程序（含源码+源码导入视频教程&文档教程，亲测可用）

11-15

地图定位功能在微信小程序中主要依赖于微信小程序提供的`wx.map`模块，它允许开发者集成高德地图或腾讯地图的服务，实现地图展示、位置标注、路径规划等多种功能。在描述中提到的"地图导航、marker标注"是该功能的...

微信小程序内添加腾讯地图 导航

魏依一的博客

04-13

1865

4、加入路线规划插件后，地图在微信开发者工具中是动态的，在真机上没事，解决方法：将开发者工具版本调低2.11之前。问题：提示添加失败项目主体不符的，可以通过服务---》微信服务市场--》搜索--》1、微信小程序---》设置---》第三方设置-----》插件管理----》添加插件。2、登录腾讯地图申请小程序key 应用管理--》我的应用--》添加key。3 、腾讯地图插件文档。