摘要：地理信息的返回，是帶有一個(gè)的精度值，是以米為單位的，對(duì)地理信息的舍棄與否，主要取決于你期望的這個(gè)精確值?？梢宰远x放大倍數(shù)，根據(jù)用戶的速度，改變不同的放大。

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

最近思考了一下，搭了一個(gè)https，簡(jiǎn)單實(shí)現(xiàn)了一下，提供一下思路給大家看看，具體的細(xì)節(jié)還有很多需要完善。

demo：

demo頁(yè)面地址： （不會(huì)泄露你的隱私，請(qǐng)用移動(dòng)端訪問，耐心等待位置獲?。?br>https://www.yudonghan.com/snail/

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

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

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

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

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

關(guān)于繪制，這邊就是用一個(gè)最基本的帶有透明度的圓。在最開始，我會(huì)記錄下第一次進(jìn)來的位置信息（對(duì)應(yīng)畫布的粗略的中點(diǎn)），之后每次跟這次進(jìn)行比對(duì)，算出差值，然后放大，映射到畫布坐標(biāo)，作為圓心，繪制到畫布上。

直接看代碼：

(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");
    }
    // 繪制點(diǎn)方法
    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();
    }

    // 地理信息位置參數(shù)
    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


    // 檢查位置，每次地理信息變化都會(huì)經(jīng)過這個(gè)函數(shù)
    function checkLocation(position) {
        // 精度小于期望值過濾
        if (position.coords.accuracy <= options.desiredAccuracy) {
            // 當(dāng)前周期內(nèi)只能記錄一次地理坐標(biāo)
            if (!pathArr[pathIndex]) {
                var offset
                pathArr[pathIndex] = position
                document.getElementById("container").innerHTML += "render in period" + pathIndex + "
";
                // 獲取地理坐標(biāo)
                var geoX = position.coords.longitude
                var geoY = position.coords.latitude
                // 全局第一次坐標(biāo)作為我們畫布的中點(diǎn)繪制
                if (firstFlag) {
                    offset = {
                        x: 0,
                        y: 0
                    }
                    centerPos = {
                        x: geoX,
                        y: geoY
                    }
                    firstFlag = false
                }
                else {
                    // 后來的坐標(biāo)我們算跟第一次坐標(biāo)的差值記錄
                    offset = {
                        x: geoX - centerPos.x,
                        y: geoY - centerPos.y
                    }
                }
                // 將差值傳給點(diǎn)渲染方法
                renderPoint(offset)
            }            
        }
    }
    // 地理坐標(biāo)放大倍數(shù)
    var mulTime = 100000
    function renderPoint(offset) {
        // 用畫布中點(diǎn)疊加放大后的差值，并繪制該點(diǎn)
        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()
        // 設(shè)置一個(gè)循環(huán)來計(jì)算周期，每個(gè)周期最多獲取一次地理信息位置，最少0次
        setInterval(function () {
            pathIndex ++
        }, 2000)
    }

    // 頁(yè)面加載和重新進(jìn)入頁(yè)面的時(shí)候都會(huì)運(yùn)行main
    window.onload = main;
    window.focus = main;

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

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

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

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

目前這套系統(tǒng)還存在很多問題，比如精度問題，經(jīng)常產(chǎn)生繪制不準(zhǔn)確的情況。

繪制上，更是不夠細(xì)致，尤其是當(dāng)你走出畫布是無法記錄的，當(dāng)前的放大值過大，還很容易走出畫布。該點(diǎn)后續(xù)可以優(yōu)化。

最大問題：作為html5頁(yè)面，你必須一直開啟瀏覽器訪問才能持續(xù)獲取定位，不能黑屏，不能暫存瀏覽器，導(dǎo)致這個(gè)頁(yè)面非常不實(shí)用！

進(jìn)化：
目前是透明圓點(diǎn)的繪制方法，可以改用折現(xiàn)等其他方式。
圓點(diǎn)可以自定義顏色，大小，成為真正的步行繪制系統(tǒng)。
可以自定義放大倍數(shù)，根據(jù)用戶的速度，改變不同的放大。