Html5中的地理位置开发应用

最新推荐文章于 2024-08-06 10:14:51 发布

南京闫伟亮的野爹

最新推荐文章于 2024-08-06 10:14:51 发布

阅读量152

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jaickckhj&title=Html5%E4%B8%AD%E7%9A%84%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE%E5%BC%80%E5%8F%91%E5%BA%94%E7%94%A8

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

                        
                    
  最近在看HTML5中关于地理位置定位的相关技术， 在 HTML5 中，当请求一个位置信息时，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持地理定位功能的底层设备（比如笔记本电脑或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。 
 

    例如北京故宫的位置信息主要由一对纬度和经度坐标组成：纬度：北纬 39.9，经度：东经 116.4。 
   
经纬度坐标有两种表示方式：十进制格式（例如 39.9）和 DMS（Degree Minute Second，角度）格式（例如 39 ° 54 ′ 20 ″）。HTML5 Geolocation API 返回的坐标格式为十进制格式。除了纬度和经度坐标，HTML5 Geolocation 还提供位置坐标的准确度。除此之外，它还会提供其他一些元数据，比如海拔、海拔准确度、行驶方向和速度等，具体情况取决于浏览器所在的硬件设备。 
   HTML 预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    
    <head>    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
        <title>Geolocation 对象，Geolocation 与 Google Map 交互 ------ JS    
            Mix</title>    
    </head>    
    <body>    
        <input type="button" id="getPos" value="获取我的位置">    
        <div id="info" class="">    
            您所在的位置： 经度    
            <span class="tip">unknown</span>，纬度    
            <span class="tip">unknown</span>    
        </div>    
    
        <script type="text/javascript">    
            var t = 0;    
            var dom = {    
                btn : document.getElementById('getPos'),    
                info : document.getElementById('info')    
            };    
    
            dom.btn.onclick = function(){    
                if (navigator.geolocation) {    
                    dom.info.innerHTML = "请等待查询结果返回";    
                    dom.info.className = "warn";    
                    navigator.geolocation.getCurrentPosition(getPositionSuccess,getPositionError,{timeout:5000});    
                }else {    
                     dom.info.innerHTML = "抱歉，您所使用的浏览器不支持 Geolocation 接口";    
                     dom.info.className = "warn";    
                }    
            }    
                
                
            function getPositionSuccess(position){    
                var lat = position.coords.latitude;    
                var lng = position.coords.longitude;    
                dom.info.innerHTML = "您所在的位置： 经度"   lat   "，纬度"   lng;                 
                if(typeof position.address === "undefined"){    
                    dom.info.innerHTML  = "<br /><span class='tip'>您的浏览器目前仅提供坐标查询，使用 Firefox 3.5  可获得更多信息</span>";    
                }else{    
                    dom.info.innerHTML  = "<br /><span class='tip'>"   position.address.country   " , "   position.address.region   " , "   position.address.city "</span>";    
                }    
            }    
                
                
                
            function getPositionError(error){    
                switch(error.code){    
                    case error.TIMEOUT :    
                        dom.info.innerHTML = "连接超时，请重试";    
                        break;    
                    case error.PERMISSION_DENIED :    
                        dom.info.innerHTML = "您拒绝了使用位置共享服务，查询已取消";    
                        break;    
                    case error.POSITION_UNAVAILABLE :     
                        dom.info.innerHTML = "亲爱的火星网友，非常抱歉<br />我们暂时无法为您所在的星球提供位置服务";    
                        break;    
                }    
            }    
                
        </script>    
    </body>    
</html>    