微信小程序(Taro)获取经纬度并转化为具体城市

embedded/2024/10/20 20:30:44/

1、获取经纬度

申请权限,想要使用微信小程序获取经纬度的方法是要申请该方面的权限。

 获取经纬度的方法有很多选择其中一个使用就好。

我使用的是Taro.getFuzzyLocation()

在app.config.js中需要添加设置

 requiredPrivateInfos: ["getFuzzyLocation",],

直接上代码,获取经纬度

Taro.getFuzzyLocation({type: "wgs84",success: async (res) => {const latitude = res.latitude;const longitude = res.longitude;console.log(latitude, longitude, "纬度 经度");},fail: function (e) {console.log(e, "获取失败");},});

2、逆转地理编码

在获取到经纬度后,想要转换为具体的位置地点,需要使用高德地图或者腾讯地图,我使用的是高德地图。

地理/逆地理编码-基础 API 文档-开发指南-Web服务 API | 高德地图API

在高德开发平台注册账号后申请key

在添加key的过程中一定要选择web服务,因为只有它支持逆地理编码API

上逆转经纬度的代码

 // 根据坐标获取地址const wz = await requst.get("https://restapi.amap.com/v3/geocode/regeo?key=<你申请的key>&extensions=all&location=" +longitude +"," +latitude);console.log(wz.data.regeocode.addressComponent,wz.data.regeocode.addressComponent.city,"地点");

在获取经纬度的方法中,要把方法放到生命周期里面。不然可能会一直调用

3、全部代码 

// 获取地理位置const handleClick = () => {Taro.getFuzzyLocation({type: "wgs84",success: async (res) => {const latitude = res.latitude;const longitude = res.longitude;console.log(latitude, longitude, "纬度 经度");// 根据坐标获取地址const wz = await requst.get("https://restapi.amap.com/v3/geocode/regeo?key=<你的key>&extensions=all&location=" +longitude +"," +latitude);console.log(wz,wz.data.regeocode.addressComponent,wz.data.regeocode.addressComponent.city,"地点");},fail: function (e) {console.log(e, "获取失败");},});};useEffect(() => {handleClick();}, []);


http://www.ppmy.cn/embedded/37239.html

相关文章

品深茶的抗癌功能是否涉及虚假宣传?

品深茶说到底&#xff0c;本质还是中国传统茶叶&#xff0c;茶叶本就是一种含有多种成分的饮品&#xff0c;包括茶多酚、生物碱、氨基酸、有机酸等。这些成分对人体有一定的益处&#xff0c;如抗氧化、抗炎、抗菌等作用。 一些研究表明&#xff0c;茶叶中的某些成分如茶多酚、…

VS Code中PlatformIO IDE的安装并开发Arduino

VS Code中PlatformIO IDE的安装并开发Arduino VS Code的安装 略 PlatformIO IDE的安装 PlatformIO IDE是是什么 PlatformIO IDE 是一个基于开源的跨平台集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于嵌入式系统和物联网&#xff08;IoT&#xff09;开发。…

招展工作的接近尾声“2024上海国际科技创新展会”即将盛大开幕

2024上海国际科技创新展会&#xff0c;即将于6月中旬在上海新国际博览中心盛大召开。随着招展工作的接近尾声&#xff0c;目前仍有少量余位可供各企业和机构预定。这一盛大的科技展会&#xff0c;将汇聚全球智能科技领域的精英&#xff0c;共同展示最新的科技成果&#xff0c;探…

error: pathspec ‘XXX‘ did not match any file(s) known to git

使用vscode&#xff0c;在本地开发切换分支时&#xff0c;报以下错误&#xff1a; error: pathspec XXX did not match any file(s) known to git 该问题是由于没有对应分支的原因。 首先使用一下命令&#xff0c;查看本地及远程的所有分支。 git branch -a 若没有对应的分…

Github 2024-05-07 开源项目日报 Tp10

根据Github Trendings的统计,今日(2024-05-07统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目4Jupyter Notebook项目2Python项目1Batchfile项目1非开发语言项目1Java项目1HTML项目1C#项目1从零开始构建你喜爱的技术 创建周期…

DB-GPT: Empowering Database Interactions with Private Large Language Models 导读

本文介绍了一种名为DB-GPT的新技术&#xff0c;它将大型语言模型&#xff08;LLM&#xff09;与传统数据库系统相结合&#xff0c;提高了用户使用数据库的体验和便利性。DB-GPT可以理解自然语言查询、提供上下文感知的回答&#xff0c;并生成高准确度的复杂SQL查询&#xff0c;…

uniapp picker组件的样式更改

不知道有没有小伙伴遇到过这个问题 我是各种穿透和层级都尝试了更改不了其样式 梳理一下 H5端 在全局app.vue下添加如下代码 .uni-picker-container .uni-picker-header{ background-color: $uni-color-pink; //picker头部背景色}.uni-picker-container .…

开发组合php+mysql 人才招聘小程序源码搭建 招聘平台系统源码+详细图文搭建部署教程

随着互联网的快速发展&#xff0c;传统的招聘方式已经不能满足企业和求职者的需求。为了提高招聘效率&#xff0c;降低招聘成本&#xff0c;越来越多的人开始关注人才招聘小程序、在线招聘平台。分享一个人才招聘小程序源码及搭建&#xff0c;让招聘更加高效便捷。系统是运营级…