摘要：地理信息的返回，是帶有一個的精度值，是以米為單位的，對地理信息的舍棄與否，主要取決于你期望的這個精確值。可以自定義放大倍數，根據用戶的速度，改變不同的放大。

好久沒寫文章了，之前一直有一個想法，就是做一個根據用戶行走的路線，獲取地理位置，然后把它們繪制出來，最后產生的效果，類似蝸牛行走留下的痕跡。

最近思考了一下，搭了一個https，簡單實現了一下，提供一下思路給大家看看，具體的細節還有很多需要完善。

demo：

demo頁面地址： （不會泄露你的隱私，請用移動端訪問，耐心等待位置獲取）
https://www.yudonghan.com/snail/

要做這樣一個東西首先要去了解html5提供了哪些地理信息接口，這些內容可以在MDN上找到：
主要是一個 Geolocation.watchPosition() 和 Geolocation.getCurrentPosition()

getCurrentPosition 是一次性的獲取你的地理信息位置，watchPosition是監聽地理信息位置的改變。

了解到接口以后，遇到的第一個問題是，發現普通的http協議由于隱私限制，已經取消了對上述兩個接口的支持，解決方法是必須搭建https協議的服務器！
上網找到方法，我使用偽造的假證書搭建了nginx 的https服務，但問題是用戶在訪問的時候需要手動確認這個不安全的訪問，不過這也正常，作為定位這樣敏感的信息，確實是需要極高的安全性。

我希望可以過一段時間拿到一個定位，只有一個，所以我設置了一個時間周期的循環，并記錄當前在哪個循環內，如果這個周期內已經拿到過watch接口得到的位置，那么我就不做操作，如果沒拿到過，我就給放到記錄里，如果整個周期都沒拿到，也沒關系，我就拋棄這個周期，去獲取更精確的值。

地理信息的返回，是帶有一個accurancy的精度值，是以米為單位的，對地理信息的舍棄與否，主要取決于你期望的這個精確值。

關于繪制，這邊就是用一個最基本的帶有透明度的圓。在最開始，我會記錄下第一次進來的位置信息（對應畫布的粗略的中點），之后每次跟這次進行比對，算出差值，然后放大，映射到畫布坐標，作為圓心，繪制到畫布上。

直接看代碼：

(function () {
    // 初始化畫布
    var canvas
    var ctx
    var width = 500;
    var height = 500;
    function initCanvas() {
        canvas = document.getElementById("snail_canvas");
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext("2d");
    }
    // 繪制點方法
    function drawPoint(x, y, r) {
        ctx.fillStyle = "rgba(0, 0, 200, 0.1)";
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();
    }

    // 地理信息位置參數
    var options = {
        enableHighAccuracy: true,
        desiredAccuracy: 20
    }
    // 一些記錄用的變量
    var pathArr = {}
    var pathIndex = 0
    var watchID = navigator.geolocation.watchPosition(checkLocation, onError, options);
    var firstFlag = true
    var centerPos = {}
    var centerPoint = {}
    centerPoint.x = width / 2
    centerPoint.y = height / 2


    // 檢查位置，每次地理信息變化都會經過這個函數
    function checkLocation(position) {
        // 精度小于期望值過濾
        if (position.coords.accuracy <= options.desiredAccuracy) {
            // 當前周期內只能記錄一次地理坐標
            if (!pathArr[pathIndex]) {
                var offset
                pathArr[pathIndex] = position
                document.getElementById("container").innerHTML += "render in period" + pathIndex + "
";
                // 獲取地理坐標
                var geoX = position.coords.longitude
                var geoY = position.coords.latitude
                // 全局第一次坐標作為我們畫布的中點繪制
                if (firstFlag) {
                    offset = {
                        x: 0,
                        y: 0
                    }
                    centerPos = {
                        x: geoX,
                        y: geoY
                    }
                    firstFlag = false
                }
                else {
                    // 后來的坐標我們算跟第一次坐標的差值記錄
                    offset = {
                        x: geoX - centerPos.x,
                        y: geoY - centerPos.y
                    }
                }
                // 將差值傳給點渲染方法
                renderPoint(offset)
            }            
        }
    }
    // 地理坐標放大倍數
    var mulTime = 100000
    function renderPoint(offset) {
        // 用畫布中點疊加放大后的差值，并繪制該點
        var x = centerPoint.x + offset.x * mulTime 
        var y = centerPoint.y + offset.y * mulTime
        drawPoint(x, y, 5)
        document.getElementById("container").innerHTML += "**** : " + offset.x + "+" + offset.y + "
";
    }



    function main() {
        initCanvas()
        // 設置一個循環來計算周期，每個周期最多獲取一次地理信息位置，最少0次
        setInterval(function () {
            pathIndex ++
        }, 2000)
    }

    // 頁面加載和重新進入頁面的時候都會運行main
    window.onload = main;
    window.focus = main;

    //失敗時
    function onError(error){
        switch(error.code){
            case 1:
            alert("位置服務被拒絕");
            break;

            case 2:
            alert("暫時獲取不到位置信息");
            break;

            case 3:
            alert("獲取信息超時");
            break;

            case 4:
            alert("未知錯誤");
            break;
        }
    }
    
})()

目前這套系統還存在很多問題，比如精度問題，經常產生繪制不準確的情況。

繪制上，更是不夠細致，尤其是當你走出畫布是無法記錄的，當前的放大值過大，還很容易走出畫布。該點后續可以優化。

最大問題：作為html5頁面，你必須一直開啟瀏覽器訪問才能持續獲取定位，不能黑屏，不能暫存瀏覽器，導致這個頁面非常不實用！

進化：
目前是透明圓點的繪制方法，可以改用折現等其他方式。
圓點可以自定義顏色，大小，成為真正的步行繪制系統。
可以自定義放大倍數，根據用戶的速度，改變不同的放大。