h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址

您所在的位置：网站首页 › vue引入百度api › h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址

h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址

2024-01-28 15:02| 来源: 网络整理| 查看: 265

其实定位直接引入高德或百度的api，就可以调用其中的方法获取定位了，但是公司抠门，用里面的api会有每日访问上限，普通个人用户是5000次，并发为30

什么是navigator.geolocation

navigator.geolocation对象提供了可以公开访问地理位置的方法，其中navigator为浏览器内置对象。检测浏览器是否支持定位API，只需要检测geolocation是否存在于navigator中即可。对于移动Web开发者，大多数情况只需要获取用户的当前位置，此时可以使用getCurrentPosition()方法来获取当前位置的坐标值。getCurrentPosition()被调用时会发起一个异步请求，浏览器会调用系统底层的硬件(如GPS)来更新当前的位置信息，当信息获取到之后会在回调函数中传入position对象。总结：就是gps定位

使用：！！注意：协议必须是https（之前在http下试了半天，人裂开）手机需要开启定位如果第一次请求定位权限被拒绝，需要清除浏览器缓存才能再次获取请求权限

//Geolocation获取当前位置 function getNavigatorGeoLocation(){ //判断浏览器是否支持geolocation if(navigator.geolocation){ //参数 let options={ enableHighAccuracy:true, //是否启用高精确度模式 maximumAge:1000, //浏览器重新获取位置信息的时间间隔 timeout:15000,//请求超时时间 (15s) } //分别为成功回调函数，失败回调函数，参数 //该方法请求一次 navigator.geolocation.getCurrentPosition(success,error,options) //请求多次，监听地理位置变化（根据需求看使用哪个）这里调用会返回一个数字 watchId //navigator.geolocation.watchPosition(success,error,options) //清除监听 //navigator.geolocation.clearWatch(watchId) }else{ //浏览器不支持geolocation console.log("当前系统不支持GPS API") } } //请求成功的回调 function success(position){ console.log(position) console.log('经度='+position.coords.longitude) console.log('纬度='+position.coords.latitude) console.log('位置精度='+position.coords.accuracy ) console.log('海拔='+position.coords.altitude ) console.log('方向='+position.coords.heading ) console.log('速度='+position.coords.speed) } //请求失败的回调 function error(error){ switch (error.code) { case error.PERMISSION_DENIED: console.log('定位失败,用户拒绝请求地理定位') break; case error.POSITION_UNAVAILABLE: console.log('定位失败,暂时获取不到位置信息') break; case error.TIMEOUT: console.log('定位失败,请求获取用户位置超时') break; case error.UNKNOWN_ERROR: console.log('定位失败,定位系统失效') break; } } vue中引入百度地图api

这样引入可以解决vue : BMap is undefined 的问题

1.在src下 main.js同层级下建一个map.js文件夹

export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init"; script.onerror = reject; document.head.appendChild(script); }) }

2.在App.vue中

import { MP } from './map' export default { name: 'App', data() { return { ak: "去百度地图申请的ak", } }, async mounted(){ await MP(this.ak); } }

3.在使用的组件中

export default{ data(){}, mounted(){ this.$nextTick(()=>{ //在这里面调用BMap的方法 this.getNavigatorGeoLocation() }) } } 用navigator.geolocation获取到的经纬度，用百度地图的api方法转换为具体的地址

(这样写可以解决转百度坐标转换地图不准确的问题)

export default{ data(){ return{ city:'' } }, mounted(){ this.$nextTick(()=>{ //在这里面调用BMap的方法 this.getNavigatorGeoLocation() }) }, methods:{ getNavigatorGeoLocation(){ let options={ enableHighAccuracy:true, //是否启用高精确度模式 maximumAge:1000, //浏览器重新获取位置信息的时间间隔 timeout:15000,//请求超时时间 (15s) } if(navigator.geolocation){ //浏览器支持geolocation navigator.geolocation.getCurrentPosition((position)=>{ //成功回调 let lat = position.coords.latitude; let lng = position.coords.longitude; const pointBak = new BMap.Point(lng, lat); const convertor = new BMap.Convertor(); convertor.translate([pointBak], 1, 5,(resPoint)=>{ if(resPoint && resPoint.points && resPoint.points.length>0){ lng = resPoint.points[0].lng; lat = resPoint.points[0].lat; } const point = new BMap.Point(lng, lat); const geo = new BMap.Geocoder(); geo.getLocation(point, (res) => { console.log(res) //这里就是具体转换后的位置信息了 this.city = res.addressComponents.city }) }); },(error)=>{ //失败回调 console.log('定位失败') },options); }else{ //浏览器不支持geolocation console.log("当前系统不支持GPS API") } }, } }

别问我为什么最后写了一圈还是引入了百度的api，因为公司说又要用这个转地址（我真的会shit）。那我也不管了，因为我太懒了，等我找到别的转换地址方法在写上来

定位用了好多次，还是每次到处搜，写个贴记录一下

【本文地址】

h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址

h5使用navigator.geolocation获取定位经纬度。vue中引入百度地图api转换为具体地址

今日新闻

推荐新闻