「腾讯位置服务」全面拥抱微信小程序，让出行更简单！

一、引言

1.1「腾讯位置服务」是什么？

立足生态，连接未来

「腾讯位置服务」平台依托庞大的数据生态，以定位、地图展示、地点搜索、路线规划、导航、室内图、海外图等位置服务能力和LBS大数据能力为基础，面向开发者提供方便、易用、高效的LBS服务产品。当前「腾讯位置服务」数据能力已覆盖10亿人的位置行为数据、日均超过600亿次的定位调用、每日支持1亿次位置检索。

1.2「腾讯位置服务」可应用的场景？

随着功能的日益完善，腾讯位置服务可适用的场景也越来越多，如物流业务、智能出行、o2o业务、共享单车、运动健康、LBS游戏服务等行业均可见「腾讯位置服务」的身影。笔者也将通过此文展示下腾讯位置服务在智能出行行业的应用与实践。

二、需求背景

2.1 「乘车二维码」微信小程序

自从2017年微信上线小程序以来，小程序已经迅速成长为一个巨大的生态，吸引各行各业的开发者或服务商参与其中。小程序与线下场景的结合也日益紧密，其中，乘车二维码微信小程序无疑让人们的出行服务变的更加简单、快捷。先乘车，后扣费，无论手机是否联网，是否有信号，都可以很顺畅的进行乘车。

2.2 完善「乘车二维码」微信小程序

有了最基本的「乘车二维码」功能对用户体验来说，还是远远不够的，为此，从用户体验的角度出发，我们逐渐新增了一些实用的功能，比如查询附近的公交信息、用户路线规划等。也正因为新增了这些实用性的功能，我们发现「乘车二维码」微信小程序在数据表现(如日活、留存、使用时长)方面更加出色了，「腾讯位置服务」也成为我们「乘车二维码」微信小程序内不可或缺的角色。

接下来，笔者将通过公交地图、路线规划两个功能点更加详细的介绍「腾讯位置服务」中的微信小程序 JavaScript SDK、微信小程序插件。

三、公交地图

3.1 效果预览

公交地图

3.2 技术点分析

在上面的效果预览图中，我们不难发现，实现公交地图功能主要包含以下技术要点：

获取用户当前位置信息
通过坐标点获取附近公交信息
地图展示、标注

3.3 技术点实现

3.3.1 获取用户当前位置信息

我们可以通过微信小程序官方提供的api：wx.getLocation()，来获取用户的当前位置坐标点信息

wx.getLocation({
 type: 'gcj02',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
 }
})

这里我们将 type 指定为 gcj02 获取到的坐标点信息可在后续接口中直接使用，相对应的，如果将 type 指定为 wgs84，后续我们需要进一步进行坐标转换。

还有个需要注意的是，该接口需要经过用户授权同意才能调用，因此我们需要在 app.json 文件中新增相关配置：

// app.json
"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于查询公交信息"
  }
}

3.3.2 获取附近公交信息

附近公交数据哪里来？

这里我们便用到了微信小程序原生LBS能力的最佳拍档– 微信小程序JavaScript SDK。

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

接下来笔者将展示如何通过微信小程序JavaScript SDK获取附近公交的信息。

开通「腾讯位置服务」：在微信小程序后台依次选择开发->开发者工具->腾讯位置服务，然后点击开通按钮，按照提示为您的小程序开通「腾讯位置服务」
申请开发者密钥(key)：申请密钥
安全域名设置：在在微信小程序后台依次选择设置->开发设置中设置request合法域名，添加 https://apis.map.qq.com
下载微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2

小程序使用：

 // index.js
 // 引入 JavaScript SDK 核心类
 let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
 let qqmapsdk;
 Page({
   onLoad: function () {
     // 实例化API核心类
     qqmapsdk = new QQMapWX({
       key: '申请的key'
     });
   },
   onShow: function () {
     // 调用接口
     qqmapsdk.search({
       keyword: '公交车站',
       location: '28.636767,115.855820',
       filter: 'category=公交站',
       success: function (res) {
         console.log(res);
       },
       fail: function (res) {
         console.log(res);
       },
       complete: function (res) {
         console.log(res);
       }
     });
   }
 })

返回结果：

附近公交信息

可以看到，我们已经拿到了我们想要的公交数据，接下来将公交数据在地图上标注展示出来。

3.3.3 地图展示、标注

公交信息的展示使用到了「腾讯位置服务」为小程序提供的 map 组件，我们需要将公交信息组装成 markers 从而绘制到地图组件上。

关于地图组件的具体使用可参考官方文档：map组件的使用

3.4 小结

可以看到，我们通过微信小程序JavaScript SDK可以很轻松的获取到附近的公交信息。当然，微信小程序JavaScript SDK的能力也远远不仅于此，它还提供很多实用性的功能满足多种使用场景：

