PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML5+CSS3教程 > 正文

    h5 geolocation地理定位

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:h5 geolocation地理定位


    1. if (navigator.geolocation) {   
    2.     navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{   
    3.         // 指示浏览器获取高精度的位置,默认为false   
    4.         enableHighAcuracy: true,   
    5.         // 指定获取地理位置的超时时间,默认不限时,单位为毫秒   
    6.         timeout: 5000,   
    7.         // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。   
    8.         maximumAge: 3000   
    9.     });   
    10. }else{   
    11.     alert("Your browser does not support Geolocation!");   
    12. }  
    13. locationError: function(error){   
    14.     switch(error.code) {   
    15.         case error.TIMEOUT:   
    16.             showError("A timeout occured! Please try again!");   
    17.             break;   
    18.         case error.POSITION_UNAVAILABLE:   
    19.             showError('We can\'t detect your location. Sorry!');   
    20.             break;   
    21.         case error.PERMISSION_DENIED:   
    22.             showError('Please allow geolocation access for this to work.');   
    23.             break;   
    24.         case error.UNKNOWN_ERROR:   
    25.             showError('An unknown error occured!');   
    26.             break;   
    27.     }   
    28.     locationSuccess: function(position){   
    29.     var coords = position.coords;        
    30.     var latlng = new google.maps.LatLng(   
    31.         // 维度   
    32.         coords.latitude,   
    33.         // 精度   
    34.         coords.longitude   
    35.     );      
    36.     var myOptions = {      
    37.         // 地图放大倍数      
    38.         zoom: 12,      
    39.         // 地图中心设为指定坐标点      
    40.         center: latlng,      
    41.         // 地图类型      
    42.         mapTypeId: google.maps.MapTypeId.ROADMAP      
    43.     };      
    44.     // 创建地图并输出到页面      
    45.     var myMap = new google.maps.Map(      
    46.         document.getElementById("map"),myOptions      
    47.     );      
    48.     // 创建标记      
    49.     var marker = new google.maps.Marker({      
    50.         // 标注指定的经纬度坐标点      
    51.         position: latlng,      
    52.         // 指定用于标注的地图      
    53.         map: myMap   
    54.     });   
    55.     //创建标注窗口      
    56.     var infowindow = new google.maps.InfoWindow({      
    57.         content:"您在这里<br/>纬度:"+      
    58.             coords.latitude+      
    59.             "<br/>经度:"+coords.longitude      
    60.     });      
    61.     //打开标注窗口      
    62.     infowindow.open(myMap,marker);     
    63. }  
    64. }  


     

    1. //判断浏览器是否支持geolocation   
    2. if(navigator.geolocation){   
    3.      // getCurrentPosition支持三个参数   
    4.      // getSuccess是执行成功的回调函数   
    5.      // getError是失败的回调函数   
    6.      // getOptions是一个对象,用于设置getCurrentPosition的参数   
    7.      // 后两个不是必要参数   
    8.      var getOptions = {   
    9.           //是否使用高精度设备,如GPS。默认是true   
    10.           enableHighAccuracy:true,   
    11.           //超时时间,单位毫秒,默认为0   
    12.           timeout:5000,   
    13.           //使用设置时间内的缓存数据,单位毫秒   
    14.           //默认为0,即始终请求新数据   
    15.           //如设为Infinity,则始终使用缓存数据   
    16.           maximumAge:0   
    17.      };   
    18.     
    19.      //成功回调   
    20.      function getSuccess(position){   
    21.           // getCurrentPosition执行成功后,会把getSuccess传一个position对象   
    22.           // position有两个属性,coords和timeStamp   
    23.           // timeStamp表示地理数据创建的时间??????   
    24.           // coords是一个对象,包含了地理位置数据   
    25.           console.log(position.timeStamp);      
    26.     
    27.           // 估算的纬度   
    28.           console.log(position.coords.latitude);       
    29.           // 估算的经度   
    30.           console.log(position.coords.longitude);       
    31.           // 估算的高度 (以米为单位的海拔值)   
    32.           console.log(position.coords.altitude);       
    33.           // 所得经度和纬度的估算精度,以米为单位   
    34.           console.log(position.coords.accuracy);       
    35.           // 所得高度的估算精度,以米为单位   
    36.           console.log(position.coords.altitudeAccuracy);       
    37.           // 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算   
    38.           console.log(position.coords.heading);   
    39.           // 设备的当前对地速度,以米/秒为单位       
    40.           console.log(position.coords.speed);       
    41.           // 除上述结果外,Firefox还提供了另外一个属性address   
    42.           if(position.address){   
    43.                //通过address,可以获得国家、省份、城市   
    44.                console.log(position.address.country);   
    45.                console.log(position.address.province);   
    46.                console.log(position.address.city);   
    47.           }   
    48.      }   
    49.      //失败回调   
    50.      function getError(error){   
    51.           // 执行失败的回调函数,会接受一个error对象作为参数   
    52.           // error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE   
    53.           // 执行失败时,code属性会指向三个常量中的一个,从而指明错误原因   
    54.           switch(error.code){   
    55.                case error.TIMEOUT:   
    56.                     console.log('超时');   
    57.                     break;   
    58.                case error.PERMISSION_DENIED:   
    59.                     console.log('用户拒绝提供地理位置');   
    60.                     break;   
    61.                case error.POSITION_UNAVAILABLE:   
    62.                     console.log('地理位置不可用');   
    63.                     break;   
    64.                default:   
    65.                     break;   
    66.           }   
    67.      }   
    68.    
    69.      navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);   
    70.      // watchPosition方法一样可以设置三个参数   
    71.      // 使用方法和getCurrentPosition方法一致,只是执行效果不同。   
    72.      // getCurrentPosition只执行一次   
    73.      // watchPosition只要设备位置发生变化,就会执行   
    74.      var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);   
    75.      //clearwatch用于终止watchPosition方法   
    76.      navigator.geolocation.clearWatch(watcher_id);            
    77. }   

    腾讯新浪通过IP地址获取当前地理位置(省份)的接口
    参考资料:
    http://blog.sina.com.cn/s/blog_3eba8f1c0101djqe.html
    h5地理定位
    h5地理定位

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-142-4892-1.html
    相关热词搜索: geolocation 地理定位