微信小程序中腾讯位置API使用
本例主要是针对于微信小程序的定位功能和获取周边的poi信息
准备工作
- 申请开发者密钥(key):申请密钥
- 开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
- 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2,下完了把两个js文件放进项目中
- 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com,或者开发时选择不校验合法域名
小程序示例
通过关键字查询附近poi
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); //引入SDK核心类
var qqmapsdk;
Page({
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
});
},
onShow: function () {
// 调用接口
qqmapsdk.search({
keyword: '这里可以填写关键字',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
})
逆地址解析(坐标位置描述)
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); //引入SDK核心类
var qqmapsdk;
Page({
onLoad: function () {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
});
},
onShow: function (options){
this.getLocal();
},
//调用微信api获取经纬度然后传入地图API
getLocation: function(){
let vm = this;
wx.getLocation({
type: 'wgs84',
altitude: true,
success: function(res) {
console.log(res);
var latitude = res.latitude;
var longitude = res.longitude;
//传入参数
vm.getLocal(latitude, longitude)
},
fail: function(res){
console.log('获取经纬度失败fail')
}
})
},
//获取当前地理位置
getLocal: function (latitude, longitude){
let vm = this;
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log('获取API定位信息失败');
}
})
}
})
关于位置API参数问题
官方文档上有详细介绍,这里我讲一下官方文档中不太能弄清楚的地方
- 如果是使用小程序原生开发,API中类似于poi_options=page_index=1都是写为poi_options:'page_index=1’格式
- filter过滤器的参数需要把类型转化为url编码再传入,例如:
//地址搜索,排除掉公交站的信息
search: function(e){
var vm = this
console.log(e.detail.value);
qqmapsdk.search({
keyword: e.detail.value, //搜索关键词
region: location,
filter: 'category<>%E5%85%AC%E4%BA%A4%E8%BD%A6%E7%AB%99',
success: function (res) {
console.log(res)
}
})
},
关于如何转化url编码
你把想要的东西输入这个转换编码网站,转换了复制粘贴到代码中就ok了!