从零开始的HTML5之旅(六)

HTML5地理定位

??HTML5 Geolocation(地理定位)用于定位用户的位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

浏览器支持

??IE9、Firefox、Chrome、Safari以及Opera支持地理定位。对于拥有GPS的设备,定位将更加准确。


地理定位

??用getCurrentPosition()方法获得用户的位置。

getCurrentPosition(successCallback, errorCallback,PositionOptions);

??``getCurrentPosition()方法内包含了三个对象,分别是successCallback对象、errorCallback对象、PositionOptions`对象。

successCallback对象

??successCallback对象表示获取到的用户数据位置。此对象包含了coordstimestamp两个属性。

coords属性

描述
accuracy 精确度
latitude 纬度
longitude 经度
altitude 海拔
altitudeAcuracy 海拔高度的精确度
heading 朝向
speed 速度

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此处显示坐标</p>
    <button onclick="getLocation()">获取坐标</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //检测是否支持地理定位
        if (navigator.geolocation) {
            /*
            运行getCurrentPosition()方法。如果运行成功,
            则向参数showPosition中规定的函数返回一个coordinates对象
            */
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            d1.innerHTML = "无法获取您的位置";
        }
    }

    function showPosition(position) {
        /*
        通过coordinates对象获取到latitude属性和longitude属性
        */
        d1.innerHTML = "维度:" + position.coords.latitude + "<br />" + "经度:" + position.coords.longitude;
    }
</script>

errorCallback对象

??errorCallback对象表示返回的错误代码。对象中包含了message属性和code属性。

code属性

描述
unknow_error 表示不包括在其他错误代码中的错误,可以在message中查找信息。
permission_denied 表示用户拒绝浏览器获取位置信息的请求。
position unavalablf 表示网络不可用或者连接不到卫星。
timeout 表示获取超时时。必须在options中指定了timeout值时才有可能发生这种错误。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo1">此处显示坐标</p>
    <button onclick="getLocation()">获取坐标</button>
</body>

</html>

<script>
    var d1 = document.getElementById("demo1");

    function getLocation() {
        //检测是否支持地理定位
        if (navigator.geolocation) {
            /*
            运行getCurrentPosition()方法。如果运行成功,
            则向参数showPosition中规定的函数返回一个coordinates对象
            运行getCurrentPosition()方法的第二个参数用于处理错误,
            它规定了获取用户位置失败时运行的函数
            在getCurrentPosition()方法运行成功后会向showError函数返回一个errorCallback对象。
            errorCallback对象表示返回的错误代码
            */
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            d1.innerHTML = "无法获取您的位置";
        }
    }

    function showPosition(position) {
        /*
        通过coordinates对象获取到latitude属性和longitude属性
        */
        d1.innerHTML = "维度:" + position.coords.latitude + "<br />" + "经度:" + position.coords.longitude;
    }

    function showError(error) {
        /*
        error.code获取errorCallback对象中的code属性。
        code属性中有四个值,如下
        */
        switch (error.code) {
            case error.PERMISSION_DENIED: //用户不允许定位
                d1.innerHTML = "用户拒绝了地理位置定位请求。";
                break;
            case error.POSITION_UNAVAILABLE:  //无法获取当前位置
                d1.innerHTML = "位置信息不可用。";
                break;
            case error.TIMEOUT:  //超时
                d1.innerHTML = "获取用户位置的请求超时。";
                break;
            case error.UNKNOWN_ERROR:  //未知错误
                d1.innerHTML = "出现未知错误。";
                break;
        }
    }
</script>

PositionOptions属性

??PositionOptions接口不继承任何属性。数据格式为json,有3个属性。

属性 描述
enableHighAcuracy 布尔值,表示是否启用高精确度模式,如果启用这个模式,浏览器在获取位置信息时可能需要耗费更多的时间。
Timeout 整数,表示浏览器需要在指定的时间内获取位置信息,否则触发errorCallback。
maximumAge 整数/常量,表示浏览器重新获取位置信息的时间间隔。

getCurrentPosition()方法

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

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

原文地址:https://www.cnblogs.com/ODevil/p/12569347.html

时间: 2024-11-09 01:38:57

从零开始的HTML5之旅(六)的相关文章

从零开始的HTML5之旅(六)——Re SVG

HTML5 SVG SVG是什么? ??SVG是一种图像文件格式,其英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML,由W3C联盟进行开发的.严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的.高分辨率的Web图形页面.用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看. ??SVG是一种用XML定义的语言,用来描述二维矢量/栅格图形.S

从零开始的HTML5之旅(三)

HTML5音频 ??HTML5规定了一种通过audio元素包含音频的方法.audio能够播放声音文件和音频流. 音频格式 格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari3.0 Ogg Vorbis - 支持 支持 支持 - Mp3 支持 - - 支持 支持 Wav - 支持 支持 - 支持 ??从上面的格式中我们可以知道,在实际应用中仅仅只需要用到Ogg格式和Mp3格式.??audio的属性.方法.事件和video基本一致,可以参考从零开始的HTM

从零开始学ios开发(六):IOS控件(3),Segmented Control、Switch

这次的学习还是基于上一个项目继续进行(你也可以新建一个项目)学习Segmented Control和Switch. Segmented Control Switch Segmented Control和Switch的主要区别在于Segmented Control可以有多个值进行选择,而Switch只有2个值. 1)添加Segmented Control从object library中拖一个Segmented Control到iphone界面上然后调整Segmented Control位置以及它的

HTML5 Canvas 描画六叶草

注意: context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);这个函数挺难用,主要原因是最后参数和角度的关系.不管文档怎么说,按我的实际经验,逆顺时针=false时,是逆时针旋转:逆顺时针=true时,是顺时针旋转.搞清楚这个,再来看角度.看下面语句: context.arc(x,y,r,getRad(60),getRad(120),false);这句话意思是以x,y为圆心,半径r画弧,逆时针转60度为起始点,逆时针转120度为终止点.另外逆顺时针不要换来换去,坚持习惯

-------走过夏天,一路慢行的HTML5之旅!

一.HTML5的概念 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改. 二.HTML5文档的结构  HTML文档主要包括三大部分:文档声明部分.<head>头部部分.<body>主体部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </

python之旅六【第六篇】模块

json和pickle 用于序列化的两个模块 json,用于字符串 和 python数据类型间进行转换pickle,用于python特有的类型 和 python的数据类型间进行转换 json模块提供了四个功能:dumps.dump.loads.loadpickle模块提供了四个功能:dumps.dump.loads.load json dumps把数据类型转换成字符串 dump把数据类型转换成字符串并存储在文件中  loads把字符串转换成数据类型  load把文件打开从字符串转换成数据类型

在这个夏天与Html5不期而遇(六)

一.写导航时的命名: nav:导航 mainnav:主导航 subnav:子导航 topnav:顶部导航 sidebar:边缘导航 leftsidebar:左侧导航 rightsidebar:右侧导航 menu:菜单部分 submenu:子菜单部分 title:标题 summary:摘要 二.写功能栏时的命名: logo:标志 banner:广告 login:登录 loginbar:登录条 regsiter:注册 search:搜索 shop:功能区 joinus:加入 status:状态 bt

C#微信开发之旅(六):生成带参数的二维码

主要用来推广并统计数据,当用户扫描带参数二维码时,微信会推送消息到我们的服务器,此时可以根据参数了解到用户是从哪个渠道关注的.话不多少,先来代码: 1 #region 生成二维码 2 3 /// <summary> 4 /// 获取Ticket 5 /// </summary> 6 /// <returns></returns> 7 private static string CreateTicket(string scene_id) 8 { 9 var t

python之旅六【第七篇】面向对象之类成员

面向对象的类成员 相关知识点 一  字段 字段包括:普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同, 普通字段属于对象 静态字段属于类