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(){
	//判断浏览器是否支持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）。那我也不管了，因为我太懒了，等我找到别的转换地址方法在写上来

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