公交地图
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获取附近公交的信息。
1. 开通「腾讯位置服务」：在微信小程序后台依次选择开发->开发者工具->腾讯位置服务，然后点击开通按钮，按照提示为您的小程序开通「腾讯位置服务」
2. 申请开发者密钥(key)：申请密钥（https://lbs.qq.com/dev/console/key/manage）
3. 安全域名设置：在在微信小程序后台依次选择设置->开发设置中设置request合法域名，添加 https://apis.map.qq.com
4. 下载微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2（http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip）
5. 小程序使用：
//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组件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）
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 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）
需要注意的是，每个key的每个服务接口的调用量都有日调用量：1万次/Key、并发数：5次/key/秒的限制，如若您的微信小程序使用量超出这个限制，可通过控制台->配额申请（https://lbs.qq.com/dev/console/quota/applyList）中免费申请你需要的配额。
