HTML5地理定位

分享于 

22分钟阅读

Web开发

  繁體 雙語

你在地球上的位置?

我们每个人都在地球上占据一个位置。 这里位置是由纬度。经度和高度的地理坐标系指定的。 随着位置感知硬件和软件的日益普及,在地球上寻找一个位置的位置从来没有那么容易。 有许多技术可以用来识别用户的位置。 一个计算机浏览器通常使用无线或者基于IP的定位技术,而移动浏览器可以基于 relative。GPS。 现在,位置感知是一种不断增长的趋势,它可以找到许多应用程序的方式,如:

  • 在地图上显示一个位置,尤其当你在一个不熟悉的地方时。
  • 在不熟悉的旅途中提供turn-by-turn导航。
  • 找出附近的兴趣点。
  • 获得最新的天气或者新闻。
  • 标记图片的位置。
  • 一组运输卡车的位置跟踪。

借助HTML5地理定位 API,你现在可以使用浏览器在地球上查找自己的位置,比如 Firefox。 就像一块 Cake 一样简单。 ,让你的手 dirty。

设置舞台

使用文本编辑器在清单 1中键入以下代码,将它的保存为" finding_me.html",并在浏览器上启动它。


<!doctype html>


<html>


<head>


<meta charset="utf-8">


<title>Finding Me</title>


<script>


function getLocation()


{


 // Check whether browser supports Geolocation API or not


 if (navigator.geolocation) { // Supported


 navigator.geolocation.getCurrentPosition(getPosition);


 } else { // Not supported


 alert("Oop! This browser does not support HTML5 Geolocation.");


 }


}


function getPosition(position)


{


 document.getElementById("location").innerHTML = 


 "Latitude:" + position.coords.latitude + "<br>" +


 "Longitude:" + position.coords.longitude;


}


</script>


</head>


<body>


 <h1>Finding Me</h1>


 <button onclick="getLocation()">Where am I?</button>


 <p id="location"></p>


</body>


</html>



你应该看到一个网页,如图 1所示。 请注意,这里代码将在 Firefox 和 IE 上工作,但不会在 Google Chrome 上运行。 如果你在像Apache这样的web服务器上部署了地理定位 API,那么它不允许从内置的file://URI 运行地理定位。

图 1: 浏览器上的finding_me.html

单击"我在哪里"按钮,你看到了什么?

图 2: 查找共享位置的权限

图 2: 查找共享位置的权限

图 3: 找到了你

图 3: 找到了你 !

瞧,你的位置显示在屏幕上,如图 3所示。 那不是一段代码,我是说 Cake。

你希望你能在地图上显示这些位置读数,以便你可以视觉地看到你的位置。 如果你读到的话你希望能来 true。"。

HTML5地理定位API只有一个对象- 的导航器。 你可能会把 navigator.geolocation 比作浏览器上的一个的指南针。 当你在使用浏览器支持时,在继续使用你的代码之前,检查浏览器支持是一个的实际做法,如下面的模板将你的代码打包:


// Check whether browser supports Geolocation API or not


if (navigator.geolocation) // Supported


{


 // place the geolocation code here


}


else // Not supported


{


 alert("Oop! This browser does not support HTML5 Geolocation.");


}



getCurrentPosition ( )

getCurrentPosition() 方法用于获取用户的当前位置。





navigator.geolocation.getCurrentPosition(getPosition);



