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

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

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

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

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

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

 这样你就会获得一个key

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

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

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

如何在uniapp里使用vuex看这里

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

 然后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就可以看到地址等一系列相关信息被打印在控制台了

<template>
	<view >
		<button @click="getRegeo">点击获取定位</button>
		<view class="">
			{{addressName}}
		</view>
	</view>
</template>

<script>
	import{mapState,mapMutations,mapActions} from 'vuex'
	import amap from '@/common/amap-wx.js'
	export default {
		data() {
			return {
			}
		},
		computed:{
		},
		onLoad() {
			 this.init()
		},
		methods: {
			...mapMutations(['init','getRegeo']),
			// ...mapActions(['getRegeo'])
		},
	}
</script>

<style scoped> 
</style>

 

 

上一篇:天气api


下一篇:caffe神经网络框架的辅助工具(将图片转换为leveldb格式)