高德地图获取位置信息并签到_高德地图100米范围内签到

用 uniapp 开发虽然很方便，但是适配还是比较麻烦的，最近用到了签到，api 中有获取位置的方法是 uni.getLocation() ，但是不大好用，现在用到了高德开放平台，在此做一个详解！

本篇文章参考 https://ask.dcloud.net.cn/article/35070

获取SDK

首先在高德开放平台注册个人或企业账号并且申请相关的 key 等信息；
然后在开发支持下载它的微信小程序 SDK，类似辅助工具库；
然后填写 app 包名，申请原生 sdk 的 appkey 信息，但不需要下载原生 sdk。
注意：app 侧重在 Android 中使用定位，或者 Android、iOS 使用地图，仍然需要同时向高德申请原生 sdk 的 key 信息，填写在 manifest 的 app sdk 配置中。

在 uni-app 项目，新建一个 common 目录（目录名自定义），然后将前面下载得到的 amap-wx.js 的文件复制进去。

注： common 与 pages 同级

引入并使用

使用时在需要的页面中引入 amap-wx.js ， onLoad 中初始化一个高德小程序 SDK 的实例对象，即可获取当前位置地址信息，以及当前位置的天气情况（此处只获取位置信息）。

import amap from '../../common/amap-wx.js';   
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: '这里填写高德开放平台上申请的key',
            addressName: '', 
            latitude: '',
			longitude: ''
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        }); 
        this.location(); 
    },  
    methods: {  
        location() {
            this.amapPlugin.getRegeo({  
                success: (data) => {  
                    console.log(data[0])  
                    this.addressName = data[0].name;//当前位置
                    this.latitude = data[0].latitude;//当前位置的纬度
					this.longitude = data[0].longitude;//当前位置的经度
                }  
            });  
        }  
    } 
}
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

此时，你已获取到所在位置的信息，接下来放心大胆的调用签到接口就好了，不过目前只是小程序能够准确地获取位置，app 还是有点问题的，要想 app 也能正常使用，就另外申请 app 的 key，详细看过程：

1. 为了方便多次使用，将其放在 config.js（公共数据） 中

//高德地图key值
// #ifdef MP-WEIXIN
let GD_KEY = "2b0762eb1bbe12a4fd011102073b9986";
// #endif
// #ifdef APP-PLUS
let GD_KEY = "fc4a07ac8259d42b20068399bfb45e07";
// #endif
1
2
3
4
5
6
7

2.在需要获取位置的页面引入并使用

import amap from '../../common/amap-wx.js';
import config from '../../common/config.js';
export default {  
    data() {  
        return {  
            amapPlugin: null,  
            key: config.GD_KEY,
            addressName: '', 
            latitude: '',
			longitude: ''
        }  
    },  
    onLoad() {  
        this.amapPlugin = new amap.AMapWX({  
            key: this.key  
        }); 
        this.location(); 
    },  
    methods: {  
        location() {
            let _this = this
			// #ifdef MP-WEIXIN
			this.amapPlugin.getRegeo({
				success: (data) => {
					_this.addressName = data[0].name + data[0].desc;
					_this.latitude = data[0].latitude
					_this.longitude = data[0].longitude
				}
			});
			// #endif

			// #ifdef APP-PLUS
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					console.info(res)
					let address = res.address
					_this.addressName = address.city +
						address.district +
						address.street +
						address.streetNum +
						address.poiName;
					//纬度
					_this.latitude = res.latitude
					//经度
					_this.longitude = res.longitude
				}
			})
			// #endif
        }  
    } 
}
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

好了，现在不管是 app 还是小程序都没有任何问题了！