前言
第一次使用腾讯位置服务也算是挺早的,当时是在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代码
<!--地图容器-->
<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
原文作者:小5聊 原文链接:https://blog.csdn.net/lmy_520/article/details/112677899