首页 > 其他分享 >移动端H5获取用户当前经纬度,地理位置信息

移动端H5获取用户当前经纬度,地理位置信息

时间:2022-11-18 16:58:40浏览次数:65  
标签:console log 经纬度 地理位置 H5 latitude data response

移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。

这里我用的是腾讯的api,直接https引用。在页面上加上

 <script charset="utf-8"  src="https://map.qq.com/api/js?v=2.exp&key=’你的key‘&libraries=convertor"></script> 这个地方的key需要你去腾讯开放平台申请。具体操作百度。。。。   // 腾讯     getLGTx() {       this.getLocation((success) => {         // 浏览器不支持定位         if (success.code) {           console.log("您的手机似乎不允许定位,请检查后重试");           this.$toast.fail({             duration: 5000,             message: "获取地理位置信息失败,请检查是否开启定位后刷新",           });         } else {           var lat = success.coords.latitude;           var lng = success.coords.longitude;           console.log(success, "425");           // //调用地图命名空间中的转换接口   type的可选值为 1:GPS经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托           qq.maps.convertor.translate(             new qq.maps.LatLng(lat, lng),             1,             (res) => {               console.log(res, "525");               //取出经纬度并且赋值               let latlng = res[0];               let latitude = latlng.lat; //纬度               let longitude = latlng.lng; //经度               this.surePosition(longitude, latitude);               // this.jx(latitude, longitude);             },             (err) => {               console.log(err);             }           );         }       });     },     // 腾讯地图定位转换坐标     getLocation(callback) {       //判断是否支持 获取本地位置       if (navigator.geolocation) {         var n = navigator.geolocation.getCurrentPosition(callback, (fail) => {           callback({             msg: "来自非https域名请求",             code: -2,           });         });       } else {         callback({           msg: "你的手机不支持定位",           code: -1,         });       }     }, //高德逆解析   surePosition(re0, re1) {       this.latitude = re0;       this.longtitude = re1;       const that = this;       axios         .get(           `https://restapi.amap.com/v3/geocode/regeo?key=’高德申请的key‘&location=${             re0 + "," + re1           }&poitype=&radius=1000&extensions=base&batch=false&roadlevel=0`         )         .then((response) => {           console.log("response", response);           // if (response.data.status) {           // } else {           //   that.showCity = "未获取定位";           // }           this.province = response.data.regeocode.addressComponent.province; //省份           this.city = response.data.regeocode.addressComponent.city; //市           this.area = response.data.regeocode.addressComponent.district; //区县           this.street = response.data.regeocode.addressComponent.township; //街道           this.detailed =             response.data.regeocode.addressComponent.streetNumber.street +             response.data.regeocode.addressComponent.streetNumber.number; //详细路段           console.log(this.province);           console.log(this.city);           console.log(this.area);           console.log(this.street);           console.log(this.detailed);           console.log("纬度latitude:", this.latitude);           console.log("经度longtitude:", this.longtitude);         });     }, .......................... 用法=》this.getLGTx()调用,检测设备是否开启导航   这个理我用上了两个平台的接口,是因为我拿不到高德精确的经纬度。腾讯可以,但是逆解析出问题了。高德的逆解析又可以用。所以我就组合起来用了。或许有更好的办法,随意指正

标签:console,log,经纬度,地理位置,H5,latitude,data,response
From: https://www.cnblogs.com/easyprogress/p/16903779.html

相关文章

  • _h5ai
    H5ai是一款功能强大php文件目录列表程序,由德国开发者LarsJung主导开发,它提供多种文件目录列表呈现方式,支持多种主流Web服务器,例如Nginx、Apache、Cherokee、Light......
  • h5 尽量不要在 flex布局中使用 绝对定位(absolute fixed),一些ios机型不兼容
    h5  尽量不要在flex布局中使用绝对定位(absolute fixed),一些ios机型不兼容先看在flex 布局中使用absolute的样子(安卓是好的,部分ios不行)   解决方案:把fl......
  • h5 端页面在弹窗时禁止底部页面滚动
    h5端页面在弹窗时禁止底部页面滚动方法一:@touchmove.stop.prevent在遮罩层中添加@touchmove.stop.prevent ,代码如下:<divclass="dialog-mask"v-if="isDlgShow"@c......
  • 问题记录-前端开发避坑(7)--vue 原生h5开发及基础组件开发
    问题1问题描述与分析执行vueRouter的编程式导航时,报错:vuerouterTypeError:onCompleteisnotafunction检查发现是参数格式不对。这里使用了对象语法,而我错把qu......
  • 由经纬度通过接口获取到省市区
    exportconstgetAddress=function(wx){returnnewPromise((resolve,reject)=>{let_this=thiswx.getSetting({success:(res)=>{......
  • 钉钉H5微应用本地开发调试记录
    准备工具:手机(ios,安卓)安卓手机可以用网易Mumu模拟器,下载一个移动版钉钉钉钉开放文档本地开发的话,可以去钉钉后台管理系统,将你的本地ip地址配置成应用的首页,比......
  • App和H5交互
    前置操作Android//前端需要载NativeMethod对象到window上//在index.html文件中强烈建议添加下面代码<script>window.NativeMethod=NativeMethod;</script>An......
  • uniapp-小程序-提审显示地理位置接口未配置
    在manifest.json的源码视图中添加即可:需要哪些就增加哪些获取两个getLocation、chooseAddress"requiredPrivateInfos":["getLocation","ch......
  • h5中drag的使用以及相关介绍:实现点餐效果
    相关的API主要有7个api,分别用来描述不同的状态前提准备主要实现的点餐功能如下:一个盘子里装了多种菜另一个是小明的菜单小明可以拖动菜品到菜单上小明的菜单中最......
  • 不一样的纯H5C3动画爱心
    最近抖音很火的让你会计算机的朋友给你做个爱心突然火了,我也不出意外的收到了朋友的邀请,自己做肯定太麻烦了于是乎百度第一步,惊呆了!网上全都是一个爱心,变着法的火焰爱......