js - 地理位置信息 navigator.geolocation

時間 2019-11-13

標籤地理位置信息 navigator.geolocation navigator geolocation 欄目 JavaScript 简体版

原文原文鏈接

1.單次請求html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="請求位置信息"><br>
<textarea name="content" id="content" cols="30" rows="10"></textarea>
<script>
    window.onload = function () {
        var oBtn = document.getElementsByTagName('input')[0];
        var oTextarea = document.getElementById('content');

        oBtn.onclick = function () {
            navigator.geolocation.getCurrentPosition(function (position) {
                oTextarea.value += "\n 當前經度："+position.coords.longitude;
                oTextarea.value += "\n 當前緯度："+position.coords.latitude;
                oTextarea.value += '\n 準確度：' + position.coords.accuracy;
                oTextarea.value += '\n 海拔：' + position.coords.altitude;
                oTextarea.value +='\n 海拔準確度：'+ position.coords.altitudeAccuracy;
                oTextarea.value += '\n 行進方向：' + position.coords.heading;
            }, function (error) {
                alert(error.code);
            },{
                enableHighAcuracy : true,
                timeout :10000,
                maximumAge : 10000
            });
        }
    }
</script>

</body>
</html>

2.連續請求java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="請求位置信息"><br>
<textarea name="content" id="content" cols="30" rows="10"></textarea>
<script>
    window.onload = function () {
        var oBtn = document.getElementsByTagName('input')[0];
        var oTextarea = document.getElementById('content');
        var timer = null;

        timer = oBtn.onclick = function () {
            navigator.geolocation.watchPosition(function (position) { //屢次連續請求地址
                oTextarea.value += "\n 當前經度："+position.coords.longitude;
                oTextarea.value += "\n 當前緯度："+position.coords.latitude;
                oTextarea.value += '\n 準確度：' + position.coords.accuracy;
                oTextarea.value += '\n 海拔：' + position.coords.altitude;
                oTextarea.value +='\n 海拔準確度：'+ position.coords.altitudeAccuracy;
                oTextarea.value += '\n 行進方向：' + position.coords.heading;
            }, function (error) {
                alert(error.code);
                navigator.geolocation.clearWatch(timer);//關閉連續請求
            },{
                enableHighAcuracy : true,
                timeout :10000,
                maximumAge : 10000
            });
        }
    }
</script>

</body>
</html>

相關標籤/搜索

地理位置

navigator.geolocation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。