路线规划小程序插件是腾讯位置服务开发的一款为用户规划驾车、公交、步行路线方案的插件。开发者可以直接在小程序内使用这个插件，从而为自己的用户提供多种出行方案选择。 路线规划插件的功能        路线规划插件能为用户规划驾车出行路线（如下图1所示），并且当行车起点和行车终点之间可以规划出多个方案时会展示多个方案及方案耗时。这些不同方案体现了不同的策略，例如根据实时路况时间最短、红绿灯数较少、少收费等策略。         同时驾车路线在地图中会通过不同路线的颜色直观反映道路的拥堵情况，例如红色路线表示那段道路拥堵，这就能够让用户提前规避拥堵路段。         路线规划插件也能为用户规划步行出行路线（如下图2所示），不仅显示了步行路线距离和耗时信息，还显示了用户步行过程中，走过的天桥、人行横道数量，更人性化的显示了步行消耗了多少卡路里。 [图片]        [图片]  路线规划插件还能为用户规划公交出行路线（如下图所示），提供多种公交和地铁出行方案，并且用户可以根据自己的实际情况进行方案排序，例如时间短优先排序、少步行优先排序、少换乘优先排序。出行方案上也会有时间短这样的标志信息说明方案特点。 [图片] 路线规划插件的应用场景        路线规划插件应用场景非常丰富，可以直接接入到餐饮、电影等各种类型的小程序中，让消费者在小程序中就能获得到达门店的路线规划方案，方便去门店消费。         设想一个场景，小王周末想要吃一顿大餐，于是打开了某家餐厅小程序，当小王决定去这家餐厅时，不需要再打开地图软件去规划出行路线，通过我们的路线规划插件，在这家餐厅的小程序中就能直接规划小王目前的位置到餐厅的出行路线。小王可以选择开车去餐厅，如果今天车牌号限行，那么小王也可以选择公共交通出行，如果到餐厅的距离很近，那么小王可以选择步行方式到达餐厅。         小程序只需要使用路线规划插件就能拥有这些全面精准规划路线能力。看了这些功能，是不是想马上体验呢？别急！接下来就介绍路线规划插件的使用方法。 路线规划插件的使用方法1、申请路线规划插件在微信公众平台中， “微信小程序官方后台-设置-第三方设置-插件管理” 里点击 “添加插件”（如下图所示），搜索 “腾讯位置服务路线规划” ，选择添加插件，小程序开发者就可以在小程序内使用该插件了。 [图片] 2、申请key调用路线规划插件需要申请腾讯位置服务的服务账号，key是开发者的唯一标识，申请key请点击这里。申请key的具体步骤如下： 2.1 填写申请信息[图片] 2.2 创建key成功[图片] 2.3 授权小程序appid开通微信小程序服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选“微信小程序” -> 填写“授权 APP ID” ->保存。 [图片] 2.4 勾选“WebService API”及“白名单”微信小程序插件需要使用WebService API的部分服务，所以使用该功能的key需要具备相应的权限。 [图片] 如果开发者之前是腾讯位置服务的用户并申请过key，则可以跳过上面2.1、2.2的步骤，直接进行2.3、2.4步骤的设置。 3、在小程序中引入路线规划插件只需要在小程序的app.json文件做如下配置就可以在小程序中引入路线规划插件： [代码]// app.json[代码][代码]{[代码][代码]  [代码][代码]"plugins"[代码][代码]: {[代码][代码]    [代码][代码]"routePlan"[代码][代码]: {[代码][代码]      [代码][代码]"version"[代码][代码]: [代码][代码]"1.0.0"[代码][代码],[代码][代码]      [代码][代码]"provider"[代码][代码]: [代码][代码]"wx50b5593e81dd937a"[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]},[代码][代码]  [代码][代码]"permission"[代码][代码]: {[代码][代码]    [代码][代码]"scope.userLocation"[代码][代码]: {[代码][代码]      [代码][代码]"desc"[代码][代码]: [代码][代码]"你的位置信息将用于小程序定位"[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]}[代码][代码]}[代码]4、在小程序中调用路线规划插件在小程序中调用路线规划插件也非常简单： [代码]let plugin = requirePlugin([代码][代码]'routePlan'[代码][代码]);[代码][代码]let key = [代码][代码]''[代码][代码];  [代码][代码]//使用在腾讯位置服务申请的key[代码][代码]let referer = [代码][代码]''[代码][代码];   [代码][代码]//调用插件的小程序的名称[代码][代码]let startPoint = JSON.stringify({  [代码][代码]//起点[代码][代码]  [代码][代码]'name'[代码][代码]: [代码][代码]'中国技术交易大厦'[代码][代码],[代码][代码]  [代码][代码]'latitude'[代码][代码]: 39.984154,[代码][代码]  [代码][代码]'longitude'[代码][代码]: 116.30749[代码][代码]});[代码][代码]let endPoint = JSON.stringify({  [代码][代码]//终点[代码][代码]  [代码][代码]'name'[代码][代码]: [代码][代码]'北京西站'[代码][代码],[代码][代码]  [代码][代码]'latitude'[代码][代码]: 39.894806,[代码][代码]  [代码][代码]'longitude'[代码][代码]: 116.321592[代码][代码]});[代码][代码]wx.navigateTo({[代码][代码]  [代码][代码]url: [代码][代码]'plugin://routePlan/route-plan?key='[代码] [代码]+ key + [代码][代码]'&referer='[代码] [代码]+ referer + [代码][代码]'&endPoint='[代码] [代码]+ endPoint[代码][代码]});[代码]如以上示例代码所示，只需要传4个参数，就能为小程序用户提供驾车、公交、步行路线规划信息了。这4个参数含义如下： key，开发者的唯一标识，第2步申请的key referer，调用插件的小程序的名称 startPoint，起点名称和坐标信息，如果不传起点参数，则起点默认当前用户的真实位置 endPoint，终点名称和坐标信息        怎么样？看了上面的使用方法是不是觉得很简单呢？腾讯位置服务开发路线规划插件的目的就是为了减少开发者开发成本，解放开发者生产力，所以才把这些复杂的路线规划业务封装成了插件，方便小程序开发者使用。         那么还犹豫什么呢？立即点击这里去体验使用吧！ 另外，腾讯位置服务还推出了地铁图小程序插件，为用户提供查看各城市地铁线路的功能，还能帮用户检索到最优点地铁出行线路及每个站队的详情信息。         后续，腾讯位置服务还会开发更多的关于地图相关的小程序插件，还请各位开发者持续关注我们的服务商主页！

