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

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

什么是navigator.geolocation

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

总结：就是gps定位

使用：

！！注意：

协议必须是https（之前在http下试了半天，人裂开）

手机需要开启定位

如果第一次请求定位权限被拒绝，需要清除浏览器缓存才能再次获取请求权限

//Geolocation获取当前位置function getNavigatorGeoLocation(){//判断浏览器是否支持geolocationif(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{//浏览器不支持geolocationconsole.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./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){//浏览器支持geolocationnavigator.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{//浏览器不支持geolocationconsole.log("当前系统不支持GPS API") }},}}

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

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