微信小程序地图导航-微信小程序自定义导航

上期我们在《“腾讯视频”微信小程序插件介绍》一文中介绍了“腾讯视频”小程序插件的含义、使用场景和使用方法。

今天给大家分享一款同样优秀的小程序插件——“腾讯地图”插件微信小程序地图导航，从使用场景到使用方法，都会进行详细的介绍。

“腾讯地图”插件能做什么？

顾名思义，“腾讯地图”插件是由腾讯地图官方出品。 旨在为开发者提供简单的多计划路线规划服务。 可在插件中展示指定地点之间的路线规划，支持驾车、公交、步行路线规划能力和ETA等基本路线信息。

如果你想像“腾讯地图+”小程序一样实现地图的基本功能，使用“腾讯地图”插件是你最好的选择。

“腾讯地图+”小程序截图

作为首批上线的小程序插件，“腾讯地图”插件已在多个版本中进行了优化。 从最初显示目标位置信息、提供附近地图功能，到现在支持路线规划等能力。 地图功能基本完成。 设备齐全。

“腾讯地图”插件场景一：收到小程序发来的喜帖，但找不到请帖上的地址？ 该怎么办？

如果你开发一个邀请邀请的小程序，你就会遇到上面的场景。 在传统的开发模式下，引入完整的地图点选择和路线规划组件的成本非常高。 更多的开发者选择让用户直接输入文本地址进行展示，作为降低开发成本的折衷方案。 这样的设计是不可点击的，也没有规划路线的能力。 用户需要手动输入查询地址和交通路线。

传统邀请不具有交互性

但如果开发者选择使用腾讯地图提供的同名小程序插件，开发成本将大大降低，用户体验也将线性提升。 这里我们以喜帖小程序为例进行说明：

用户在编辑请柬小程序过程中，提前设置婚礼场地；

当婚礼宾客收到请柬并点击地点时，“腾讯地图”插件可根据宾客当前所在位置和目的地坐标，自动生成精准导航路线。

一键导航，简洁明了 场景二：会议服务帮手——提前了解参会路线

参会者如何从高铁站、机场、火车站到达会场，一直是各类会议请柬的必经之路。 但长期以来，此类信息多以明文形式发布，不便于理解和记忆。

如果小程序可以使用“腾讯地图”插件，这类场景的体验将会发生质的变化：

会议组织者在小程序中预先设置多组起点和终点（如：机场-会议中心、高铁站-会议中心）。 参会人员收到会议邀请后，点击指定路线即可在地图插件中查看精准参考。 将路线。

这比无聊的文字更聪明一点吗？

如何接入“腾讯地图”插件？

《腾讯地图》功能强大，使用起来却非常简单：

1.申请使用插件。 在“小程序管理后台-设置-第三方服务-插件管理”找到插件名称“腾讯地图”

（当前最新版本：1.0.6，appid：wx5bc2ac602a747594），申请使用。

2、引入插件代码后修改配置文件JSON：

{
  "usingComponents": {
    "map-route": "plugin://myPlugin/mapRoute"
  }}

3.使用地图插件。 将以下标签添加到相应的 WXML 文件中：

4、最后根据需求在JS文件中处理传入的插件数据，数据包括：起点、终点经纬度和名称、路线计算方式，封装在routeInfo结构体中：

let plugin = requirePlugin("myPlugin")let routeInfo = {
    startLat: 39.90469,    // 起点纬度 选填
    startLng: 116.40717,    // 起点经度 选填
    startName: "我的位置",   // 起点名称 选填
    endLat: 39.94055,    // 终点纬度必传
    endLng :116.43207,  // 终点经度 必传
    endName:"来福士购物中心",  // 终点名称 必传
    mode:"car"  //算路方式 选填}
Page({
  data: {
    routeInfo: routeInfo
  }
})

参数说明：

起始点：如果不填写或startName="我的位置"或startName="当前位置"或startName="currentLocation"，插件将获取当前定位位置作为起始点发起路线计算。 如果起点信息填写正确，则会传入起点信息，启动路线计算。

Endpoint：必填参数，如果参数传入不正确，将不会发起路由计算或者路由计算失败。

计算方法：

mode，目前支持三种方式计算路线，分别是：驾车（car）、公交（bus）、步行（walk）； 不通过则默认启动行车计算。

注意：数据要在data中初始化微信小程序地图导航，不要直接在onLoad中setData，因为在onLoad中直接setData，observer:properties中routeInfo的函数(newVal,oldVal)，newVal接收不到参数，导致参数错误，之后，你可以绑定其他事件setData更新routeInfo，达到改变起止参数的效果。

“腾讯地图”插件效果图

如果您想了解更多“腾讯地图”插件详情，请访问开发者社区插件版块对应页面（建议电脑访问）：

手机用户也可扫码访问

内容来自：微信开放社区“小程序·小故事”专栏