案例背景：     最近在开发城市地铁图项目，具体功能有规划路线、定位最近地铁站、以及显示整个城市的地铁网状图等功能。根据需求，在实现的时候在地铁线路图上需要添加定位按钮及线路弹框来展示位置信息以及地铁站详情信息。   遇到的问题： 在地铁图调研初期，原计划实现渲染方案是采用svg来绘制，但是调研后发现小程序原生API不支持svg。同时，我们在开源中找到一个svg的框架库来实现绘制，但是开发初期发现遇到很多无法实现的需求和性能问题。在对开源库的代码跟踪后，发现绘制方案也是canvas的方式，于是我们决定使用原生canvas的方案来支持地铁图。但是呢，又遇到一些问题，那么我们来看看几个具体的点：          1)       view在canvas上无法正常显示。 在canvas上使用view来添加图片和弹框时，发现图片以及弹框在canvas的下面，不能正常显示图片。 查看文档发现canvas、map、video等原生组件使用的是native实现的，默认显示在小程序的最上层，所以就把view换成cover-view或者cover-image。   使用view效果： [代码]<!-- 线路 -->[代码][代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"sublines sublines-icon"[代码][代码]>[代码][代码]   [代码][代码]<[代码][代码]image[代码] [代码]class[代码][代码]=[代码][代码]'sublinesIcon'[代码] [代码]src[代码][代码]=[代码][代码]"/static/img/ic_sublines.png"[代码][代码]    [代码][代码]bindtap[代码][代码]=[代码][代码]'clickSublines'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{lineIconShow}}"[代码][代码]></[代码][代码]image[代码][代码]>        [代码][代码]</[代码][代码]view[代码][代码]>[代码] [图片]   替换成cover-view效果： [代码]<!-- 线路 -->[代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sublines sublines-icon"[代码][代码]>[代码][代码]   [代码][代码]<[代码][代码]cover-image[代码] [代码]class[代码][代码]=[代码][代码]'sublinesIcon'[代码] [代码]src[代码][代码]=[代码][代码]"/static/img/ic_sublines.png"[代码][代码]    [代码][代码]bindtap[代码][代码]=[代码][代码]'clickSublines'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{lineIconShow}}"[代码][代码]></[代码][代码]cover-image[代码][代码]>        [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码]  [图片]   但是使用cover-view又遇到了层级和样式的问题。   2）canvas上使用cover-image添加图片，图片设置position：absolute；页面上的图片显示在canvas画线的下方，导致定位按钮不能正常使用。后来把position该换成fixed解决来层级的问题。效果如下所示： [代码].locationIcon {[代码][代码]  [代码][代码]width: 3rem;[代码][代码]  [代码][代码]height: 3rem;[代码][代码]  [代码][代码]position: fixed;[代码][代码]  [代码][代码]bottom: 3rem;[代码][代码]  [代码][代码]left: 0.7rem;[代码][代码]}[代码][图片]     3）在页面上实现一个弹框时，根据UI图需要实现一个底边线和底边小三角形。通过border给块级元素设置底边线或者css实现三角箭头，单边border设置无效。最终采用了height为1px的cover-view或者图片来代替。   设置单边border效果： [代码]<!-- 起终点设置弹框 -->[代码][代码]    [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sdMark"[代码] [代码]style[代码][代码]=[代码][代码]'top:{{tapClient.y}}px;left:{{tapClient.x}}px;'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{sdMarkShow}}"[代码][代码]>[代码][代码]      [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkContent'[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStart'[代码][代码]>设为起点</[代码][代码]cover-view[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickEnd'[代码][代码]>设为终点</[代码][代码]cover-view[代码][代码]>[代码][代码]        [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStationDetail'[代码][代码]>站点详情</[代码][代码]cover-view[代码][代码]>[代码][代码]      [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码]    [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码]  [图片]     修改后的代码：   [代码]<!-- 起终点设置弹框 -->[代码][代码]   [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"sdMark"[代码] [代码]style[代码][代码]=[代码][代码]'top:{{tapClient.y}}px;left:{{tapClient.x}}px;'[代码] [代码]wx-if[代码][代码]=[代码][代码]"{{sdMarkShow}}"[代码][代码]>[代码][代码]     [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkContent'[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStart'[代码][代码]>设为起点</[代码][代码]cover-view[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]cover-view[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickEnd'[代码][代码]>设为终点</[代码][代码]cover-view[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'line'[代码][代码]></[代码][代码]cover-view[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]'sdMarkItem'[代码] [代码]bindtap[代码][代码]=[代码][代码]'clickStationDetail'[代码][代码]>站点详情</[代码][代码]cover-view[代码][代码]>[代码][代码]     [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码]     [代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"icon"[代码][代码]>[代码][代码]       [代码][代码]<[代码][代码]cover-image[代码] [代码]class[代码][代码]=[代码][代码]'icArrow'[代码] [代码]src[代码][代码]=[代码][代码]'/static/img/ic_arrow.png'[代码][代码]></[代码][代码]cover-image[代码][代码]>[代码][代码]     [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码][代码]   [代码][代码]</[代码][代码]cover-view[代码][代码]>[代码]      最终的效果： [图片]       踩坑总结：canvas层级较高，使用cover-view或者cover-image在canvas做操作。单边border相关的操作使用图片或者块级元素来代替。     查看相关API文档： cover-view相关文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html   欢迎体验和吐槽："腾讯位置服务-地铁图"插件：https://developers.weixin.qq.com/community/servicemarket/sq_ocVuQ4joORnwn_bzpxTd8Mq8wZ3g/service/detail/0008cc3058c5c8042dc89d7db54415