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

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();
  }, []);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/612751.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

线性代数的一些理解(更新中)

以前学的时候都是囫囵吞枣&#xff0c;能搞过就得了。现在有了点时间可以静下来看看。。 还是分成点来看吧。 1 小车运行 一个车匀速在一维坐标前行&#xff0c;速度是2米每秒&#xff0c;起始点是0。如何描述 设 &#x1d465;(&#x1d461;) 表示车辆在时间 &#x1d461…

【赠书活动第4期】《Rust编程与项目实战》

赠书活动 《Rust编程与项目实战》免费赠书 3 本&#xff0c; 收到赠书之后&#xff0c;写一篇 本书某一节内容 的学习博客文章。 可在本帖评论中表示参加&#xff0c;即可获得赠书&#xff0c;先到先得。学习心得博客链接&#xff0c;后面有空发上来。 赠书截止日期为送出3…

使用FFmpeg处理RTSP视频流并搭建RTMP服务器实现图片转直播全流程

目录 一、FFmpeg安装与配置教程二、搭建并配置Nginx RTMP服务器三、从RTSP视频流提取帧并保存为图片四、将图片序列转换为视频五、将视频推送为直播流六、将图片序列推送为直播流 在实时音视频领域&#xff0c;我们经常需要处理从各种源&#xff08;如摄像头&#xff09;获取的…

Ansible的安装与配置

Ansible的安装与配置 1. 安装ansible # ansible是epel源提供的&#xff0c;所以必须安装epel&#xff1a; [rootRocky9 ~]# yum -y install epel-release Last metadata expiration check: 0:01:53 ago on Tue 26 Dec 2023 10:05:34 PM CST. Dependencies resolved. Package …

微信小程序原生组件使用

1、video组件使用 <view class"live-video"><video id"myVideo" src"{{videoSrc}}" bindplay"onPlay" bindfullscreenchange"fullScreenChange" controls object- fit"contain"> </video&g…

Kubernetes: 从零开始理解K8s架构

目录 一、简介 二、Kubernetes 架构原理 2.1 控制平面 2.2 Node 组件 2.3 Container Image 2.4 kubelet 2.5 Cluster 三、服务调用 四、总结 一、简介 Kubernetes 是一个开源的容器编排系统&#xff0c;用于自动化应用容器的部署、扩展和管理。它是Google基于Borg…

Yolov8目标检测——在Android上部署Yolov8 tflite模型

1. 简介 YOLOv8 是一种用于目标检测的深度学习模型&#xff0c;它是 YOLO&#xff08;You Only Look Once&#xff09;系列的最新版本之一。YOLO 系列因其高效和准确性而在计算机视觉领域非常受欢迎&#xff0c;特别是在需要实时目标检测的应用中&#xff0c;如视频监控、自动…

【Shell编程】3.Shell字符串、Shell数组

目录 Shell字符串 代码1 test3_1.sh 运行 结果 获取字符串长度 代码2 test3_2.sh 运行 结果 Shell字符串拼接 代码3 test3_3.sh 运行 结果 Shell字符串截取 从指定位置开始截取 从字符串左边开始计数 从字符串右边开始计数 从指定字符开始截取 使用#号截取…

煤矿防爆气象传感器

TH-WFB5随着工业技术的不断发展&#xff0c;煤矿作为我国能源领域的重要组成部分&#xff0c;其安全生产问题一直备受关注。在煤矿生产过程中&#xff0c;井下环境复杂多变&#xff0c;瓦斯、煤尘等易燃易爆物质的存在使得井下安全工作尤为重要。为了提高煤矿生产的安全性&…

Apache Flume概述

Apache Flume概述 1.Flume定义 ​ Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。 它将各个服务器中的数据收集起来并送到指定的地方去&#xff0c;比如说送到HDFS、Hbase&#xff0c;简单来说flume就是收集日志的。 2.Flume基础架构…

inBuilder 低代码平台新特性推荐 - 第十八期