回想在图 3中,弹出一个对话框,寻找你与网页共享位置的权限。 当 getCurrentPosition() 方法被调用时就会这样。 用户选择选择以便允许方法继续检索当前位置。 换句话说,你的隐私很受尊敬和 protected。

  • 第一个参数是调用 getCurrentPosition() 方法的调用时调用的回调函数。 回调函数将用从 getCurrentPosition() 方法传递的位对象调用。 这里位置对象由 2个属性组成: 坐标时间戳。 ,的回调函数为"getposition ( 位置),它采用对象参数a 输出 latitude,通过该参数的坐标coords属性输出 latitude and。
    
    
    
    
    function getPosition(position)
    
    
    {
    
    
     document.getElementById("location").innerHTML =
    
    
     "Latitude:" + position.coords.latitude + "<br>" +
    
    
     "Longitude:" + position.coords.longitude; 
    
    
    }
    
    
    
    

    table 1显示位置对象的属性。

    table 1: 位置对象 属性描述
    coords.latitudecoords.latitude 属性返回用户位置的当前经度( 以十进制为单位)。
    coords.longitudecoords.longitude 属性返回十进制度的用户位置的经度。
    coords.altitudecoords.altitude 属性返回用户位置的高度( 以米为单位),以sea为单位。 如果这里信息不可用,它将返回 null。
    coords.accuracycoords.accuracy 属性返回纬度和经度坐标的精度级别,单位为米。
    coords.altitudeAccuracycoords.altitudeAccuracy 属性返回高度的精度级别( 以米计)。
    coords.heading如果这里信息不可用,它将返回 null。
    coords.speedcoords.speed 属性将位置感知设备的速度返回到每秒米。 如果这里信息不可用,它将返回 null。
    时间戳timestamp属性返回获取位置对象的时间。
  • 第二个参数是在调用 getCurrentPosition() 方法时遇到以下任何一种情况时调用的可选错误处理回调函数:
    • 请求已超时
    • 位置信息不可用
    • 用户拒绝共享位置信息的权限

    这里位置错误对象由一个属性- 代码组成。

    table 2: 位置错误代码 属性描述
    超时位置信息请求超出了在位置选项对象( 稍后讨论) 中设置的超时属性。
    POSITION_UNAVAILABLE无法确定位置感知设备的位置。
    PERMISSION_DENIED用户拒绝共享位置信息的权限。
    
    function catchError(error) {
    
    
     switch(error.code)
    
    
     {
    
    
     case error.TIMEOUT:
    
    
     alert("The request to get user location has aborted as it has taken too long.");
    
    
     break;
    
    
     case error.POSITION_UNAVAILABLE:
    
    
     alert("Location information is not available.");
    
    
     break;
    
    
     case error.PERMISSION_DENIED:
    
    
     alert("Permission to share location information has been denied!");
    
    
     break;
    
    
     default:
    
    
     alert("An unknown error occurred.");
    
    
     }
    
    
    }
    
    
    
    
    图 4: catchError() 函数

    图 4: catchError() 函数

    接下来,将下面的函数作为第二个参数附加到 getCurrentPosition() 方法中,如下所示:

    
    
    
    
    navigator.geolocation.getCurrentPosition(getPosition, catchError);
    
    
    
    

    将这里文件保存在浏览器( Firefox ) 上,拔出网络电缆( 或者关闭无线 switch ) 以模拟"无网络连接"情况,授予共享位置信息( 图 2 )的许可,然后单击"我在哪里"按钮。 你 看到 些 什么?

    图 4: 模拟错误情况

    图 5: 模拟错误情况

    你应该会看到一个消息框弹出"位置信息不可用。",如图 5所示。 原因显然是由于网络电缆被拔出。 由于无法获得任何位置信息,方法被方法调用,因为它是断开的网络连接。 ( 你可能会恢复到计算机的网络连接。) 尽管这里错误处理参数是可选的。 这是允许程序优雅地失败以及让用户通知任何运行时错误的最佳实践之一。

  • 第三个参数是可选的位置选项对象,可以用于以编程方式微调 getCurrentPosition() 方法返回的位置对象。 table 3: 位置选项对象属性 属性描述
    超时timeout属性表示应用程序等待位置信息可用的毫秒数。 默认值为无穷大。
    maximumAgemaximumAge属性表示应用程序在尝试获取新位置数据之前可以持续使用缓存的( 以前获得的) 位置数据的毫秒数。 零值指示应用程序不能使用缓存位置数据,而无穷大值指示应用程序必须使用缓存的位置数据。 默认值为零。
    enableHighAccuracyenableHighAccuracy属性表示 true 或者 false的条件。 如果是 true,应用程序将尝试提供最准确的位置。 然而,这将导致响应时间和更高的功耗。 默认值为 FALSE.

    你将定义一个名为"positionoptions"的位置选项对象,并将它作为第三个参数添加到 getCurrentPosition() 方法中,如图 6所示:

    
    var positionOptions = {
    
    
     timeout : Infinity,
    
    
     maximumAge : 0,
    
    
     enableHighAccuracy : true
    
    
    };
    
    
    navigator.geolocation.getCurrentPosition(getPosition, catchError, positionOptions);
    
    
    
    
    。图 5: 位置选项对象

    图 6: 位置选项对象

    在设计位置知识应用程序时,应根据应用程序的enableHighAccuracy和maximumAge属性选择最适合应用程序的。 例如,如果你的应用程序主要是在附近找到 兴趣点,你可以能不需要高精度和位置信息。 另一方面,如果你的应用程序为驱动程序提供转换 direction,则需要高精度和恒定的位置更新。

