uniapp小程序获取定位(高德SDK)

由于uniapp自带的getlocation方法不支持解析地址,所以这里记录下使用高德sdk的方法

 

首先登陆高德开放平台 登录/注册后打开控制台,在应用管理里创建新应用

uniapp小程序获取定位(高德SDK)_第1张图片

然后点击添加按钮,添加key

uniapp小程序获取定位(高德SDK)_第2张图片

 这样你就会获得一个key

然后点击这个网址下载文件,找到amap-wx.js文件,放到项目common文件夹里(放哪里看个人意愿,别放static就行)

uniapp小程序获取定位(高德SDK)_第3张图片

 然后我们新建一个vuex的module,这里随便起了个名字= =不要在意

如何在uniapp里使用vuex看这里

uniapp小程序获取定位(高德SDK)_第4张图片

 然后god.js文件编辑内容

import amap from '../../common/amap-wx.js'
export default {
	state:{
		amapPlugin: null,
		key: '8d6e1e1d5579cd9d6b96b9ab3bdb2d92',//这里就是高德平台上获取的key
		addressName: '',
		weather: {
			hasData: false,
			data: []
		}
	},
	mutations:{
		init(state){
			state.amapPlugin = new amap.AMapWX({
			           key: state.key  
			       }); 
				   console.log(state.amapPlugin);
		},
		getRegeo(state) {
			uni.showLoading({
				title: '获取信息中'
			});
			state.amapPlugin.getRegeo({
				success: (data) => {
					console.log(data)
					state.addressName = data[0].name;
					uni.hideLoading();
				}
			});
		}
	},
	actions:{
	
	}
}

然后把这个模块引入到vuex的index.js文件里

import Vue from 'vue'
import Vuex from 'vuex'
//这里
import god from './modules/god.js'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
	},
	getters: {
	},
	mutations: {
	},
	actions: {
	},
	modules:{
//这里
		god,
	}
})
export default store

 在想要使用的页面使用即可,以下为示例(无关内容已删除)

点击button就可以看到地址等一系列相关信息被打印在控制台了






你可能感兴趣的:(javascript,vue.js,uni-app,sdk)