微信小程序中腾讯位置API使用
本例主要是针对于微信小程序的定位
准备工作
- 申请开发者密钥(key):<a href="https://lbs.qq.com/console/key.html">申请密钥</a>
- 开通webserviceAPI服务:控制台 -> <a href="https://lbs.qq.com/console/mykey.html?console=mykey">key管理</a> -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
- 下载微信小程序JavaScriptSDK,<a href="http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip">微信小程序JavaScriptSDK v1.2</a>,==下完了把两个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参数问题
<a href="https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html">官方文档</a>上有详细介绍,这里我讲一下官方文档中不太能弄清楚的地方
- 如果是使用小程序原生开发,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编码
你把想要的东西输入这个<a href="http://tool.oschina.net/encode?type=4">转换编码网站</a>,转换了复制粘贴到代码中就ok了!