getCurrentPosition() 方法最适合获取一个位置信息。 但是,对于查找不断变化的位置信息,比如我提到过的转向导航,你必须反复调用方法,这显然非常麻烦且低效。 烦恼HTML5 Geolocation API提供了另一种处理这种情况的方法- watchPosition()

watchPosition ( )

watchPosition() 方法几乎与 getCurrentPosition() 方法相同。 它们都返回当前位置信息并具有相同的方法签名- 一个成功回调函数,一个错误回调函数。 只有在 getCurrentPosition() 方法激活时,方法才返回位置信息一次,例如按钮单击,而 watchPosition() 方法在初始激活后的用户的位置上按获取位置信息。

clearWatch ( )

clearWatch() 方法采用 watchPosition() 方法的监视ID作为参数并停止该 watchPosition() 方法的执行。

位置跟踪

如果你熟悉 watchPosition() 方法,那么你可以很容易地创建方法,这主要是一个问题,相信你还是不知道,"复制并粘贴"方法很容易。

在文本编辑器中打开" finding_me.html",将它的保存为" watching_me.html"。 然后在" watching_me.html"中

  • 将"地理位置。getCurrentPosition ( getPosition,catchError,positionOptions ) ) 改为navigator导航。 watchPosition ( getPosition,catchError,positionOptions )"。
  • 将从 watchPosition() 方法返回的监视ID存储到变量 watchID。
    
    
    
    
    watchID = navigator.geolocation.watchPosition(getPosition, catchError, positionOptions);
    
    
    
    

但是,为了在某时刻停止监视和更新,你将添加另外一段代码和一个按钮来停用它。 创建包含 <方法的watchID方法的脚本> 节,通过传递 watchPosition() 方法的,调用 clearWatch() 方法:





function stopWatch() 


{


 navigator.geolocation.clearWatch(watchID);


}



最后,将" watching_me.html"的<正文> 中的HTML代码替换为:


<body>


<h1>Watching Me</h1>


<button onclick="getLocation()">Start Watching</button>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<button onclick="stopWatch()">Stop Watching</button>


<p id="location"></p>


</body>




<!DOCTYPE html>


<html>


<head>


<title>Watching Me</title>


<script>


function getLocation()


{


 // Check whether browser supports Geolocation API or not


 if (navigator.geolocation) // Supported


 {


 var positionOptions = {


 timeout : Infinity,


 maximumAge : 0,


 enableHighAccuracy : true


 };


 // Set the watchID


 watchID = navigator.geolocation.watchPosition(getPosition, catchError, positionOptions);


 }


 else // Not supported


 {


 alert("Oop! This browser does not support HTML5 Geolocation.");


 }


}


function stopWatch() 


{


 navigator.geolocation.clearWatch(watchID);


 watchID = null;


}


function getPosition(position)


{


 document.getElementById("location").innerHTML =


 "Latitude:" + position.coords.latitude + "<br>" +


 "Longitude:" + position.coords.longitude; 


}


function catchError(error) {


 switch(error.code) 


 {


 case error.TIMEOUT:


 alert("The request to get user location has aborted as it has taken too long.");


 break;


 case error.POSITION_UNAVAILABLE:


 alert("Location information is not available.");


 break;


 case error.PERMISSION_DENIED:


 alert("Permission to share location information has been denied!");


 break; 


 default:


 alert("An unknown error occurred.");


 }


}


</script>


</head>


<body>


<h1>Watching Me</h1>


<button onclick="getLocation()">Start Watching</button>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<button onclick="stopWatch()">Stop Watching</button>


<p id="location"></p>


</body>


</html>



通过WIFI连接笔记本电脑( Firefox ) 浏览器保存并启动" watching_me.html",单击"开始观察"按钮,授权共享位置,然后用笔记本电脑移动。 你 看到 些 什么?

。图 6: 你被监视

图 7: 你被监视 !

你应该看到你的位置在浏览器上按规则的间隔更新,如图 7中的示例所示。

