开发过小程序的都了解,我们在调用 uni.getLocation Api的时候,在微信小程序端,只会返给我们一个坐标系,当前位置的经纬度,当我们需要去知道当前位置的详细地址时,我们就需要进行反解析来获取地址,因为公司采用的是高德,我就以高德为例了,(腾讯,百度都一样)
1. 创建应用,设置key
文章图片
2. 下载微信小程序SDK,地址:概述-微信小程序插件 | 高德地图API
文章图片
3. 下载完成之后,放到我们的uniapp项目里面,此时我们可以封装一个方法,用来获取坐标解析后的详细地址
import {
AMAPKEY
} from "@/common/config.js"//这个就是你在第一步申请的key值const amapFile = require('./amap-wx.130.js') //引入高德地图 ,根据自己放置的文件路径来决定
const myAmapFun = new amapFile.AMapWX({
key: AMAPKEY
});
//创建一个实例化对象export default function wxGetAddress({
longitude,
latitude
}) {
//根据传递进来经纬度进行反解析,调用的是高德给的方法
return new Promise((resolve, reject) => {
myAmapFun.getRegeo({
location: `${longitude},${latitude}`,
success: (res) => {
resolve(res[0])
},
fail: (err) => {
resolve(null)
}
})
})
}
4. 调用测试,我们通过getLocation拿到坐标经纬度,调用上面封装的方法,即可拿到当前的地址
获取位置
5.页面展示
文章图片
【uniapp|uniapp(微信小程序使用高德地图进行坐标反解析获取详细地址)】 需要说的一点,就是微信开发者工具老毛病了,在开发者工具上获取的位置与自己当前的位置并不一样,这个问题不要慌,真机运行是正常的,流程大概就是这么个流程,腾讯,百度的也基本是一样的东西,多多看看文档研究研究即可
推荐阅读
- 微信小程序|uniapp开发微信小程序-软考刷题小程序
- 微信小程序|uniapp打包微信小程序识别二维码
- 小程序|uniapp-微信小程序-图片转base64
- 前端|uniapp开发微信小程序的坑
- 微信小程序|uniapp开发微信小程序获取code
- Uni-app|uniapp 小程序中使用逆地址解析 获取当前详细地址
- #|uniapp|微信小程序获取当前城市名称--逆地址解析
- 微信小程序|计算机毕业设计springboot+vue基本安卓/微信小程序的健康管理系统 uniapp
- 资讯|抖音开放平台,究竟开放了什么()