HTML地理坐標

位基準

說到地理坐標，一定是有一個定位的基準的。在web開發的過程中，它的定位基準一共有那么幾種：

第一種是IP，根據當前電腦或者是手機設備它的IP地址來確定當前的地理坐標。IP定位是通過ISP機房，也就是每一個登記的機房位置，比如小區，每一棟大樓都會有一個登記的ISP機房。如果使用IP定位的話，它大約能夠精確到小區或者是大樓級別，比如一棟和二棟通過這個IP地址就能準確的區分出來。IP定位的誤差大概在十幾米。

第二種是GPS，GPS是基于衛星定位的，它相對來說是比較準確的，但是它需要硬件支持。比如電腦一般是不具備GPS定位功能的。它的精確度很高，如果是軍方的話可以達到1米甚至以內。

第三種WIFI定位，WiFi定位是通過每一個WiFi地址的Mac地址，特別精確。如果WiFi有登記過的話，它的誤差大概在一米左右。WiFi是有一個信號輻射范圍的，根據輻射范圍的強弱可以確定當前的設備距離這個WiFi有多遠。但是它的支持性能不是太好，只能支持室內。

第四種GSM和CDMA是比較常見的，是使用手機卡來定位的，也就是基于設備的基站。比如聯通的信號塔電信的信號塔，它的精確度也是比較高的，它一般是用于手機或者是通信設備。不同的信號塔會接到來自不同方位的信號，然后根據這個信號的疊加和它的強弱再來確定當前的位置，它的精確度可以達到10米左右。

最后一種是用戶指定，可以手動指定當前的位置，假如當前定位不準，我們需要做一個校正指定當前的位置，最常見的就是我們平常使用打車軟件時，如果自動獲取的位置不準，那么我們可以通過移動來手動指定我們當前的位置。

2：獲取流程

獲取定位基準之后，我們需要獲取當前的地理坐標，獲取是有一個流程的。首先打開web應用，打開之后向瀏覽器請求地理信息，這時會彈出一個詢問窗口，由于位置信息涉及到一個隱私，所以瀏覽器做了一個雙重的保護，詢問之后如果同意了，這時瀏覽器就會從設備或者受信任的服務器獲取位置信息并返回。

3：瀏覽器兼容

browser_map

4：獲取用戶當前坐標（地理坐標到底是怎么獲取的）

getCurrentPosition（onSuccess，onError，options）

onSuccess是一個回調函數，options有三個值：enableHighAccuracy（高精度標識，在設備或者是服務器能達到范圍內返回最高精度）、timeout（超出時間，如果在指定時間內獲取不到位置信息就會返回Error，默認是0（無窮大））、maximumAge（緩存時間）。

