第二期 微信云开发之位置信息获取(wx.getLocation)

很多小伙伴在开发微信小程序的时候，需要获取当前用户位置信息时，都会遇到该如何获取位置详细信息的问题，以下是我的处理方法。
首先，我在生活智打卡小程序使用的是微信小程序自带的获取用户的位置信息的接口（wx.getLocation），但是这个接口不会返回具体的地址信息（比如xxx地名），主要调用方法和返回参数如下：

wx.getLocation({
	type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
	success: function (res) {
		console.log("定位成功", res);
	}
});

//返回结果
{	// 位置的精确度，反应与真实位置之间的接近程度，可以理解成10即与真实位置相差10m，越小越精确
	accuracy: 65
	errMsg: "getLocation:ok"
	// 水平精度，单位 m
	horizontalAccuracy: 65
	latitude: 纬度
	longitude: 经度
	// 速度
	speed: -1
	// 垂直精度，单位 m
	verticalAccuracy: 65
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

要想获取具体位置信息，还需要做下一步处理
首先，进入腾讯地图开发者平台，没有账号的先完成账号注册，随后进入控制台应用管理列表添加应用

添加key

最后可查看官方文档进行逆地址解析了，以下是我写的示例，仅供参考：

wx.request({
	url: 'https://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1',
	data: {
		"key": "你申请的key",
		"location": "39.984154,116.307490"
	},
	method: 'GET',
	success: function (res) {
    	// success
    	console.log(res.data);
        console.log("请求数据:" + address);
    },
    fail: function () {
    	// fail
    	console.log("请求失败");
    },
    complete: function () {
    // complete
    	console.log("请求完成");
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

部分响应结果（详细可查看官方文档）
：

如何在地图上展示当前位置图标？请查看以下代码

// 前端

<view class="container">
	<view class="map">
		<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"
			polyline="{{polyline}}" show-location="true" show-location style="width: 100%; height: 400rpx;font-size:32rpx">map>
		<view class="address">位置：{{address}}view>
		<view class="address">详细地址：{{detail}}view>
		<view class="address" wx:if="{{!isPosition}}" style="color:red;font-size:24rpx;">请打开手机位置服务，才可以打卡view>
	view>
	<view class="content" style="{{'margin-top:'+ marginTop +'rpx'}}">
		<scroll-view scroll-y="true">
			<block wx:if="{{clock_in}}">
				<view class="clockinfo" wx:for="{{clock_in}}" wx:key="item">
					<i-card title="地址：{{clock_in[index].address}}">
						<view slot="content">详细地址：{{clock_in[index].detail}}view>
						<view slot="footer">打卡时间：{{clock_in[index].time}}view>
					i-card>
				view>
			block>
			<view wx:if="{{!ifData}}" style="text-align: center;">暂无打卡记录view>
		scroll-view>
	view>
	<view class="btn">
		<button class="button" bindtap="onAdd" type='primary'>开始打卡button>
	view>
	<view wx:if="{{showCon}}" class="modal-mask" bindtap="changeModalCancel">
		<view class="modal-dialog">
			<view class="modal-title">温馨提示view>
			<view class="modal-content">
				获取定位失败，请前往设置打开定位权限，我们将用于定位打卡功能。
			view>
			<view class="modal-footer">
				<view class="btn-cancel" catchtap="changeModalCancel">取消view>
				<button open-type="openSetting" class="btn-confirm button-on-view" style="padding:16rpx;"
					catchtap="changeModalCancel">设置button>
			view>
		view>
	view>
view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

js代码

const app = getApp();
Page({
    /**
     * 页面的初始数据
     */
    data: {
        address: '',
        latitude: '',
        longitude: '',
        detail: '',
        markers: [],
        _openid: '',
        clock_in: '',
        showCon: false,
        marginTop: 0, // 距离顶部高度
        city: '',
        district: '',
        isPosition: true,
        ifData: true
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        wx.showNavigationBarLoading() //在标题栏中显示加载
        this.getCityNameOFLocation();
        setTimeout(function () {
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
        }, 1000);
    },
    changeModalCancel: function () {
        this.setData({
            showCon: false
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.startPullDownRefresh() //下拉刷新
        this.setData({
            _openid: app.getOpenid()
        })
        var that = this;
        setTimeout(function () {
            that.onList();
        }, 1000)
    },
    getCityNameOFLocation: function () {
        var that = this;
        wx.getLocation({
            type: 'gcj02', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
            success: function (res) {
                console.log("定位成功", res);
                var latitude = res.latitude;
                var longitude = res.longitude;
                var locationString = latitude + "," + longitude;
                wx.request({
                    url: 'https://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1',
                    data: {
                        "key": "你申请的key",
                        "location": locationString
                    },
                    method: 'GET',
                    // header: {}, 
                    success: function (res) {
                        // success
                        console.log(res.data);
                        var address = res.data.result.address
                        var detail = res.data.result.formatted_addresses.rough
                        console.log("请求数据:" + address);
                        that.setData({
                            markers: [{
                                iconPath: "",
                                id: 0,
                                latitude: latitude,
                                longitude: longitude,
                                width: 50,
                                height: 50
                            }],
                            address: address,
                            detail: detail,
                            latitude: latitude,
                            longitude: longitude,
                            city: res.data.result.ad_info.city,
                            district: res.data.result.ad_info.district
                        })
                    },
                    fail: function () {
                        // fail
                        console.log("请求失败");
                    },
                    complete: function () {
                        // complete
                        console.log("请求完成");
                    }
                })
            },
            fail: function () {
                // fail
                console.log("定位失败");
                wx.getSetting({
                    success: (res) => {
                        if (!res.authSetting['scope.userLocation']) {
                            that.setData({
                                showCon: true,
                                isPosition: false
                            })
                        }
                    }
                })
            },
            complete: function () {
                // complete
                console.log("定位完成");
            }
        })
    },
    //添加位置信息
    onAdd: function () {
        if (this.data.address) {
            var time = util.formatTime(new Date);
            const db = wx.cloud.database();
            db.collection('position').add({
                data: {
                    address: this.data.address,
                    detail: this.data.detail,
                    latitude: this.data.latitude,
                    longitude: this.data.longitude,
                    time: new Date(time),
                    city: this.data.city,
                    district: this.data.district
                },
                success: res => {
                    // 在返回结果
                    wx.showToast({
                        title: '添加成功',
                    })
                    var that = this;
                    setTimeout(function () {
                        that.onList()
                    }, 1000)
                },
                fail: err => {
                    wx.showToast({
                        icon: 'none',
                        title: '添加失败'
                    })
                    console.error('[数据库] [新增记录] 失败：', err)
                }
            })
        } else {
            wx.showToast({
                title: '请打开位置服务，才可以打卡',
                icon: 'none'
            })
        }
    },
    //查询打卡记录
    onList: function () {
        const db = wx.cloud.database();
        db.collection('position').where({
                _openid: this.data._openid
            }).skip(0).orderBy('time', 'desc')
            .get({
                success: res => {
                    console.log(res.data);
                    if (res.data.length > 0) {
                        var info = [{}];
                        for (var i = 0; i < res.data.length; i++) {
                            var date = new Date(res.data[i].time);
                            var date_value = util.formatTime(date);
                            info[i] = {
                                time: date_value,
                                address: res.data[i].address,
                                detail: res.data[i].detail
                            };
                            // console.log(date_value)
                        }
                        this.setData({
                            clock_in: info
                        })
                    } else {
                        this.setData({
                            ifData: false
                        })
                    }
                    // console.log('[数据库] [查询记录] 成功: ', this.data.clock_in)
                },
                fail: err => {
                    wx.showToast({
                        icon: 'none',
                        title: '查询失败',
                    })
                    console.log(' 获取 clock_in 失败，请检查是否有部署云函数，错误信息：', err)
                }
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady(e) {
        var that = this
        // 页面渲染完成
        setTimeout(() => {
            var query = wx.createSelectorQuery();
            query.select('.map').boundingClientRect();
            query.selectViewport().scrollOffset();
            query.exec((res) => {
                console.log(res)
                var listHeight = res[0].height; // 获取list高度
                that.setData({
                    marginTop: listHeight * 2 + 20
                })
            });
        }, 1000)

    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

css代码

page {
	background: #F6F6F6;
}
.address{
	margin: 20rpx 20rpx 20rpx 40rpx;
  font-size:30rpx;
}
.map {
  width: 100%;
  position: fixed;
	top: 0;
  z-index: 1;
	background: white;
	box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
.title {
	margin: 20rpx 0 20rpx 0;
	width: 100%;
  text-align: center;
	font-weight: bold;
}
.clockinfo {
	margin-top:20rpx;
  width: 100%;
  float: left;
}
.content {
  font-size: 28rpx;
  margin-bottom: 200rpx;
}
.btn {
	position: fixed;
  height: 140rpx;
  text-align: center;
	width: 100%;
  bottom: 0rpx;
  background-color: white;
}
.button {
  margin-top: 24rpx;
}
.modal-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-dialog {
	width: 540rpx;
	overflow: hidden;
	z-index: 9999;
	background: #f9f9f9;
	border-radius: 5rpx;
}
.modal-title {
	padding-top: 30rpx;
	font-size: 32rpx;
	color: #030303;
	text-align: center;
}
.modal-content {
	padding: 20rpx 32rpx;
	font-size: 28rpx;
}
.modal-footer {
	display: flex;
	flex-direction: row;
	height: 86rpx;
	border-top: 1px solid #dedede;
	font-size: 34rpx;
	line-height: 86rpx;
}
.btn-cancel {
	width: 50%;
	color: #abb4bd;
	text-align: center;
	border-right: 1px solid #dedede;
}
.btn-confirm {
	width: 50%;
	color: #6fb64b;
	text-align: center;
	font-weight: 500;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

好了，在此如果有什么不懂的在评论区留言或者私信联系作者，感谢您的支持！！！