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

由于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',//这里就是高德平台上获取的keyaddressName: '',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>

uniapp小程序获取定位（高德SDK)相关推荐

uni-app 小程序获取实时定位和车辆签到（wx.onLocationChange方法）
1.需求描述实现一个车辆定位签到功能,获取当前车辆的实时定位,当车辆到达签到点1公里范围内时,可以进行签到,当大于1公里时,禁止签到.同时用户还可以手动刷新定位. 2.wx.getL ...
uni-app 小程序获取实时定位和车辆签到（wx.getLocation方法）
一.需求描述实现一个车辆定位签到功能,获取当前车辆的实时定位,当车辆到达签到点1公里范围内时,可以进行签到,当大于1公里时,禁止签到.同时用户还可以手动刷新定位. 二.wx.getLocation ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...
uniapp 小程序获取微信收货地址
引言小程序商城中,不可避免会出现获取并添加微信的收货地址,根据现在小程序的规则实现获取微信收货地址封装获取微信收货地址API // asyncWx.js/*** 获取用户收货地址 uni.choo ...
uniapp 开发微信小程序，通过高德SDK获取当位置详细信息
背景: 需求是需要获取到当前位置的详细信息(结构化地址(省/市/区/街道/门牌号)) 首先想到的是通过uni的getLocation() 获取当前位置,但是发现只能获取到经纬度坐标点,无法获取到结构化 ...
uniapp微信小程序获取定位（通过经纬度获取地址）
项目要求首页有个定位功能,但是uni.getLocation在小程序端只能获取到经纬度,拿不到地址 uniapp官网有说明这点:uni.getLocation(OBJECT) | uni-app官网 ...
微信小程序(获取定位)
实现微信小程序定位并不难,但是如果第一次接触的话还是很懵,这里就记录一下,方便自己复习或大家借鉴吧! 首先重点有两条: 通过微信小程序api: wx.getLocation(Object object ...
【uni-app】uni-app 小程序获取手机号登录
具体业务小程序使用手机号登录,需要绑定到当前业务系统.获取手机号时序图如下: 实现前端 uni-app 我对 uni.request 进行了封装,可能请求方式有些不同 <template&g ...
uniapp 小程序地图定位选点功能
<template></template> <script> import { getAddressCode } from "@/api/address& ...

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

uniapp小程序获取定位（高德SDK)相关推荐

最新文章

热门文章