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）。那我也不管了，因为我太懒了，等我找到别的转换地址方法在写上来
定位用了好多次，还是每次到处搜，写个贴记录一下