const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //瀏覽器支持geolocation
 navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
 } else {
 //瀏覽器不支持geolocation
 alert('當前瀏覽器不支持getLocation');
 }
}
?
//成功回調
function onSuccess(position) {
 const longitude = position.coords.longitude;
 //緯度
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
?
//失敗回調
function onError(error) {
 switch(error.code){
 case 1:
 alert("位置服務被拒絕");
 break;
 case 2:
 alert("暫時獲取不到位置信息");
 break;
 case 3:
 alert("獲取信息超時");
 break;
 case 4:
 alert("未知錯誤");
 break;
 }
}

5：持續獲取用戶當前位置(科學上網)

watchCurrentPosition(onSuccess, onError, options);

let watchId = undefined;
?
const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //瀏覽器支持geolocation
 watchId = navigator.geolocation.watchPosition(showPosition);
 } else {
 //瀏覽器不支持geolocation
 alert('當前瀏覽器不支持getLocation');
 }
}
?
function showPosition(position) {
 const longitude = position.coords.longitude;
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
?
const cancel = () => {
 //清除當前持續獲取當前位置，可以當做是一個setInterval
 if(watchId) navigator.geolocation.clearWatch(watchId);
}

6：coords

coords.latitude - 十進制數的緯度
coords.longitude - 十進制數的經度
coords.accuracy - 位置精度
coords.altitude - 海拔，海平面以上以米計
coords.altitudeAccuracy - 位置的海拔精度
coords.heading - 方向，從正北開始以度計
coords.speed - 速度，以米/每秒計
timestamp - 響應的日期/時間

獲取 HTML 元素的位置坐標，可以使用 JavaScript 中的 DOM 操作來實現。下面是一個示例代碼，展示如何使用 JavaScript 獲取指定類名的元素的位置坐標：

htmlCopy code
<!DOCTYPE html>
<html>
<body>
  <div class="my-element">This is a div element.</div>

  <script>
    // 獲取具有指定類名的元素
    var element = document.querySelector('.my-element');

    // 獲取元素的位置信息
    var rect = element.getBoundingClientRect();

    // 輸出元素的位置坐標
    console.log('元素的左上角坐標：', rect.left, rect.top);
    console.log('元素的右下角坐標：', rect.right, rect.bottom);
    console.log('元素的寬度和高度：', rect.width, rect.height);
  </script>
</body>
</html>

在上述代碼中，我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法獲取該元素的位置信息，返回一個包含左上角坐標、右下角坐標、寬度和高度等屬性的 DOMRect 對象。

最后，我們使用 console.log() 方法將元素的位置坐標輸出到控制臺。您可以根據實際需要使用這些坐標信息。

請注意，獲取的位置坐標是相對于視口（viewport）的坐標，而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標，可以結合 window.scrollX 和 window.scrollY 屬性進行計算。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
</head>
<body>
<canvas id="canvas" style="border:2px solid red" width="400" height="400"></canvas>
<canvas id="canvas2" style="border:2px solid red" width="400" height="400"></canvas>
<div onclick="Fn()"
     style="border:2px solid red;width:200px;margin-top:10px;height:30px;line-height:30px;text-align: center">
    按鈕
</div>
<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //coordinateRecord 坐標記錄；detectionCoordinate檢測是否直線坐標
    var coordinateRecord = [], detectionCoordinate = [];
    //是否開始標記區域
    var move = false;

    //檢測是不是直線
    function checkIsLine(pointArray) {
        if (pointArray === null || pointArray === undefined || pointArray.length < 3) {
            return false;
        }
        var startX = pointArray[0].x;
        var startY = pointArray[0].y;
        var endX = pointArray[pointArray.length - 2].x;
        var endY = pointArray[pointArray.length - 2].y;
        var tan = Math.atan(endX - startX, endY - startY) * 180 / Math.PI;
        for (let i in pointArray) {
            //每3個點檢測是否是直線
            if (i > 3) {
                var x = pointArray[i].x - pointArray[i - 3].x;
                var y = pointArray[i].y - pointArray[i - 3].y;
                var tantemp = Math.atan(y / x) * 180 / Math.PI;
                //允許誤差16度
                if (Math.abs(tantemp - tan) > 16) {
                    return false;
                }
            }
        }
        return true;
    }

    canvas.onmousedown = function (e) {
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        //記錄開始點,每次開始畫，都是一組新的坐標，處理畫多個圖形時，坐標點記錄不準確的問題
        coordinateRecord.push([{
            x: x,
            y:y
        }])
        ctx.moveTo(x, y);
        ctx.lineWidth = 1;
        move = true;
    }

    canvas.onmousemove = function (e) {
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        if (move) {
            ctx.lineTo(x, y);
            ctx.stroke();
            detectionCoordinate.push({
                x: x,
                y: y
            });
            var isLine = checkIsLine(detectionCoordinate);
            //非直線記錄該點
            if (!isLine) {
                coordinateRecord[coordinateRecord.length - 1].push({
                    x: x,
                    y:y
                });
            }
        }
    }

    canvas.onmouseup = function (e) {
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        //重置檢測坐標數組
        detectionCoordinate = [];
        //記錄結束點
        coordinateRecord[coordinateRecord.length - 1].push({
            x: x,
            y:y
        });
        move = false;
    }

    //點擊btn，把記錄的坐標重新顯示，用來檢測坐標是否標記正確
    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext('2d');
    function Fn() {
        for (var i in coordinateRecord) {
            const item = coordinateRecord[i];
            ctx2.moveTo(item[0].x,item[0].y);
            ctx2.lineWidth = 2;
            ctx2.strokeStyle = "green";
            for (var t in item) {
                if (t > 0) {
                    ctx2.lineTo(item[t].x, item[t].y);
                }
            }
            ctx2.stroke();
        }
    }
</script>
</body>
</html>

在線咨詢

上一篇：求立方體的體積和表面積，不難！用html制作立方體自動生成
下一篇：Web 技術：CSS最小和最大(寬度/高度)知識點及優缺點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商