实现流程

  • 实现思路
  • 使用工具
  • 基础介绍
  • 小程序结构介绍
  • 整体代码结构
  • 调用插件
  • 主页分析
  • 定点
  • 出行规划服务
  • 地铁图服务
  • 接口能力
    • 逆地址解析
    • 地点搜索
  • 注意问题
    • 问题
    • 仓库地址

实现思路

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

使用工具

  1. 微信开放者平台
    关于如何申请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

更多推荐

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