本文目录
1、获取用户当前地理位置
1.1 配置app.json
在小程序开发中,真正需要使用授权接口时,才向用户发起授权申请。如果需要获取用户当前地理位置,需要在授权申请中说明清楚要使用该功能的理由,需要授权 scope.userLocation
、scope.userLocationBackground
时必须配置地理位置用途说明。
参考官方文档,在app.json文件中添加如下示例代码:
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}
1.2 调用函数进行请求
json文件配置好之后,就可以在需要发起用户地理位置请求的页面文件中调用相关函数了。根据实际需求选择小程序提供的API:wx.getLocation(Object object)
,文档说明
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude //获取经度
const longitude = res.longitude //获取维度
const speed = res.speed //获取速度
const accuracy = res.accuracy //获取精度
const altitude = res.altitude //获取高度
}
})
由于wx.getLocation(Object object)
只能获取到经纬度数据,所以我们可以利用腾讯位置服务来进行逆地址解析,从而得到当前位置的具体省市县等详细地区信息。
2、腾讯位置服务应用
2.1 注册认证账号并配置key值
注册 -> 绑定开发者信息 -> key值配置 -> 程序开发
key值配置的时候要注意信息填写
最后一项 webServiceAPI选择授权IP之后留空即可,不然在请求时出现返回签名验证失败。已工单询问(具体答复为:目前小程序JavascriptSDK不支持签名,目前的解决办法是改为授权IP,然后配置框留空)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DzYe6H5P-1611817386394)(1066439-20190128161704680-250374937.png)]
2.2 利用其提供的 JavaScript SDK 实现开发
根据腾讯位置服务API提供的小程序SDK使用文档进行开发:
-
申请开发者密钥(key):申请密钥
-
开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
-
小程序示例
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
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);
}
});
}
})
使用reverseGeocoder(options:Object)
接口进行逆地址解析
官方示例:
<!--地图容器-->
<!--longitude及latitude为设置为调转到指定坐标位置,默认不显示-->
<map id="myMap"
markers="{{markers}}"
style="width:100%;height:300px;"
longitude="{{poi.longitude}}"
latitude="{{poi.latitude}}" scale='16' show-location>
</map>
<!--form表单-->
<form bindsubmit="formSubmit">
<!--地址输入框,例:39.984060,116.307520-->
<input style="border:1px solid #000;" name="reverseGeo"></input>
<!--提交表单按钮-->
<button form-type="submit">逆地址解析</button>
</form>
<view>当前位置为:{{markers[0].title}}</view>
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '开发密钥(key)' // 必填
});
//在Page({})中使用下列代码
//触发表单提交事件,调用接口
formSubmit(e) {
var _this = this;
qqmapsdk.reverseGeocoder({
//位置坐标,默认获取当前位置,非必须参数
/**
*
//Object格式
location: {
latitude: 39.984060,
longitude: 116.307520
},
*/
/**
*
//String格式
location: '39.984060,116.307520',
*/
location: e.detail.value.reverseGeo || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
//get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
success: function(res) {//成功后的回调
console.log(res);
var res = res.result;
var mks = [];
/**
* 当get_poi为1时,检索当前位置或者location周边poi数据并在地图显示,可根据需求是否使用
*
for (var i = 0; i < result.pois.length; i++) {
mks.push({ // 获取返回结果,放到mks数组中
title: result.pois[i].title,
id: result.pois[i].id,
latitude: result.pois[i].location.lat,
longitude: result.pois[i].location.lng,
iconPath: './resources/placeholder.png', //图标路径
width: 20,
height: 20
})
}
*
**/
//当get_poi为0时或者为不填默认值时,检索目标位置,按需使用
mks.push({ // 获取返回结果,放到mks数组中
title: res.address,
id: 0,
latitude: res.location.lat,
longitude: res.location.lng,
iconPath: './resources/placeholder.png',//图标路径
width: 20,
height: 20,
callout: { //在markers上展示地址名称,根据需求是否需要
content: res.address,
color: '#000',
display: 'ALWAYS'
}
});
_this.setData({ //设置markers属性和地图位置poi,将结果在地图展示
markers: mks,
poi: {
latitude: res.location.lat,
longitude: res.location.lng
}
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
}
最后根据需要展示获取到的数据即可。