地图上的位置跟踪

让我们把表放在图中,如图 8中的示例所示。

图 7: 你在地图上

图 8: 你Google地图上 !

清单 3显示了代码。 文件称为" watching_on_map.html",可以供下载。


<!DOCTYPE html>


<html>


<head>


<title>Watching on Map</title>


<style>


html,body {


 height: 100%;


 margin: 0;


 padding: 0;


}


#map-holder {


 height: 350px;


 width: 500px;


}


</style>


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


<script>


var watchID; 


function getLocation()


{


 // Check whether browser supports Geolocation API or not


 if (navigator.geolocation) // Supported


 {


 var positionOptions = {


 timeout : Infinity,


 maximumAge : 0,


 enableHighAccuracy : true,


 };


 // Obtain the initial location one-off


 navigator.geolocation.getCurrentPosition(getPosition, catchError, positionOptions);


 }


 else // Not supported


 {


 alert("Oop! This browser does not support HTML5 Geolocation.");


 }


} 


function watchLocation()


{


 // Check whether browser supports Geolocation API or not


 if (navigator.geolocation) // Supported


 {


 var positionOptions = {


 timeout : Infinity,


 maximumAge : 0,


 enableHighAccuracy : true,


 };


 // Obtain the location at regularly interval


 watchID = navigator.geolocation.watchPosition(getPosition, catchError, positionOptions);


 }


 else // Not supported


 {


 alert("Oop! This browser does not support HTML5 Geolocation.");


 }


}


function stopWatch() 


{


 // Discontinue obtaining location


 navigator.geolocation.clearWatch(watchID);


}


function getPosition(position)


{


 var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);


 var mapOptions = {


 zoom : 12,


 center : location,


 mapTypeId : google.maps.MapTypeId.ROADMAP


 };


 var map = new google.maps.Map(document.getElementById('map-holder'), mapOptions);


 var marker = new google.maps.Marker({


 position: location,


 title: 'Here I am!',


 map: map,


 animation: google.maps.Animation.DROP


 });


 var geocoder = new google.maps.Geocoder();


 geocoder.geocode({


 'latLng' : location


 }, function(results, status) {


 if (status == google.maps.GeocoderStatus.OK) {


 if (results[1]) {


 var options = {


 content : results[1].formatted_address,


 position : location


 };


 var popup = new google.maps.InfoWindow(options);


 google.maps.event.addListener(marker, 'click', function() {


 popup.open(map);


 });


 } 


 else 


 {


 alert('No results found');


 }


 } 


 else 


 {


 alert('Geocoder failed due to: ' + status);


 }


 });


}


function catchError(error) {


 switch(error.code) 


 {


 case error.TIMEOUT:


 alert("The request to get user location has aborted as it has taken too long.");


 break;


 case error.POSITION_UNAVAILABLE:


 alert("Location information is not available.");


 break;


 case error.PERMISSION_DENIED:


 alert("Permission to share location information has been denied!");


 break; 


 default:


 alert("An unknown error occurred.");


 }


}


</script>


</head>


<body onload="getLocation()">


<div id="map-holder"></div>


<button onclick="watchLocation()">Start Watching</button>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<button onclick="stopWatch()">Stop Watching</button>


</body>


</html>



代码的逻辑如下所示:

  • 当首次加载页面时,将触发 onload 事件并调用 getLocation() 函数,从而调用 navigator.geolocation 对象的getCurrentPosition() 方法。
  • 如果 getCurrentPosition() 方法成功,它将触发回调 function getPosition() 将它的传递给位置对象。
  • getPosition() 函数所做的是呈现一个集中于用户显示为 marker的位置的Google地图。
  • 单击"开始观察"按钮将调用 watchLocation() 函数,后者又调用 navigator.geolocation 对象的watchPosition() 方法以获取用户位置的当前时间间隔。
  • 如果 watchPosition() 方法成功,它将触发回调 function getPosition() 将它的传递给位置对象。
  • getPosition() 函数所做的工作已经描述了 上面。
  • 点击"停止观看"按钮将停止观看活动。

如果你在保持网页打开时使用WIFI连接的笔记本电脑,你应该在移动时定期更新你的位置。 尽情玩耍吧!

下载

在leow博客的 Peter代码上首次出现了 post Geolocation Geolocation。


相关文章