NAXS网

首页 > 网络 > HTML / 正文
关注公众号:三筒读书。每日分享好书

HTML5 Geolocation(地理定位)

admin 2020-01-24 HTML 评论
关注公众号:三筒读书。每日分享好书

html5 Geolocation(地理定位)用于定位用户的位置。


定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。


浏览器支持

Internet Explorer

Firefox

Opera

Google Chrome

Safari

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).

注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。


HTML5 - 使用地理定位

请使用 getcurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:

实例

var x=document.getElementById("demo");function getLocation(){    if (navigator.geolocation)    {        navigator.geolocation.getCurrentPosition(showPosition);    }    else    {        x.innerHTML="该浏览器不支持获取地理位置。";    }} function showPosition(position){    x.innerHTML="纬度: " + position.coords.latitude +     "
经度: " + position.coords.longitude;    }


尝试一下  »

实例解析:

  • 检测是否支持地理定位

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

  • 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

  • showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本,不含错误处理。


处理错误和拒绝

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

实例

function showError(error){    switch(error.code)     {        case error.PERMISSION_DENIED:            x.innerHTML="用户拒绝对获取地理位置的请求。"            break;        case error.POSITION_UNAVAILABLE:            x.innerHTML="位置信息是不可用的。"            break;        case error.TIMEOUT:            x.innerHTML="请求用户地理位置超时。"            break;        case error.UNKNOWN_ERROR:            x.innerHTML="未知错误。"            break;    }}


尝试一下  »

错误代码:

  • Permission denied - 用户不允许地理定位

  • Position unavailable - 无法获取当前位置

  • Timeout - 操作超时


在地图中显示结果

如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:

实例

function showPosition(position){    var latlon=position.coords.latitude+","+position.coords.longitude;     var img_url="http://maps.googleapis.com/maps/api/staticmap?center="    +latlon+"&zoom=14&size=400x300&sensor=false";    document.getElementById("mapholder").innerHTML="

";}


尝试一下  »

在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。

Google地图脚本
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。


给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。

实例:

  • 更新本地信息

  • 显示用户周围的兴趣点

  • 交互式车载导航系统 (GPS)


getCurrentPosition() 方法 - 返回数据

T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。

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

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):

实例

var x=document.getElementById("demo");function getLocation(){    if (navigator.geolocation)    {        navigator.geolocation.watchPosition(showPosition);    }    else    {        x.innerHTML="该浏览器不支持获取地理位置。";    }}function showPosition(position){    x.innerHTML="纬度: " + position.coords.latitude +     "
经度: " + position.coords.longitude; }


尝试一下  »

推荐您阅读更多有关于“HTML”的文章

关注公众号:三筒读书。每日分享好书

  • 百度全国新型冠状病毒肺炎疫情实时图HTML源码 小知识

    百度全国新型冠状病毒肺炎疫情实时

    最新看到很多人发布百度疫情实时图 html源码 那个根本不需要发布,也不存在含金量的...

    23432823 2020-02-04
  • HTML5 新元素 HTML

    HTML5 新元素

    HTML5 新元素HTML5 新元素自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。...

    47 2020-01-24
  • HTML5 简介 HTML

    HTML5 简介

    HTML5 简介HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 简单易学。...

    29 2020-01-24
  • HTML - XHTML HTML

    HTML - XHTML

    HTML - XHTML...

    29 2020-01-24
  • HTML 速查列表 HTML

    HTML 速查列表

    HTML 速查列表...

    20 2020-01-24
  • HTML 脚本 HTML

    HTML 脚本

    HTML 脚本JavaScript 使 HTML 页面具有更强的动态和交互性。在线实例插入一段脚本...

    16 2020-01-24
热门浏览
热门标签
WORD Excel win10 SEO ppt WPS 手机 故事 疫情地图 百度地图 赚钱 网赚 女人 经典 网站 HTML CSS PPT背景图片 鬼故事 怀孕 Win7 简单 电脑 关键词 家常菜 减肥 二十道 PPT模板 易做 家常 方法 男人 端午节 系统 健康 优化 PDF 食物 句子
最新评论