1. 获取用户当前所在城市信息
在开发的时候经常需要获取用户当前所在的位置信息,比如省市,邮编,附近的酒店,影院等,这时候就需要通过小程序自带的方法和百度地图api:
- 通过微信小程序wx.getLocation接口获取用户当前位置经度和纬度;
- 通过百度地图逆地理API,将获取的经度和纬度转化为城市名称;
1.1 获取定位信息(经度和纬度)
获取用户位置前,需要用户允许,也就是需要弹出弹窗获取用户权限,需要在app.json中配置如下权限:
用户授权官方文档
"permission": {
"scope.userLocation": {
"desc": "您的位置信息将用于小程序获取影院信息"
}
}
配置权限成功以后,在用户第一次启动小程序的时候,会弹出授权弹窗,在用户点击允许以后,在调用wx.getLocation时在success中会返回当前的地理信息; 如果用户点击不允许,在getLocation中就会返回failure(获取位置信息失败);
1.2 微信小程序网络请求
在使用百度地图逆地理API通过经度和纬度获取城市的时候,需要调用wx.request api来发起网络请求.
1.2.1 网络请求域名配置
每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket)。
域名配置官方文档配置百度地图域名示例
1.2.2 发送网络请求wx.request
直接使用wx.request发送网络请求,示例代码如下:
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
wx.request接口及参数说明官方文档
1.3 百度地图逆地理api的使用
在获取经度和纬度成功以后,通过百度地图的api,将经度和纬度作为参数,可以获得当前城市信息,城市名称,街道,位置等相关信息,以下是请求链接示例:
百度地图web端逆地理api文档
http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194
//GET请求
需要传入的参数:
- ak : 应用的ak
- output: 返回参数的类型(一般为json)
- coordtype: 坐标系类型 微信的getLocation参数type为wgs84返回:gps坐标,所以获取的精度和纬度是使用的gps坐标
- location:位置(经度+纬度)
1.3.1 创建百度地图应用 申请AK
首先要申请一个 AK :
创建成功以后会有应用编号和ak等信息,在请求逆地理api的时候使用.
1.4 wx.getLocation及wx.request的使用
1.4.1 获取经纬度及逆地理获取城市
getCity:function(success){
wx.getLocation({
type: 'wgs84',
altitude: true,
success: (result) => {
wx.db.ToastSuccess('获取位置成功');
wx.request({
url: 'https://api.map.baidu.com/reverse_geocoding/v3',
data: {
ak:'8TxcPq4YTwDSfLUgA09d',
output:'json',
coordtype:'wgs84ll',
location:`${result.latitude},${result.longitude}`
// location: res.latitude + ',' + res.longitude
},
success: (cityResult) => {
//console.log(cityResult);
let city = cityResult.data.result.addressComponent.city;
city = city.substring(0,city.length - 1);
console.log('城市:',city);
success && success(city);
},
fail: () => {},
complete: () => {}
});
},
fail: () => {
wx.db.ToastError('获取位置失败');
},
complete: () => {}
});
},