HTML5新特性之一:Geolocation(一)

  首先要了解地理位置(Geolocation)的表示方法有两种:

  • 度数表示法(degrees/minutes/seconds)例如(47°38'34'',122°32'32'')
  • 小数(decimal value)表示法 例如(47.64,-122.54)

  两种方法都是表示纬度(latitude)和经度(longitude)的,在Geolocation API中通常使用第二种方法,可以用一个函数进行转换。

funtion degreesToDecimal(degree,minutes,seconds){
    return degrees+(minutes/60.0)+(seconds/3600.0);
}

 

 

  1.  调用Geolocation API显示出经纬度

    在HTML中定义了<div>元素

 

<div id="location">
 <!-- 之后这里会被代替为你的地理位置 --> 
Your location will go here.    
</div>

 

     接下来写我们的javascript代码来调用Geolocation API

window.onload = getMyLocation; 
/* 
    window.onload表示等HTML加载完成并构建好DOM后执行某个函数
*/
function getMyLocation(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation);
}
    else {
        alert("Oops,no geolocation support")
}

  geolocation的方法:

  • void navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)   
  • long navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)      
  • void navigator.geolocation.clearWatch(watch_position_id)  

  position_options为带有3个参数的JSON形式的字符串

  enableHighAccuracy:boolean值(true|false),指示设备,你需要获得它的最精确的读数,硬件不同此参数可能会有些差别。

  maximumAge:最大的生命周期,以毫秒为单位;这么做是恰如其分的,因为设备可能会缓存数据,以便节省电源和带宽。

  timeout:获取地理位置请求最大的等待时间,单位毫秒。

 

  success_callback_function(回调函数) 接收一个 position 对象作为参数,该对象有以下属性:

  coords.latitude – 当前的纬度
  coords.longitude – 当前的经度
  coords.accuracy – 当前经纬度的精准度(米)
  coords.speed – 当前每秒的行进速度 (可以乘以2.2369转换到 英里/小时 或乘以3.6转换到 公里/小时 )
  coords.altitude – 当前的海拔(米)
  coords.altitudeAccuracy – 当前海拔的精准度(米)

function displayLocation(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var div = document.getElementById("location");
    div.innerHTML = "You are at Latitude: "+latitude+", Longitude: "+longitude;
}

  2.处理错误和拒绝

  getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

   如果要加入错误处理,需要对前一段代码进行改动

navigator.geolocation.getCurrentPosition(displayLocation,displayError)
function display(error)
  {
 var div = document.getElementById("Location")
switch(error.code) { case error.PERMISSION_DENIED: div.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: div.innerHTML="Location information is unavailable." break; case error.TIMEOUT: div.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: div.innerHTML="An unknown error occurred." break; } }

  3. 计算两个位置之间的距离

  通过computeDistance函数进行计算,并返回一个int型的值。

function computeDistance(startCoords, destCoords) {
    var startLatRads = degreesToRadians(startCoords.latitude);
    var startLongRads = degreesToRadians(startCoords.longitude);
    var destLatRads = degreesToRadians(destCoords.latitude);
    var destLongRads = degreesToRadians(destCoords.longitude);

    var Radius = 6371; // radius of the Earth in km
    var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
                    Math.cos(startLatRads) * Math.cos(destLatRads) *
                    Math.cos(startLongRads - destLongRads)) * Radius;

    return distance;
}

function degreesToRadians(degrees) {
    radians = (degrees * Math.PI)/180;
    return radians;
}

 

    

 

转载于:https://www.cnblogs.com/tylee322/archive/2013/02/02/2890198.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值