微信小程序-调用腾讯地图插件实现定点，路线规划，地铁图，服务拓展（逆地址解析，地点搜索）

最新推荐文章于 2025-10-13 11:37:16 发布
原创 最新推荐文章于 2025-10-13 11:37:16 发布 · 2.1k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #小程序 #街景地图 #腾讯

本文介绍了如何在微信小程序中利用腾讯地图插件实现定位、路线规划、地铁图服务，包括逆地址解析和地点搜索功能。在实现过程中遇到了0元购买服务的问题，需要购买相关服务并正确配置key。

实现流程

实现思路

  1. 选择小程序作为实现主题
  2. 通过调用api与接口服务实现功能

使用工具

  1. 微信开放者平台
    关于如何申请key 申请sdk此处不做赘述网上资料很多。
    在这里插入图片描述

基础介绍

主要由以下四种文件组成，更多信息查阅微信小程序的开发文档。网址如下：
https://developers.weixin.qq.com/miniprogram/dev/framework/
在这里插入图片描述

小程序结构介绍

改了官方的demo实现，官方实现查阅：
https://github.com/TencentLBS/TencentMapMiniProgramDemo
在这里插入图片描述

整体代码结构

在这里插入图片描述

调用插件

<
最低0.47元/天 解锁文章
uniapp(全端兼容) - 详细实现腾讯地图根据当前位置获取周边示例，根据定位推荐附近的商场餐厅医院交通等百度地图POI类型分类，并在地图上悬浮周边推荐列表切换类型，获取附近地址名称及详细地址和距离
高级前端工程师
10-21 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，腾讯地图，附近周边推荐，uniapp腾讯地图如何获取周边推荐，腾讯地图API获取当前位置对应的周边信息，uniApp微信小程序腾讯地图根据目前的定位推荐地址，腾讯地图api获取周边场所及交通信息，获取周边用什么方法，腾讯地图api搜索周围的教育医疗场所，根据经纬度获取周边建筑地标，定位检索附近周边街道，将推荐的地址悬浮在地图上显示，uniapp如何根据当前定位获取附近的商场医院，用腾讯地图获取当前点的
小程序打开地图搜索、拖拽选择位置信息、调用腾讯地图获取经纬度设置地图中心
SAXX2的博客
03-04 1292
小程序打开地图搜索、拖拽选择位置信息、调用腾讯地图获取经纬度设置地图中心
微信小程序 使用腾讯地图SDK详解及实现步骤
08-31
主要介绍了微信小程序 使用腾讯地图SDK详解及实现步骤的相关资料,需要的朋友可以参考下
基于腾讯地图的微信小程序电子围栏.zip
12-03
uniapp写的基于腾讯地图的微信小程序的电子围栏(服务范围)，里面的key换成自己再腾讯地图api官网申请的，如果哪里有写的不好的地方，请多多谅解！
微信小程序地图SDK对比：腾讯地图 vs 高德地图逆地理编码
最新发布
weixin_41845184的博客
10-13 654
本文对比了微信小程序开发中腾讯地图和高德地图SDK的逆地理编码功能差异。两种SDK在下载方式、初始化方法和核心参数上存在明显区别：腾讯地图使用reverseGeocoder方法，参数为对象且纬度在前；高德地图使用getRegeo方法，参数为字符串且经度在前。代码示例展示了两种SDK的具体实现方式，并分析了返回数据结构的特点。建议腾讯地图适用于微信生态深度集成项目，高德地图则更适合需要更高免费额度或更丰富POI数据的场景。开发时需特别注意两者在经纬度顺序和返回格式上的差异。
腾讯位置服务示例小程序（一）
ZeroSwift的博客
10-29 837
腾讯位置服务示例小程序（一）前沿主页面思维图主页面app.jsonindex.wxmlindex.jsonindex.js小结 前沿 地图是一个较为常用的组件，它提供了非常丰富的功能，并能够组合上许多想法，进而开发处很多有趣的小程序。从这篇文章开始，主要对小程序官网提供的位置服务示例小程序进行学习，以达到能够良好使用地图组件的一个目标。 主页面思维图 该小程序在主页面中主要提供了四个一级菜单，每个一级菜单下会有不同内容的二级功能展示。作为系列文章的第一章，本篇博文主要对主页面的配置项和代码进行讨论。与之前
微信小程序对接使用腾讯地图-位置选点和路线规划接口
weixin_44779466的博客
03-02 1977
微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划 效果图 实现代码 1. app.json中添加代码 "plugins":{ "chooseLocation":{ "version":"1.0.2", "provider":"wx76a9a06e5b4e693e" }, "routePlan":{ "version":"1.0.5", "provider":"wx50b5593e81dd937a" } }
微信小程序使用腾讯地图插件
weixin_43936284的博客
05-17 872
微信小程序使用腾讯地图插件 腾讯地图官网申请key 在app.json 加入以下代码 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "plugins": { "chooseLocation": { "version": "1.0.5", "provider": "wx76a9a06e5b4e693e" } },
精选资源
微信小程序打卡定位签到系统源代码，利用微信小程序的地图组件获取到用户的地理位置信息，再通过腾讯地图 SDK 获取到对应位置信息
01-11
签到流程一般包括以下步骤：用户打开小程序，调用地图组件获取位置，通过腾讯地图SDK反编译得到详细地址，将这些信息发送到服务器，服务器端验证位置合法性（例如是否在预设的签到范围内），如果合法则记录签到信息...
微信小程序地图map全方位解析
x15514104477的博客
02-20 3990
本文全方位解析了微信小程序的 <map> 组件，涵盖基础功能、地图交互、事件绑定、动态操作、地图服务API、地图插件以及高德地图集成等内容，并提供了详细代码示例和注意事项，助力开发者实现丰富地图功能。
微信小程序调用腾讯地图选点 地图选择获取位置
qq_41429765的博客
10-15 3396
小程序中实现选择地址
微信小程序腾讯地图导航.rar
07-30
微信小程序的腾讯地图导航！只要三步！看了就是会了！超级简单!任意取附教程。。https://blog.youkuaiyun.com/qq_42453562/article/details/107691316
利用腾讯地图实现位置的选择的微信小程序demo
04-08
这是一个利用腾讯地图实现位置的选择的微信小程序demo，需要去腾讯地图中申请个人的key。地址：https://lbs.qq.com/dev/console/key/manage。谢谢各位大佬批评指导。
微信小程序 接入腾讯地图的两种写法
weixin_30693183的博客
06-18 798
最近在写微信小程序，遇到了一些坑，在网上也查了好多，感觉都没有我想要的答案， 刚处理了这个地图的问题，在这里总结下，希望可以帮助大家。 在微信小程序中，腾讯地图的接入其实是有两种方式的，第一种调用腾讯本身的地图，第二种是使用插件 ma-route 一、调用腾讯本身的地图 ，实现结果如下图： 这个非常简单，而且用的人也很多， 只需要调用两个地图的api. 就是上边的两个。当然调用...
基于php的地铁查询系统,省时方便的小程序：查地铁
weixin_42104947的博客
03-10 426
现在在国内的很多城市都有地铁，BAT或者有轨电车，甚至是公交车。当我们需要查询出行的线路公交，地铁时我们就需要有一款工具帮助大家。为了查地铁就下载一个app也挺费内存和容量的，尤其对于一个iphone只有16G的用户来说。所以今天我们就给大家介绍一款新的地铁出行指南小程序，「查地铁」小程序免流量查询各大城市地铁线路、出入口、运营时间及周边吃喝玩乐信息。小程序最大亮点是消耗极少流量为你查询周边地铁站...
python调用百度地图画轨迹图_[python]百度地图API，正/逆地理编码，路线规划接口的调用，实现输出出行的距离和......
weixin_39950010的博客
11-24 487
[Python] 纯文本查看 复制代码'''文件名:L17.py作者：小饭团创建时间:2019年1月11日15:17:03文件描述：调用Web服务API接口，百度地图路线规划 正/逆地理编码'''#-*- coding:utf-8 -*-import urllib.parseimport urllib.requestimport jsonkey='62PM27fx1Fbhq1pOWdpRlWt2o...
【uniapp】 微信小程序使用腾讯API地图、路线轨迹、marker标记点
weixin_42216995的博客
05-27 2930
腾讯地图、地图选点、marker、轨迹、路线
使用腾讯位置服务实现汽车沿轨迹行驶功能
@宝儿姐
05-28 806
前言 最近公司有个地图功能开发，根据车辆的行驶的经纬度，来画出车辆的移动轨迹，并模拟车辆在该线路的行驶过程。 效果图大致是这样的。 简易入门 首先进入腾讯位置服务页面然后进行注册账号，注册完成后需要申请AppKey，我们将在自己的应用中配置这个Key来使用SDK中的服务。 webserveapi默认勾选就可以，在未上线之前，我们可以先不填域名白名单。 只需要在html的页面里引入即可 <script charset="utf-8" src="https://map.qq.com/api/gljs?
使用腾讯JS-SDK实现汽车沿轨迹行驶
知无涯
12-26 4166
使用腾讯地图开发一个动态移动轨迹路线图 最近公司有个地图功能开发，根据车辆的行驶的经纬度，来画出车辆的移动轨迹，并模拟车辆在该线路的行驶过程。 效果图大致是这样的。 这个伟大的任务交给了我，经过一番调研我决定使用腾讯地图JS SDK来实现这一功能，为什么那？因为使用腾讯地图可以轻松移植到微信小程序里。而且他们最近更新和优化了很多API。 诸如，定位，地点搜索，路线规划，个性化地图。 简易入门 说干就干，首先要使用腾讯地图SDK，必须要先申请appkey，点击链接申请 注意类型我们要选择JavaScri
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值