2019-11-01

HTML Geolocation 地理定位

前言

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

1、实例

实例

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</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>

效果
解释
- 检测是否支持地理定位。
- 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
- 如果 getCurrentPosition() 运行成功，则向参数 showPosition 中规定的函数返回一个 coordinates 对象。
- showPosition() 函数获得并显示经度和纬度。

2、获取位置数据

获取位置数据函数

1	getCurrentPosition(successCallback, errorCallback, PositionOptions);

参数	描述
successCallback	表示获取到的用户位置数据
errorCallback	返回的错误代码
PositionOptions	参数

2.1 successCallback 获取到的用户位置数据

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

属性	描述
coords	位置
address	地址
timestamp	响应的日期/时间

coords 定位

值	描述
accuracy	位置精度
latitude	十进制数的纬度
longitude	十进制数的经度
altitude	海拔，海平面以上以米计
altitudeAcuracy	位置的海拔精度
heading	方向，从正北开始以度计
speed	速度，以米/每秒计

address 位置

值	描述
country	国家
province	省份
city	城市
district	区/县
street	路
streetNum	路编号
poiName	地点名称
cityCode	城市代码

2.2 errorCallback 错误和拒绝处理

errorCallback 属性

属性	描述
message	错误信息
code	错误代码

code 错误代码

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

2.3 PositionOptions 参数

PositionOptions 属性

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

3、在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图。

<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>

使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            x.innerHTML = "该浏览器不支持获取地理位置。";
        }
    }

    function showPosition(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        latlon = new google.maps.LatLng(lat, lon)
        mapholder = document.getElementById('mapholder')
        mapholder.style.height = '250px';
        mapholder.style.width = '500px';

        var myOptions = {
            center: latlon, zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
        };
        var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
        var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });
    }

    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>

4、watchPosition 方法

watchPosition()：返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch()：停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）。

<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>

5、浏览器支持

元素
地理定位	支持	9.0	支持	支持	支持

表格中的数字表示支持该元素的第一个浏览器版本号。

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

6、百度获取经纬度

百度获取经纬度的例子，各浏览器适用，含 IE5。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <!-- 引入百度 API，"ak=" 后面一串码是密钥，最好自己申请 -->
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
      <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
      <button onclick="getLocation()">点我</button>

      <script type="text/javascript">
           var x = document.getElementById('demo');

           function getLocation() {
               var geolocation = new BMap.Geolocation();             // 创建百度地理位置实例，代替 navigator.geolocation
               geolocation.getCurrentPosition(function (e) {
                   if (this.getStatus() == BMAP_STATUS_SUCCESS) {    // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                       x.innerHTML = '纬度：' + e.point.lat + '<br />经度：' + e.point.lng;
                   } else {
                       x.innerHTML = 'failed' + this.getStatus();
                   }
               });
           }
      </script>
</body>
</html>

效果

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-01 23:06

Qian Chia's Blog

赞助

搜索

分类

标签