H5 获取手机GPS坐标

简介: H5 获取手机GPS坐标

只要手机有GPS模块,可以用HTML5的Geolocation接口获取

在HTML5中,geolocation作为navigator的一个属性出现,它本身是一个对象,拥有三个方法:

getCurrentPosition

watchPosition

clearWatch

1.简单

 function getLocation(){
        if(navigator.geolocation){
        //判断是否有这个对象
            navigator.geolocation.getCurrentPosition(function(pos){
                console.log("经度:"+pos.coords.longitude+
                "纬度:"+pos.coords.latitude)
            })
        }else{
            console.log("当前系统不支持GPS API")
        }
    }

2: 比较全面的

function getLocation(){
       var options={
           enableHighAccuracy:true, 
           maximumAge:1000
       }
       if(navigator.geolocation){
           //浏览器支持geolocation
           // alert("浏览器支持geolocation");
           navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

        }else{
            //浏览器不支持geolocation
            alert("浏览器不支持geolocation");
        }
  }

获取成功时

 function onSuccess(pos){
        console.log("经度:"+pos.coords.longitude+
                "纬度:"+pos.coords.latitude)
 }

获取失败时

function onError(error){
               switch(error.code){

                   case 1:
                   alert("位置服务被拒绝");
                   break;

                   case 2:
                   alert("暂时获取不到位置信息");
                   break;

                   case 3:
                   alert("获取信息超时");
                   break;

                   case 4:
                    alert("未知错误");
                   break;
               }

           }

other

//判断浏览器是否支持geolocation
if(navigator.geolocation){
     // getCurrentPosition支持三个参数
     // getSuccess是执行成功的回调函数
     // getError是失败的回调函数
     // getOptions是一个对象,用于设置getCurrentPosition的参数
     // 后两个不是必要参数
     var getOptions = {
          //是否使用高精度设备,如GPS。默认是true
          enableHighAccuracy:true,
          //超时时间,单位毫秒,默认为0
          timeout:5000,
          //使用设置时间内的缓存数据,单位毫秒
          //默认为0,即始终请求新数据
          //如设为Infinity,则始终使用缓存数据
          maximumAge:0
     };
 
     navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
 
     //成功回调
     function getSuccess(position){
          // getCurrentPosition执行成功后,会把getSuccess传一个position对象
          // position有两个属性,coords和timeStamp
          // timeStamp表示地理数据创建的时间??????
          // coords是一个对象,包含了地理位置数据
          console.log(position.timeStamp);   
 
          // 估算的纬度
          console.log(position.coords.latitude);    
          // 估算的经度
          console.log(position.coords.longitude);    
          // 估算的高度 (以米为单位的海拔值)
          console.log(position.coords.altitude);    
          // 所得经度和纬度的估算精度,以米为单位
          console.log(position.coords.accuracy);    
          // 所得高度的估算精度,以米为单位
          console.log(position.coords.altitudeAccuracy);    
          // 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算
          console.log(position.coords.heading);
          // 设备的当前对地速度,以米/秒为单位    
          console.log(position.coords.speed);    
          // 除上述结果外,Firefox还提供了另外一个属性address
          if(position.address){
               //通过address,可以获得国家、省份、城市
               console.log(position.address.country);
               console.log(position.address.province);
               console.log(position.address.city);
          }
     }
     //失败回调
     function getError(error){
          // 执行失败的回调函数,会接受一个error对象作为参数
          // error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
          // 执行失败时,code属性会指向三个常量中的一个,从而指明错误原因
          switch(error.code){
               case error.TIMEOUT:
                    console.log('超时');
                    break;
               case error.PERMISSION_DENIED:
                    console.log('用户拒绝提供地理位置');
                    break;
               case error.POSITION_UNAVAILABLE:
                    console.log('地理位置不可用');
                    break;
               default:
                    break;
          }
     }
     // watchPosition方法一样可以设置三个参数
     // 使用方法和getCurrentPosition方法一致,只是执行效果不同。
     // getCurrentPosition只执行一次
     // watchPosition只要设备位置发生变化,就会执行
     var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
     //clearwatch用于终止watchPosition方法
     clearWatch(watcher_id);         
}
相关文章
|
6月前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
234 0
|
4月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
6月前
|
存储 定位技术 芯片
为何手机gps定位需要流量,而车载不需要?
为何手机gps定位需要流量,而车载不需要?
145 0
为何手机gps定位需要流量,而车载不需要?
|
6月前
|
数据挖掘 定位技术
出租车GPS轨迹、社交软件签到、手机信令数据下载网站整理
出租车GPS轨迹、社交软件签到、手机信令数据下载网站整理
398 2
|
6月前
|
XML Java 定位技术
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
305 0
|
移动开发 小程序 Android开发
|
移动开发
手机端H5加载中效果demo(整理)
手机端H5加载中效果demo(整理)
|
移动开发
H5手机端常见问题汇总
H5手机端常见问题汇总
|
移动开发
手机h5页面唤起打电话、发短信功能
手机h5页面唤起打电话、发短信功能
|
移动开发
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
关于Uniapp开发h5怎么直接在手机上看到效果,不需要模拟器和发布。
396 0
下一篇
无影云桌面