当前位置: 首页 > news >正文

vue获取当前坐标并通过天地图逆转码为省市区

因为需求需要获取用户当前的地理位置用于分析

通过原生的navigator.geolocation.getCurrentPosition获取经纬度

这个方法在谷歌浏览器会失效(原因未知),目前ie浏览器是可以获取的

    getCurrentPosition() {if (navigator.geolocation) {var options = {enableHighAccuracy: true, //布尔值,表示系统是否使用最高精度来表示结果,注意,这会导致较慢的响应时间或者增加电量消耗(比如对于支持gps的移动设备来说)。如果值为false ,设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasletimeout: 5000, //它表明的是设备必须在多长时间(单位毫秒)内返回一个位置。默认直到获取到位置才会返回值。maximumAge: 0, //表明可以返回多长时间(即最长年龄,单位毫秒)内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置,而且必须去获取一个真实的当前位置。默认0};navigator.geolocation.getCurrentPosition(this.showPosition,this.errorPosition,options);} else {this.errorPositionTxt = "不支持获取用户当前位置";console.log("不支持获取用户当前位置");}},showPosition(position) {console.log(position);console.log(position.coords);this.latitude = position.coords.latitude;this.longitude = position.coords.longitude;this.getArea();},errorPosition(error) {console.log(222);switch (error.code) {// 不允许获取当前位置case error.PERMISSION_DENIED:this.errorPositionTxt = "不允许获取当前位置";break;// 无法获取当前位置case error.POSITION_UNAVAILABLE:this.errorPositionTxt = "无法获取当前位置";break;// 获取位置的请求超时。case error.TIMEOUT:this.errorPositionTxt = "获取位置请求超时。";break;// 获取位置操作超时case error.UNKNOWN_ERROR:this.errorPositionTxt = "获取位置操作超时";break;}},

通过天地图根据经纬度获取详细地址

    import axios from "axios";getArea() {axios({method: "get",url: "http://api.tianditu.gov.cn/geocoder",params: {tk: "放入自己申请的天地图的key",type: "geocode",postStr:"{'lon':" +this.longitude +",'lat':" +this.latitude +",'ver':1}",},}).then((res) => {console.log("数据:", res.data.result.addressComponent);});},
http://www.lryc.cn/news/94378.html

相关文章:

  • 【MySQL】事务及其隔离性/隔离级别
  • 计算机由于找不到d3dx9_35.dll,无法启动软件游戏的三个修复方法
  • 第三章 模型篇:模型与模型的搭建
  • 深度学习一些简单概念的整理笔记
  • Vue3中引入Element-plus
  • 如何查看 Facebook 公共主页的广告数量上限?
  • U-Boot移植 (2)- LCD 驱动修改和网络驱动修改
  • Ubuntu 23.10 现在由Linux内核6.3提供支持
  • Python 学习之NumPy(一)
  • Nftables栈溢出漏洞(CVE-2022-1015)复现
  • 【C++】 Qt-事件(上)(事件、重写事件、事件分发)
  • k8s部署springboot
  • 备战秋招002(20230704)
  • 游泳买耳机买什么的比较好,列举几款实战性好的游泳耳机
  • 【无线传感器】使用 MATLAB和 XBee连续监控温度传感器无线网络研究(Matlab代码实现)
  • Java基础-多线程JUC-生产者和消费者
  • day2 QT按钮与容器
  • JPA 批量插入较大数据 解决性能慢问题
  • 为啥离不了 linux
  • 基于分形的置乱算法和基于混沌系统的置乱算法哪种更安全?
  • pve使用cloud-image创建ubuntu模板
  • shiro入门
  • 开源 sysgrok — 用于分析、理解和优化系统的人工智能助手
  • Gitlab保护分支与合并请求
  • ad18学习笔记九:输出文件
  • PostgreSQL 内存配置 与 MemoryContext 的生命周期
  • vue3 组件间通信的方式(setup语法糖写法)
  • 【Cache】Rsync远程同步
  • Gitlab升级报错一:rails_migration[gitlab-rails] (gitlab::database_migrations line 51)
  • chatGPT流式回复是怎么实现的