今天来给大家带来的是inBuilder低代码平台特性推荐系列第十八期——表单设计器集成预约日历组件。 一、场景介绍 项目上希望用日历的形式展示某地点在一段时间内的预约记录&#xff0c;表单设计器新增支持创建日历预约视图&#xff0c;并配置预约属性。 二、运行效果 三、前…

成都一体化污水处理成套设备如何选型

一体化污水处理成套设备因其占地面积小、操作简便、处理效果稳定等优点&#xff0c;在小型污水处理项目中得到了广泛应用。在选型时&#xff0c;应考虑以下几个关键因素&#xff1a; 处理规模&#xff1a;根据需要处理的污水量&#xff08;通常以每天处理的立方米数表示&#x…

滑动窗口篇: 长度最小子数组|无重复字符最长字串

目录 1、滑动窗口算法 1.1 核心概念 1.2 基本步骤 1.3 应用场景 1.4 优势 2. leetcode 209 长度最小子数组 暴力解题思路&#xff1a; 滑动窗口思路&#xff1a; 3、无重复字符的最长子串 暴力解题思路&#xff1a; 滑动窗口思路&#xff1a; 1、滑动窗口算法 滑动…

React 第二十九章 React 和 Vue 描述页面的区别

面试题&#xff1a;React 和 Vue 是如何描述 UI 界面的&#xff1f;有一些什么样的区别&#xff1f; 标准且浅显的回答&#xff1a; React 中使用的是 JSX&#xff0c;Vue 中使用的是模板来描述界面 前端领域经过长期的发展&#xff0c;目前有两种主流的描述 UI 的方案&#xf…

基于MWORKS 2024a的MIMO-OFDM 无线通信系统设计

一、引言 在终端设备和数据流量爆发式增长的今天&#xff0c;如何提升通信系统容量、能量效率和频谱利用率成为5G通信的关键问题之一。大规模天线阵列作为5G及B5G无线通信关键技术通过把原有发送端天线数量提升一个或多个数量级&#xff0c;实现波束聚集、控制波束转向&#x…

《架构风清扬-Java面试系列第29讲》聊聊DelayQueue的使用场景

DelayQueue是BlockingQueue接口的一个实现类之一 这个属于基础性问题&#xff0c;老规矩&#xff0c;我们将从使用场景和代码示例来进行讲解 来&#xff0c;思考片刻&#xff0c;给出你的答案 1&#xff0c;使用场景 实现&#xff1a;延迟队列&#xff0c;其中元素只有在其预定…

使用Flask-Admin创建强大的后台管理系统

文章目录 安装Flask-Admin创建Flask应用添加Flask-Admin添加模型扩展延伸自定义视图权限管理文件上传 结语 在Web应用开发中&#xff0c;后台管理系统是至关重要的组成部分&#xff0c;它能够让管理员轻松管理应用的各种数据和配置。Flask-Admin是一个功能强大的Flask扩展&…

常见排序算法——希尔排序

基本原理 希尔排序在插入排序的基础之上&#xff0c;将待排序序列分成组&#xff0c;分成 gap 个组&#xff0c;组的数量通过 length / 2 获得&#xff0c;比如6个元素的序列&#xff0c;那么就是 3 个组&#xff0c;每个组两个元素&#xff0c;然后将每个组的元素进行插入排…

【Web后端】servlet基本概念

1.ServletAPI架构 HttpServlet继承GenericServletGenericServlet实现了Servlet接口&#xff0c;ServletConfig接口,Serializable接口自定义Servlet继承HttpServlet 2.Servlet生命周期 第一步&#xff1a;容器加载Servlet第二步&#xff1a;调用Servlet的无参构造方法&#xf…

【程序设计和c语言-谭浩强配套】(适合专升本、考研)

一晃大半年没更新了&#xff0c;这一年一直在备考&#xff0c;想着这几天把前段时间学的c语言给大家分享一下&#xff0c;在此做了一个专栏&#xff0c;有需要的小伙伴可私信获取o。 简介&#xff1a;本专栏所有内容皆适合专升本、考研的复习资料&#xff0c;本人手上也有日常…