方法	说明
search(options:Object)	地点搜索，搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等
getSuggestion(options:Object)	用于获取输入关键字的补完与提示，帮助用户快速输入
reverseGeocoder(options:Object)	提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
geocoder(options:Object)	提供由地址描述到所述位置坐标的转换，与逆地址解析的过程正好相反
direction(options:Object)	提供驾车，步行，骑行，公交的路线规划能力
getCityList()	获取全国城市列表数据
getDistrictByCityId(options:Object)	通过城市ID返回城市下的区县
calculateDistance(options:Object)	计算一个点到多点的步行、驾车距离

详细使用可参考官方文档：微信小程序JavaScript SDK 使用方法

需要注意的是，每个key的每个服务接口的调用量都有日调用量：1万次/Key、并发数：5次/key/秒的限制，如若您的微信小程序使用量超出这个限制，可通过控制台->配额申请中免费申请你需要的配额。

四、路线规划

如果说，「乘车二维码」微信小程序让人们的出行变得更加简单、快捷。

那么，路线规划插件则为人们怎么出行提供了最优解。

4.1 效果预览

公交地图

4.2 路线规划插件

腾讯位置服务路线规划插件提供路线规划等功能，根据起终点，多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里，实现路线规划功能。

可以看到，通过使用路线规划插件，我们可以很方便的在我们「乘车二维码」微信小程序内完成路线规划功能，接入步骤也较为简单，主要分为以下几步：

插件申请接入：在微信小程序后台管理平台中，依次选择设置->第三方服务->插件管理里点击添加插件，搜索腾讯位置服务路线规划申请，审核通过后，小程序开发者可在小程序内使用该插件。

引入插件包：

 // app.json
 "plugins": {
     "routePlan": {
       "version": "1.0.5",
       "provider": "wx50b5593e81dd937a"
     }
 }

设置定位授权:

 // app.json
 "permission": {
   "scope.userLocation": {
     "desc": "你的位置信息将用于小程序定位"
   }
 }

使用插件：

 let key = '申请的key';  //使用在腾讯位置服务申请的key
 let referer = '';   //调用插件的app的名称
 let endPoint = JSON.stringify({  //终点
   'name': '八一广场',
   'latitude': 28.673400,
   'longitude': 115.904500
 });
 wx.navigateTo({
   url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
 });

在集成路线规划插件后，进一步丰富了我们「乘车二维码」微信小程序的使用场景，现在，用户可以在不使用地图类App的情况下进行最优路线规划，躲避拥堵，方便又快捷。

基于「腾讯位置服务」的路线规划插件主要有以下优势：

大数据加持，智能推荐多种出行方案。给出用户合理路线规划是最基本功能，而能否通过大数据及实时路况智能呈现更合适的方案，甚至比用户多想一步超出其预期，才是提升产品体验、提高用户粘度的关键。
海量公交运营数据，贴心提醒用户合适路线。公共交通是出行的主要方式之一，城市里丰富的公共交通资源让我们从A点到B点有太多的选择。路线规划插件的公交方案不仅可以提供多种出行偏好如少步行、时间短、换乘少等供用户选择，而且我们还整合了大量的公交实时运营数据，包括交通管制、运营时间、线路临时更改等等，可以准确告知用户在某个出行的时间内是否有合适的车辆，避免错过公交的尴尬。

4.3 小结

从「腾讯位置服务」官网可以看到，目前「腾讯位置服务」已经为我们提供了三款实用性功能插件：

路线规划：根据起点、终点，智能规划最佳出行路线，并支持多种出行方式。
地铁图：支持全国所有城市地铁线路静态展示、信息查询、线路检索及规划等功能。
地图选点：快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。

「腾讯位置服务」基于微信提供的小程序插件能力，可以说让微信小程序一步拥有地图功能，大大的减少了我们开发的工作量、提升用户体验、增加了用户在我们「乘车二维码」微信小程序的使用场景。是我们实现地图功能的最佳伙伴。

相信后续「腾讯位置服务」也会为我们提供更多功能的插件。

更多有关「腾讯位置服务」小程序插件的使用可查看官方文档：微信小程序插件

五、结语

我们在完善「乘车二维码」微信小程序的道路上从未停止过脚步，给用户提供完美的出行体验是我们的终极目标。我们也不会停止在「腾讯位置服务」上的探索，目前所使用到的能力也仅仅是冰山一角，后续我们还会继续尝试「腾讯位置服务」提供的个性化地图、地铁图等能力，力争给用户提供最完美的出行体验。

也期待着未来在微信小程序端「腾讯位置服务」能提供更多的使用场景，让出行更简单！