腾讯地图路线自行设置（腾讯位置服务小程序简单使用以及显示附近WC步行路线）

一起来体验腾讯位置服务功能吧】
结合自己小程序业务，集成腾讯位置服务地图功能还是不错的，推荐各位同行提前体验和使用
【前言】

第一次使用腾讯位置服务也算是挺早的，当时是在web端使用。后来，个人慢慢接触到小程序，有一次的需求是能够展示附近的各类店铺，方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游，我们必不可少的一个需求就是需要上WC，当时就在想如何通过一个地图来实现快速定位周边WC的位置以及步行路线，鉴于那时还没太了解小程序里也开始集成了腾讯位置服务，所以仅仅是一个想法和构思，现在好了，有腾讯位置服务功能可以直接在小程序上面直接使用，借助巨人的力量可以好好发挥去实现需求功能了。
因此，写这篇文章，也是希望能够总结对接腾讯位置服务功能步骤和知识点，方便开发同行快速上手和使用。
【申请Key】
创建用于自己某一业务或某一场景的Key密钥，拥有这把钥匙，就可以开始地图功能体验啦！直接微信扫码授权登录即可，腾讯列表功能使用微信扫码登录方便好多，省去了古老需要密码登录的好方式。

后台点击菜单
key与配额 ->key管理，具体开发者密钥申请信息填写如下

【设置域名】
小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

【引入js】
下载地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

JavaScriptSDK v1.2

// 引入SDK核心类，js文件根据自己业务，位置可自行放置 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ data:{ longitude:'113.390451', latitude:'23.048914', markers:[{longitude:'113.390451',latitude:'23.048914'}] }, onLoad: function () { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'xxxx-xxxx，你自己申请到的key' }); }, onShow: function () { // 调用接口 qqmapsdk.search({ keyword: '广州大学城', success: function (res) { //console.log(res); }, fail: function (res) { //console.log(res); }, complete: function (res) { console.log(res); } }); } })

view代码

<view class='view'> <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map> </view>

【标注显示文本】
js代码效果

• js代码

//关键代码 //markers属性下还有属性成员-{label:{content:'广州番禺大学城'} data:{ markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}] },

【WC路线规划】
下面的还有做样式设置，比如：箭头、和线路颜色，以及起点和终点的文本显示等等，纯属默认参数
效果

• js代码

// 引入SDK核心类，js文件根据自己业务，位置可自行放置 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; Page({ data:{ longitude:'113.390451', latitude:'23.048914', markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}] }, onLoad: function () { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'xxxx-xxxx，你自己申请到的key' }); }, onShow: function () { // 调用接口 qqmapsdk.search({ keyword: 'GoGo厕所', success: function (res) { //console.log(res); }, fail: function (res) { //console.log(res); }, complete: function (res) { console.log(res); } }); }, //触发表单提交事件，调用接口 formSubmit(e) { //起点坐标：23.048914,113.390451 //终点坐标：23.061793,113.392056 //23.061793,113.392056 //23.063073,113.391762 var _this = this; //调用距离计算接口 qqmapsdk.direction({ mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填 //from参数不填默认当前地址 from: e.detail.value.start, to: e.detail.value.dest, success: function (res) { console.log(res); var ret = res; var coors = ret.result.routes[0].polyline, pl = []; //坐标解压（返回的点串坐标，通过前向差分进行压缩） var kr = 1000000; for (var i = 2; i < coors.length; i ) { coors[i] = Number(coors[i - 2]) Number(coors[i]) / kr; } //将解压后的坐标放入点串数组pl中 for (var i = 0; i < coors.length; i = 2) { pl.push({ latitude: coors[i], longitude: coors[i 1] }) } console.log(pl) //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点 _this.setData({ latitude:pl[0].latitude, longitude:pl[0].longitude, polyline: [{ points: pl, color: '#FF0000DD', width: 4 }] }) }, fail: function (error) { console.log(error); }, complete: function (res) { console.log(res); } }); } })

• view代码

<!--地图容器--> <map id="myMap" style="width: 100%; height: 300px;" longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location > </map> <form bindsubmit="formSubmit"> <!--输入起点和目的地经纬度坐标，格式为string格式--> <!--起点输入框,同终点，不填默认当前位置--> <label>起点坐标：<input style="border:1px solid #000;" name="start"></input></label> <!--终点输入框,例：39.984060,116.307520--> <label>终点坐标：<input style="border:1px solid #000;" name="dest"></input></label> <!--提交表单数据--> <button form-type="submit">路线规划</button> </form>

【开启个性化腾讯地图】

微信扫码绑定，微信会判断当前小程序是否注册腾讯位置服务，如果提示未注册，那么可以输入已注册的账号，一般是手机号码登录，完成小程序和腾讯位置服务账号的绑定。
有些插件还要另外申请appid