uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址 |
您所在的位置：网站首页 › 高德地图坐标转百度 › uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址 |
uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址
|
开发过小程序的都了解，我们在调用 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拿到坐标经纬度，调用上面封装的方法，即可拿到当前的地址 获取位置 import { wxGetAddress } from '@/utils/function/index.js'; //刚刚封装的方法 export default { methods: { click() { uni.getLocation({ type: 'gcj02', success: async res => { let { longitude, latitude } = res; let result = await wxGetAddress({ longitude, latitude }); console.log(result); } }); } } };5.页面展示
需要说的一点，就是微信开发者工具老毛病了，在开发者工具上获取的位置与自己当前的位置并不一样，这个问题不要慌，真机运行是正常的，流程大概就是这么个流程，腾讯，百度的也基本是一样的东西，多多看看文档研究研究即可 |
【本文地址】