请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

html5中文学习网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: webgl框架
查看: 2385|回复: 9

HTML5开发:地理位置定位指南

[复制链接]

51

主题

0

好友

569

积分

高级会员

Rank: 4

  • TA的每日心情

    2013-6-12 21:02
  • 签到天数: 10 天

    [LV.3]偶尔看看II

    发表于 2013-2-8 23:18:57 |显示全部楼层
    地理定位HTML5提供的最令人激动的特性之一。
    用相对简单的JavaScript代码,可以创建出能确定用户地理位置详细信息的Web应用,包括经纬度以及海拔等。一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了GoogleMaps API这样的地图系统。
    和所有HTML5的功能一样,你还不能依赖浏览器提供支持。而在浏览器提供支持的地方,它在深度和持续性上会有变化。本质上,你需要为那些浏览器不能为HTML5提供完全支持的用户提供替代功能。
    在这篇教程里,我们会了解一些创建用户位置信息的基本知识。实际操作中,浏览器可能从多处获取数据。例如,可能是移动设备的GPS数据或是任意联网设备上的IP地址数据。不过,你的代码不需要考虑这些细节,你只需检索和使用位置数据。
    HTML5Web 页面
    使用下列代码创建HTML5页面的框架:


      <!DOCTYPEhtml>
    • <html>
      <head>
    • <script>
      /*Locationfunctionshere*/
    • </script>
      </head>
    • <body>
      </body>
    • </html>
    我们将JavaScript地理定位函数放到页面标头脚本的位置,还会放置一些用于测试和演示主题区功能的基本HTML要素。
    HTML演示要素
    向HTML主体部分添加下列markup:


      <input type=”button”value=”get location” onclick=”getUserLocation()”/>
    • <div id=”locationData”>
      Location data here
    • </div>
    可以随时调用地理位置函数,如页面加载时或是与jQuery文档准备函数合在一起时。为了更好地进行演示,我们使用按钮调用函数而且会把位置数据写入div要素中,div要素最初就有一些简单的占位符文本。
    获取位置函数
    getPosition方法是我们用来确定用户位置的主要方法。在页面标头的脚本区域添加下列函数:


      functiongetUserLocation(){
    • //checkifthegeolocationobjectissupported,ifsogetposition
      if(navigator.geolocation)
    • navigator.geolocation.getCurrentPosition(displayLocation,displayError);
      else
    • document.getElementById(“locationData”).innerHTML=”Sorry-yourbrowserdoesn’tsupportgeolocation!”;
    • }
    用户点击按钮的时候就会调用函数。代码首先会检查导航器地理位置对象是否显示出来,如果显示出来则浏览器支持。如果地理位置对象被支持,那么代码会使用它来调用getCurrentPosition方法。
    getCurrerentPosition方法取两个参数指示回调函数。,一个是在地理位置信息被获取时调用的函数,还有一个是错误返回时调用的函数。
    如果地理位置对象不被支持,那么函数就只会把错误信息写入页面div要素中。
    当一个网站首次试图检索用户位置数据时,用户浏览器会命令其确定它们是否同意共享数据。该函数只在用户同意的时候执行。
    显示位置函数
    下一步,我们需要部署的函数其实是getCurrentPosition方法调用中的第一个参数。当浏览器接收到这个函数的时候,用户位置数据会传给这个函数。将下列代码添加到getUserLocation函数后面:


      functiondisplayLocation(position){
    • /buildtextstringincludingco-ordinatedatapassedinparameter
      vardisplayText=”Userlatitudeis”+position.coords.latitude+”andlongitudeis”+position.coords.longitude;
    • //displaythestringfordemonstration
      document.getElementById(“locationData”).innerHTML=displayText;
    • }
    这个代码先创建了一个变量,在变量中创建了一个字符串,该字符串包含了位置参数的经纬度数据。然后这个函数会把这个信息和一些信息化文本写入页面。在你自己的网站中,你还可以把这些数据用作其他目的,而不仅仅是写入页面——此处仅作演示用。
    错误函数
    使用地理位置设备的时候可能会出现错误。如,用户或许不同意共享自己的地理位置数据,浏览器可能不能检索数据等。因此我们需要添加一个函数来处理应对错误,使用getCurrentPosition方法的第二个函数。在displayLocation函数后添加下列函数:


      function displayError(error) {
    • //get a reference to the HTML element forwriting result
      var locationElement =document.getElementById(“locationData”);
    • //find out which error we have, outputmessage accordingly
      switch(error.code) {
    • case error.PERMISSION_DENIED:
      locationElement.innerHTML= “Permission was denied”;
    • break;
      case error.POSITION_UNAVAILABLE:
    • locationElement.innerHTML= “Location data not available”;
      break;
    • case error.TIMEOUT:
      locationElement.innerHTML= “Location request timeout”;
    • break;
      case error.UNKNOWN_ERROR:
    • locationElement.innerHTML= “An unspecified error occurred”;
      break;
    • default:
      locationElement.innerHTML= “Who knows what happened…”;
    • break;
    • }}
    这个函数会地理位置请求发出后出现的错误信息进行检索。该函数首先会获取页面div要素的参考以便写入合适的错误信息。用交换语句对此信息进行调整使其适应错误的特殊属性。
    考虑和选择
    以上函数涵盖了用户位置数据检索的基本要点。你可以使用检索过的位置数据通过Google Maps API在地图上显示用户位置,主要是在自定义URL中创建数据变量,然后将其加载到你页面的HTML图像要素中。
    你还可以使用watchPosition方法追踪用户位置甚至是他们移动的速度,尽管这些数据因为并非来自移动设备的GPS而缺乏准确性,例如数据可能来自无线网络。
    这些函数会为Web开发员带来美好的未来。不过,它们的成功不仅需要浏览器提供支持,还得用户喜欢,硬件支持。
    回复

    使用道具 举报

    无效楼层,该帖已经被删除
    无效楼层,该帖已经被删除
    无效楼层,该帖已经被删除
    5#
    无效楼层,该帖已经被删除
    6#
    无效楼层,该帖已经被删除
    7#
    无效楼层,该帖已经被删除
    8#
    无效楼层,该帖已经被删除
    9#
    无效楼层,该帖已经被删除
    10#
    无效楼层,该帖已经被删除
    您需要登录后才可以回帖 登录 | 立即注册

    Archiver|手机版|HTML5中文学习网-HTML5先行者论坛 ( 冀ICP备13001593号  

    GMT+8, 2017-4-29 05:58 , Processed in 0.548512 second(s), 28 queries .

    Powered by Discuz! X2.5

    © 2001-2012 Comsenz Inc.

    回顶部