HTML5 - 使用Geolocation（地理定位）获取用户的位置

最新推荐文章于 2024-05-17 03:30:34 发布

沈成才

最新推荐文章于 2024-05-17 03:30:34 发布

阅读量3.1k

点赞数 1

分类专栏： HTML5/CSS3 文章标签： html5 api geolocation 隐私 gps

HTML5/CSS3 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

通过HTML5 Geolocation API 可以获得用户的地理位置。下面通过一个样例演示如何获取用户经度，纬度gps信息。
（注意：鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。）

效果图如下：
这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GPS</title>
</head>
<body style="font-size:100">
  <p id="result"></p>
  <script>
    var result = document.getElementById("result");
    getLocation();
 
    //获取位置
    function getLocation(){
        if( navigator.geolocation ){
            navigator.geolocation.getCurrentPosition(
                showPosition, handleLocationError,
                {maximumAge:60000, timeout:50000, enableHighAccuracy:true}
                );
        }else{
           result.innerHTML="该设备不支持gps定位";
        }
    }
 
    //获取位置失败处理
    function handleLocationError(error) {
        switch(error.code){
            case 0:
              alert("获取位置信息出错！");
              break;
            case 1:
              alert("您设置了阻止该页面获取位置信息！");
              break;
            case 2:
              alert("浏览器无法确定您的位置！");
              break;
            case 3:
              alert("获取位置信息超时！");
              break;
        }
    }
 
    //显示位置
    function showPosition(position){
      result.innerHTML="经度: " + position.coords.latitude + "<br>纬度: " + position.coords.longitude;
    }
  </script>
</body>
</html>

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_838.html

沈成才

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5 - 使用Geolocation（地理定位）获取用户的位置

通过HTML5 Geolocation API 可以获得用户的地理位置。下面通过一个样例演示如何获取用户经度，纬度gps信息。（注意：鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。）效果图如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>GPS</title></h
复制链接

扫一扫