微信小程序开发(十五)获取位置

时间:2022-08-08 05:52:10

最近又在做小程序开发的工作。这次需要获取用户的地理位置,就是在界面上显示用户所在的城市。

准备工作

准备工作就是看小程序的文档-小程序-获取位置
这里小程序提供了一个接口wx.getLocation(OBJECT)

接口参数

微信小程序开发(十五)获取位置
这里主要是那个type参数。

success返回

微信小程序开发(十五)获取位置
这里我们可以看见返回的数据里面和位置相关的只有经纬度latitudelongitude。但是这个是数字,用户并不需要关系这些也看不懂,用户只需要知道当前定位的城市,那么只调用这一个接口是不行。我们需要逆向地址解析。

逆向地址解析

什么是逆向地址解析

这个说白了就是根据经纬度获取所在位置的国家、省、市、区和接到等信息。其实还有正向解析,这个就是一个相反的过程了。
这是之前用高德地图的时候写的《高德地图—线路规划查询/正向地理编码/地图覆盖物》《高德地图—天气搜索/逆向地理编码/定位》

腾讯位置服务

腾讯位置服务腾讯提供了一些接口可以调用。

获取密匙

登录–控制台–密匙管理
微信小程序开发(十五)获取位置
填写相关信息
微信小程序开发(十五)获取位置
这里主要是应用于这里要注意。小程序端就选择浏览器,服务端使用腾讯接口就选择服务端。

微信小程序JavaScript SDK

文档地址:开发–微信小程序开发–微信小程序JavaScript SDK

使用步骤

微信小程序开发(十五)获取位置
主要是小程序示例部分需要详细说明。

开发实例

1.项目中添加微信小程序JavaScriptSDK
我是把下载的qqmap-wx-jssdk.js放在了这里。
微信小程序开发(十五)获取位置
2.页面js文件使用
微信小程序开发(十五)获取位置
首先在Page外申明两个变量:

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var demo = null;

在实例化

onLoad: function () {
demo = new QQMapWX({
key: '开发密钥(key)' // 必填
});
}

调用接口

getCity: function(){
var self = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy

// 调用接口
demo.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
self.setData({
cityName: res.result.ad_info.city
})
},
fail: function (res) {
self.setData({
cityName: '深圳市'
})
},
complete: function (res) {
console.log(res);
}
});
}
})
},

这里首先调用wx.getLocation获取到经纬度之后再调用腾讯位置服务的reverseGeocoder接口即可。剩下的就是处理返回的数据显示了。

服务端WebService API的使用

上面介绍的使用小程序端的。其实仔细看调试模式和返回的数据,还是调用的是服务端WebService API。反而还需要把微信的域名作为小程序的一个安全域名,这个我是不能忍的,我一个小程序,为什么我要添加两个不同的域名呢,而且还有一个是别人的,而且这样做也不利于以后的维护,如果项目不使用腾讯的位置服务而是百度、高德什么,那是不是我就需要修改小程序端的代码了,甚至还要写服务端代码。为什么不一次搞定了。
所以这里就有必要使用一下服务端WebService API

获取密匙

这一步和上面类似,只是在生成密匙时我们选择的应用于是选择服务端。

服务端逆向解析

首先看文档逆地址解析(坐标位置描述)
接口说明:
1.该请求为GET请求
http://apis.map.qq.com/ws/geocoder/v1/?location=
2.请求参数
微信小程序开发(十五)获取位置
微信小程序开发(十五)获取位置
这里其实我们只需要传递locationkey参数即可。
3.实例
http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77

服务端代码

router.all('/api/tengxunmap', function(req, res, next) {
var param = req.query || req.params;
var latLng = param.lat;
var urlStr = 'http://apis.map.qq.com/ws/geocoder/v1/?location=' + latLng + '&key=AYSBZ-****************-3YB3P';
request(urlStr, function (error, response, body) {
if (!error && response.statusCode == 200) {
var jsBody = JSON.parse(body);
if (jsBody.status == 0) {
var data = {};
data.msg = '获取位置信息成功';
data.status = '100';
data.city = jsBody.result.ad_info.city;
res.end(JSON.stringify(data));
} else{
var data = {};
data.msg = '获取位置信息失败';
data.status = '102';
res.end(JSON.stringify(data));
}
res.end(body);
}else{
var data = {};
data.msg = '获取位置信息失败';
data.status = '101';
res.end(JSON.stringify(data));
}
})
})

小程序客户端代码

getCity: function(){
var self = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy

var lat = latitude + ',' + longitude
wx:wx.request({
url: 'https://api.hgdqdev.cn/api/tengxunmap',
data: {
lat: lat
},
method: 'get',
dataType: 'json',
success: function(res) {
if(res.data.status == 100){
self.setData({
cityName: res.data.city
})
}else{
self.setData({
cityName: '深圳市'
})
}
},
fail: function(res) {},
complete: function(res) {},
})
}
})
},

上面我开放了我们接口,方便大家调用。
接口:https://api.hgdqdev.cn/api/tengxunmap,GET请求
参数:lat,
参数格式:var lat = latitude + ',' + longitude,比如:39.984154,116.307490
返回:

{
msg: '获取位置信息成功',
status: 100,
city: '武汉市' // 用户当前所在城市,比如:武汉市
}

至此小程序的获取位置介绍完毕。

总结

其实使用小程序的接口还是很方便的。理清思路,看文档即可完成开发。
但是还是有一点小小的建议,既然小程序是运行在微信里面的,微信是可以获取到用户当前所在城市的,我们为什么小程序只能获取到地理左边。