实现流程
- 实现思路
- 使用工具
- 基础介绍
- 小程序结构介绍
- 整体代码结构
- 调用插件
- 主页分析
- 定点
- 出行规划服务
- 地铁图服务
- 接口能力
- 逆地址解析
- 地点搜索
- 注意问题
- 问题
- 仓库地址
实现思路
- 选择小程序作为实现主题
- 通过调用api与接口服务实现功能
使用工具
- 微信开放者平台
关于如何申请key 申请sdk此处不做赘述网上资料很多。
基础介绍
主要由以下四种文件组成,更多信息查阅微信小程序的开发文档。网址如下:
https://developers.weixin.qq/miniprogram/dev/framework/
小程序结构介绍
改了官方的demo实现,官方实现查阅:
https://github/TencentLBS/TencentMapMiniProgramDemo
整体代码结构
调用插件
主页分析
wxml中
js中
定点
实现效果:
此处本身功能应该比较多的,但是由于作业时间的问题,我没有解决此处的一个问题,而是对官方完整的功能进行了阉割,具体代码会放在我的GitHub仓库中(Location-picker1),此处使用的是Location-picker。
出行规划服务
点击导航,进入外部导航
地铁图服务
接口能力
逆地址解析
地点搜索
注意问题
问题
这里遇到的最坑的一个点就是有关于0元购买服务的问题,要实现完整的功能,需要购买一些服务,不是单单引用插件就可以的。而对于这些服务,需要注意对于他们key的使用。在代码中,记得更换key成自己的key,相关服务的key也要格外注意。
相关服务提供页面如下:
https://developers.weixin.qq/community/servicemarket?module=1&type=1&serviceType=4&page=1&kw=poi
另外我也确实没有解决定点完整问题里面的一些bug,如果有人成功跑起来了,也可以在评论区交流指导我一下。
仓库地址
https://github/sysu18364107-xiaoxiao-xiaoqi/Wechat-applet-Navigation-Map
更多推荐
微信小程序-调用腾讯地图插件实现定点,路线规划,地铁图,服务拓展(逆地址解析,地点搜索)
发布评论