高德地图获取位置信息并签到

用 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;//当前位置的经度
                }  
            });  
        }  
    } 
}

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

  1. 为了方便多次使用,将其放在 config.js(公共数据) 中
//高德地图key值
// #ifdef MP-WEIXIN
let GD_KEY = "2b0762eb1bbe12a4fd011102073b9986";
// #endif
// #ifdef APP-PLUS
let GD_KEY = "fc4a07ac8259d42b20068399bfb45e07";
// #endif

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
        }  
    } 
}

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

你可能感兴趣的:(app,android)