移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。
这里我用的是腾讯的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