由于uniapp自带的getlocation方法不支持解析地址,所以这里记录下使用高德sdk的方法
首先登陆高德开放平台 登录/注册后打开控制台,在应用管理里创建新应用
然后点击添加按钮,添加key
这样你就会获得一个key
然后点击这个网址下载文件,找到amap-wx.js文件,放到项目common文件夹里(放哪里看个人意愿,别放static就行)
然后我们新建一个vuex的module,这里随便起了个名字= =不要在意
如何在uniapp里使用vuex看这里
然后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>