首页 > 作文

HTML5（五）Geolocation

更新时间:2023-04-07 09:14:38 阅读：评论：0

html5 geolocation

定位用户的位置

html5 geolocation api 用于获得用户的地理位置。

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

注意: geolocation（地理定位）对于拥有 gps 的设备，比如 iphone，地理定位更加精确。

geography 地理； location 位置; geo+location 地理位置； current 现在；

getcurrentposition() 方法 – 返回数据

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

属性描述coords.latitude十进制数的纬度coords.lon林奕含冯玄烨gitude十进制数的经度coords.accuracy位置精度coords.altitude海拔广西专科院校排名，海平面以上以米计coords.altitudeaccuracy位置的海拔精度coords.heading方向，从正北开始以度计coords.speed速度，以米/每秒计timestamp响应的日期/时间

html5 – 使用地理定位

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

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

<!doctype html><html lang="en"><head><meta chart="utf-8"><title>geolocation</title></head><body><button onclick="getlocation()">点击获取地理位置</button><p>数据信息：</p><p id="demo"></p><script>var x=document.getelementbyid("demo");function getlocation(){                        //检测是否支持地理定位if (navigator.geolocation){navigator.geolocation.getcurrentposition(updatpos,errorloca);}el{x.innerhtml="该浏览器不支持获取地理位置。";}}//处理数据并显示function updatpos(position){            var latitude = position.coords.latitude;//十进制单位            var longitude = position.coords.longitude;//十进制单位            var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距            var timestamp = position.timestamp;//时间戳     var date = new date(timestamp);//时间格式                        console.log('经度坐标' + latitude.tofixed(2)); //保留两位小数            console.log('纬度坐标' + longitude.tofixed(2));            console.log('准确度' + accuracy);            console.log('获取位置数据的时间' + date);            x.innerhtml = "纬度: " + latitude.tofixed(2) + "<br>经度: " + longitude.tofixed(2);      }    function errorloca(error){        var str = "";        switch(error.code){    ca 0:    str ='位置信息获取失败，失败原因'+error.message;break;                    ca 1://错误编码 permission_denied                    str ='用户拒绝共享其位置信息';break;                    ca 2://错误编码 position_unavailable                    str = '尝试获取用户位置数据，但失败了' ;break;                    ca 3://错误编码 timeout                    str = '尝试获取用户的位置数据超时' ;break;                }                console.log(str);                console.warn('error(' + error.code + '): ' + error.message);                x.innerhtml = str;               }</script></body></html>

实例解析:

检测是否支持地理定位如果支持，则运行 getcurrentposition() 方法。如果不支持，则向用户显示一段消息。如果getcurrentposition()运行成功，则向参数updatpos中规定的函数返回一个position参数如果getcurrentposition()运行失败，则向参数error宝安旅游租车loca中规定的函数返回一个error参数updatpos() 函数获得并显示经度和纬度errorloca() 函数提示错误信息

geolocation 对象 – 其他有趣的方法

watchposition() – 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 gps）。

clearwatch() – 停止 watchposition() 方法

下面的例子展示 watchposition() 方法。您需要一台精慈祥的反义词是什么确的 gps 设备来测试该例（比如 iphone）：

实例

var x=document.getelementbyid("demo");function getlocation(){    if (navigator.geolocation)    {        navigator.geolocation.watchposition(showposition);    }    el    {        x.innerhtml="该浏览器不支持获取地理位置。";    }}function updatpos(position){    x.innerhtml="纬度: " + position.coords.latitude +     "<br>经度: " + position.coords.longitude; }