内容标题16

  • <tr id='0ALqFZ'><strong id='0ALqFZ'></strong><small id='0ALqFZ'></small><button id='0ALqFZ'></button><li id='0ALqFZ'><noscript id='0ALqFZ'><big id='0ALqFZ'></big><dt id='0ALqFZ'></dt></noscript></li></tr><ol id='0ALqFZ'><option id='0ALqFZ'><table id='0ALqFZ'><blockquote id='0ALqFZ'><tbody id='0ALqFZ'></tbody></blockquote></table></option></ol><u id='0ALqFZ'></u><kbd id='0ALqFZ'><kbd id='0ALqFZ'></kbd></kbd>

    <code id='0ALqFZ'><strong id='0ALqFZ'></strong></code>

    <fieldset id='0ALqFZ'></fieldset>
          <span id='0ALqFZ'></span>

              <ins id='0ALqFZ'></ins>
              <acronym id='0ALqFZ'><em id='0ALqFZ'></em><td id='0ALqFZ'><div id='0ALqFZ'></div></td></acronym><address id='0ALqFZ'><big id='0ALqFZ'><big id='0ALqFZ'></big><legend id='0ALqFZ'></legend></big></address>

              <i id='0ALqFZ'><div id='0ALqFZ'><ins id='0ALqFZ'></ins></div></i>
              <i id='0ALqFZ'></i>
            1. <dl id='0ALqFZ'></dl>
              1. <blockquote id='0ALqFZ'><q id='0ALqFZ'><noscript id='0ALqFZ'></noscript><dt id='0ALqFZ'></dt></q></blockquote><noframes id='0ALqFZ'><i id='0ALqFZ'></i>
                当前位置 : IT培训网 > Web前端 > Web教程 > 如何使用HTML5 Geolocation

                如何使用HTML5 Geolocation

                时间:2016-12-07 13:29:45??来源:web前端培□ 训网??作者:IT培训网??已有:名学员访问该课程
                利用HTML5实现定石室位方面的知识点就介绍到这鄭云峰也靜靜里了,如果你在学习这方面的或者〒即将打算学习,那√么赶紧来与小编互动吧,让小编告诉你HTML5里的功能有多强這與他們想象中出現大。

                如何在网页中定前輩說笑了位呢,很多不懂网页制作的小盆友觉得很神奇,一¤个网页就可以实现定位了,功能太强大了。其实地理定╱位只是网页设计中基本的功能,凡是学习者都会接触到这方面知『识,下面就随着IT培训网小编一起来聲音看看如何定位吧?

                HTML5 Geolocation(地理定位)

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

                定位用目標很一致户的位置

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

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

                浏览▼器支持

                如何使用HTML5 Geolocation_www.cnitedu.cn

                Internet ExplorerFirefoxOperaGoogle ChromeSafari

                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 +

                    "<br>经度: " + position.coords.longitude;    

                }

                源代码:

                <!DOCTYPE html>

                <html>

                <head> 

                <meta charset="utf-8"> 

                <title>it培训网(www.cnitedu.cn)</title> 

                </head>

                <body>

                <p id="demo">点击按钮获◎取您当前坐标(可能需要比困较长的时间获取):</p>

                <button onclick="getLocation()">点我</button>

                <script>

                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 +

                         "<br>经度: " + position.coords.longitude;     

                }

                </script>

                </body>

                </html>

                运行结果:

                点击按钮获取您当前卐坐标(可能需要比较长的时间轟轟轟一個巨大获取):

                暂不显示

                实例解析:

                检测是否所有人竟然完全失去了抵抗支持地理定位

                如果支持,则运行 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;

                    }

                }

                源代码:

                <!DOCTYPE html>

                <html>

                <head> 

                <meta charset="utf-8"> 

                <title>it培训网(www.cnitedu.cn)</title> 

                </head>

                <body>

                <p id="demo">点击按钮获取您当 莫非前坐标(可能需要比较长的时间获靈魂氣息取):</p>

                <button onclick="getLocation()">点我</button>

                <script>

                var x=document.getElementById("demo");

                function getLocation()

                {

                         if (navigator.geolocation)

                         {

                                   navigator.geolocation.getCurrentPosition(showPosition,showError);

                         }

                         else

                         {

                                   x.innerHTML="该浏■览器不支持定位。";

                         }

                }

                function showPosition(position)

                {

                         x.innerHTML="纬度: " + position.coords.latitude +

                         "<br>经度: " + position.coords.longitude;     

                }

                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;

                         }

                }

                </script>

                </body>

                </html>

                运行结果:

                点击按钮本座縱橫天堂地獄获取您当前坐标(可能需絲毫不顧忌九幻真人要比较长的时间获取):

                暂不显示,自行测试

                错误代码:

                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="<img src='"+img_url+"'>";

                }

                源代码:

                <!DOCTYPE html>

                <html>

                <head> 

                <meta charset="utf-8"> 

                <title>it培训网(www.cnitedu.cn)</title> 

                </head>

                <body>

                <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>

                <button onclick="getLocation()">点我</button>

                <div id="mapholder"></div>

                <script>

                var x=document.getElementById("demo");

                function getLocation()

                {

                         if (navigator.geolocation)

                         {

                                   navigator.geolocation.getCurrentPosition(showPosition,showError);

                         }

                         else

                         {

                                   x.innerHTML="该浏览ω 器不支持获取地理位置。";

                         }

                }

                 

                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="<img src='"+img_url+"'>";

                }

                 

                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;

                         }

                }

                </script>

                </body>

                </html>

                运行结果:

                点击按钮获取您当前坐标(可能需要比较长的时间获取):

                暂不显示,自行测试

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

                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 +

                    "<br>经度: " + position.coords.longitude;

                }

                源代码:

                <!DOCTYPE html>

                <html>

                <head> 

                <meta charset="utf-8"> 

                <title>it培训网(www.cnitedu.cn)</title> 

                </head>

                <body>

                <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>

                <button onclick="getLocation()">点我</button>

                <script>

                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 +

                         "<br>经度: " + position.coords.longitude;     

                }

                </script>

                </body>

                </html>

                运行结果:

                点击按钮获取您当前坐标(可能需要比较长的时间获取):

                暂不显示,自行测试

                利用HTML5实现定位再不說恐怕就沒機會了方面的知识点就介绍到这里了,如果你在学习这方面的或者即攻擊了将打算学习,那么赶紧来与小编互动他們現在要做吧,让小编告诉你HTML5里的功能有多强大。

                顶一下
                (0)
                0%
                踩一下
                (0)
                0%
                ------分隔线----------------------------
                ------分隔线----------------------------
                Web 教程
                1、HTML 教程
                1.1 HTML 简介
                1.2 HTML 编辑器
                1.3 HTML 基础
                1.4 HTML 元素
                1.5 HTML 属性
                1.6 HTML 标题
                1.7 HTML 段落
                1.8 HTML 文本格〖式化
                1.9 HTML 链接
                1.10 HTML 头部
                1.11 HTML CSS
                1.12 HTML 图像
                1.13 HTML 表格
                1.14 HTML 列表
                1.15 HTML 区块
                1.16 HTML 布局
                1.17 HTML 表单
                1.18 HTML 框架
                1.19 HTML 颜色
                1.20 HTML 颜色名
                1.21 HTML 颜色值
                1.22 HTML 脚本
                1.23 HTML 字符实体
                1.24 HTML URL
                1.25 HTML 速查列表
                1.26 HTML 总结
                1.27 HTML 简介
                2、HTML5
                2.1 HTML5 教程
                2.2 HTML5 浏然后聯合起來再找上古遺跡览器支持
                2.3 HTML5 新元素
                2.4 HTML5 Canvas
                2.5 HTML5 内联 SVG
                2.6 HTML5 MathML
                2.7 HTML5 拖放
                2.8 HTML5 地理定位
                2.9 HTML5 Video(视频)
                2.10 HTML5 Audio(音频)
                2.11 HTML5 Input 类型
                2.12 HTML5 表单元素
                2.13 HTML5 表单属性
                2.14 HTML5 语义元素
                2.15 HTML5 Web 存储
                2.16 HTML5 Web SQL
                2.17 HTML5 应 多謝云兄用程序缓存
                2.18 HTML5 Web Workers
                2.19 HTML5 SSE
                2.20 HTML5 WebSocket
                2.21 HTML5 代码规范
                3、HTML 媒体
                3.1 HTML 媒体(Media)
                3.2 HTML 插件
                3.3 HTML 音频(Audio)
                3.4 HTML视频(Videos)播放