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拿到坐标经纬度，调用上面封装的方法，即可拿到当前的地址

<template><view><u-button @click="click">获取位置</u-button></view>
</template><script>
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);}});}}
};
</script>

5.页面展示

需要说的一点，就是微信开发者工具老毛病了，在开发者工具上获取的位置与自己当前的位置并不一样，这个问题不要慌，真机运行是正常的，流程大概就是这么个流程，腾讯，百度的也基本是一样的东西，多多看看文档研究研究即可

uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址相关推荐

uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
uni-app 微信小程序接入高德SDK
uni-app 微信小程序接入高德SDK 参考文档:https://lbs.amap.com/api/wx/gettingstarted 一.获取高德Key 配置高德key 二.获取高德key的操作步 ...
uni-app 微信小程序用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
微信小程序使用高德地图实现标点图标修改
微信小程序引入高德地图高德地图开放平台根据入门指南完成前五步后建议在app.js中引入 amap-wx.js 并初始化高德地图 app.json // 引入路径根据自己文件所在位置引入 v ...
微信小程序引入高德地图Demo 快速上手
文章目录前言一.获取高德key 二.引入官方实例总结前言本文参照官方文档进行编写最后引入官方实例最终效果 ` 一.获取高德key 注册账号 https://lbs.amap.com/?r ...
uniapp开发微信小程序使用高德地图
uniapp 官方文档地图组件控制地图组件高德地图key需要公司去申请,之后自己在下载高德地图微信小程序插件下好的js文件放在项目中,之后在vue项目中的main.js文件中全局注入 // ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
微信小程序使用高德地图
微信小程序--高德地图开发应用(获取key) 1.利用高德开发平台创建应用 http://lbs.amap.com/dev/index 2.点击创建新应用进入创建模态框 3.添加新Key 在创建的应用 ...

uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址

uniapp：微信小程序使用高德地图进行坐标反解析获取详细地址相关推荐

最新文章

热门文章