HTML5 地理位置定位(HTML5 Geolocation)
admin
2023-02-10 20:00:10
0

   HTML5的强大,无需我过多的介绍,其中Geolocation地理定位是HTML5的重要特性之一。使用这个特性我们就可以开发出基于地理位置信息的应用。例如你要实现查询用户周边酒店、加油站等功能时,你可以调用百度地图、高德地图、google地图等接口,然后根据用户的具体地理坐标位置等信息来搜寻周边事物。

   当然,每个人的地理位置信息是属于他个人的隐私。所以一般游览器都会先询问用户是否愿意,如果用户拒绝的话,则用户位置信息是不可用的。

   废话不多说,直接上代码:

   以上是没有报错信息处理的代码。如果未能显示出纬度(Latitude)、经度(Longitude)信息的话,那你就得检查下游览器是否支持地理定位。

(1)如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。

(2)如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象。showPosition() 函数则是获得并显示经度和纬度。


   当然我们也可以有处理错误的功能反馈给用户:

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED://用户不允许地理定位
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE://无法获取当前位置
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT://操作超时
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR://未知错误
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

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

navigator.geolocation.getCurrentPosition(showPosition,showError);

 

   嗯,这样你就可以获得了用户的地理位置坐标信息。其实最重要的无非就是上面的那行代码,和获取坐标的两个方法:

position.coords.latitude//纬度
position.coords.longitude//经度


   就酱紫了?不,它还能获得些呢,客观别急,接着往下看。

   getCurrentPosition()--返回数据:

属性
描述
coords.latitude
十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔,海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向,从正北开始以度计
coords.speed速度,以米/每秒计
timestamp响应的日期/时间

   

   嗯~是不是有点屌?但是你有没发现,这种定位并不是实时的。如果用户使用的是移动端,并且他在移动中,那坐标也必须跟随着在不停的改变中,而之前获得的坐标还有毛用啊!呵呵,莫慌!屌炸天的Geolocation对象,有个牛逼的方法:

   watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置。

   clearWatch() - 停止 watchPosition() 方法。

   如果你有台爱疯(iphone)之类精确的GPS设备,那就更是如虎添翼了。

   可以用手机或ipad去测试下,看看是否能实时定位。

相关内容

热门资讯

国务院成立广西六蓝水库溃坝灾害... 7月6日,广西南宁横州市六蓝水库发生溃坝,造成重大人员伤亡。根据国家有关法律法规规定,国务院成立调查...
倚美搞事,菲律宾政府连“为奴”... 南海的风浪,很大一部分是菲律宾政府自己搅起来的。近年来,菲政府在仁爱礁、黄岩岛等地小动作频频,不仅频...
雨花台区企业摘得国家科学技术进... 晨报讯(南京晨报/爱南京记者 陈彦)记者从南京市雨花台区获悉,在新近揭晓的2025年度国家科学技术奖...
美国公布新关税措施,日本、澳大... 据法新社、澳大利亚广播公司(ABC)报道,针对美国将于美东时间24日以所谓“强迫劳动”为名对数十个国...
济南大数据集团激活数据要素潜能... 走进“泉数汇·数港”线下体验空间,健康画像、求职背调、“泉涌”工作站等数据产品一字排开,来访者可以像...
太保寿险河南分公司举办员工家庭... 5月22日,中国太保寿险河南分公司在郑州举办绩优干部员工家庭开放日活动,邀请员工家属走进企业,参观办...
“展现了推动人工智能普惠向善发... 7月17日至20日,2026世界人工智能大会暨人工智能全球治理高级别会议在上海举行,习近平主席出席开...
多地官宣结婚生娃发钱,最高20... 近日,广东佛山顺德陈村镇大都村通过股东会议表决,将生育结婚奖励政策纳入《佛山市顺德区陈村镇大都村股份...
蒋万安、卢秀燕、谢国梁开记者会... 海峡导报综合报道 民进党当局核准台湾“中联”19批油品即日起重新上架,台“食药署”23日首度公布共计...
西门子洗衣机不工作了什么原因 西门子洗衣机不工作了什么原因1、可能是使用时间太久了,导致洗衣机内部零件出现了问题。2、可能是长时间...