前言
第一次应用腾讯位置服务也算是挺早的，过后是在web端应用。起初，集体缓缓接触到小程序，有一次的需要是可能展现左近的各类店铺，不便本人疾速定位四周有什么好吃好逛的中央。再起初每次到一个中央游览，咱们必不可少的一个需要就是须要上WC，过后就在想如何通过一个地图来实现疾速定位周边WC的地位以及步行路线，当初好了，有腾讯位置服务性能能够间接在小程序下面间接应用，借助伟人的力量能够好好施展去实现需求性能了。
因而，写这篇文章，也是心愿可能总结对接腾讯位置服务性能步骤和知识点，不便开发同行疾速上手和应用。
申请Key
创立用于本人某一业务或某一场景的Key密钥，领有这把钥匙，就能够开始地图功能体验啦！间接微信扫码受权登录即可，腾讯列表性能应用微信扫码登录不便好多，省去了古老须要明码登录的好形式。
后盾点击菜单：key与配额 ->key治理，具体开发者密钥申请信息填写如下
设置域名
小程序管理后盾 -> 开发 -> 开发治理 -> 开发设置 -> “服务器域名” 中设置request非法域名，增加https://apis.map.qq.com
引入js
点击官网的开发文档中的微信小程序JavaScript SDK进行下载
// 引入SDK外围类，js文件依据本人业务，地位可自行搁置var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');var qqmapsdk;Page({ data:{ 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); } }); }})应用地图
应用地图map组件，具体参数可登录微信官网文档进行查看
舒适提醒：小程序界面默认顶部是红色背景固定高度的标题栏，如果须要暗藏顶部标题栏的办法，那么须要在app.json配置里的window里加"navigationStyle": "custom",
默认效果图
地图组件参数什么也没设置的状况下，默认如下效果图
view代码
<view class='view'> <map longitude="{{longitude}}" latitude="{{latitude}}"></map></view>显示标注
给默认坐标加个标注，标注能够是数组，坐标点数组值，这样在地图的成果就是多个标注点
marker：标记点用于在地图上显示标记的地位
要害代码：markers:[{longitude:'113.390451',latitude:'23.048914'}]
多个标注：markers:[{longitude:'113.390451',latitude:'23.048914'},{longitude:'113.390451',latitude:'23.048914'}]
- bindmarkertap：点击标记点时触发
- bindlabeltap：点击标记点label时触发
- bindcallouttap：点击标记点对应的气泡时触发
默认标注成果
js代码
// 引入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代码
<!--地图容器--><mapid="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
原文作者：小5聊
原文链接：https://blog.csdn.net/lmy_520...