讀取本地座標檔案，在百度地圖畫運動軌跡（2018新華三“物聯網終端行為分析”第三題）

阿新 • • 發佈：2018-11-21

問題描述

解決思路

1.註冊百度金鑰

問題描述

該部分內容來自新華三NAVIGATE創客節-黑客鬆“物聯網終端行為分析”第三題：已知一系列經緯度座標點，在百度地圖上畫出該座標點對應的運動軌跡。

注意：文中所有的檔案和原始碼都可以在CSDN上下載（點選進入下載介面）；沒有積分的小夥伴，請在評論區留下郵箱，我會通過郵箱傳送給你；考慮到個人隱私，程式碼中沒有給出本人AK，請讀者自行補上自己的AK。

解決思路

呼叫百度地圖API來完成，讀取本地txt檔案，並將讀取到的經緯度座標值用折線圖的形式顯示在百度地圖中。本人是人生第一次接觸前端，在完成這個任務中多次查詢資料並向專業人士求教，現將完整的過程記錄如下：

1.註冊百度金鑰

具體註冊方法可以參考百度經驗：https://jingyan.baidu.com/article/3f16e0031ed1522591c103ea.html。我們的目的是得到金鑰，即AK。

2.建立本地TXT檔案。

TXT檔案中存放的是電動車的經緯度座標，由新華三提供，經過與新華三溝通，該部分內容可以公開使用，該檔案和本文的原始碼都可以在CSDN上下載到。下面是本文所用的txt文字資料：

datatag,devId,nlat,nlon,is_value
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1920196093,120.203011802,1
t4_2,35FE4445,30.1921179444,120.203013372,1
t4_2,35FE4445,30.1921596238,120.203014991,1
t4_2,35FE4445,30.1922078431,120.203006669,1
t4_2,35FE4445,30.1922976792,120.202994998,1
t4_2,35FE4445,30.1924257995,120.202979982,1
t4_2,35FE4445,30.1925189059,120.202963341,1
t4_2,35FE4445,30.1925854971,120.202958315,1
t4_2,35FE4445,30.1926886019,120.202941665,1
t4_2,35FE4445,30.1927451535,120.202933336,1
t4_2,35FE4445,30.1928282417,120.202915047,1
t4_2,35FE4445,30.1928766282,120.202919974,1
t4_2,35FE4445,30.1929317427,120.202929863,1
t4_2,35FE4445,30.1930634051,120.202931406,1
t4_2,35FE4445,30.1931248517,120.202914792,1
t4_2,35FE4445,30.1932096691,120.202901471,1
t4_2,35FE4445,30.1932660962,120.202883206,1

3.編寫HTML程式碼

讀取本地TXT檔案，獲取一系列經緯度座標，並在百度地圖api中顯示運動軌跡。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <style type="text/css">
    body, html, #allmap {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微軟雅黑";
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script>
  <title>在百度地圖中顯示電動車的運動軌跡</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    function readTextFile(file) {
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4) {
                if (rawFile.status === 200 || rawFile.status == 0) {
                    var arr = [];
                    var allText = rawFile.responseText;
                    allText = allText.split('\n');
                    window.allText = allText;
                    for (var x in allText) {
                        if (Number(x) === 0) {
                            continue;
                        }
                        var _ele = allText[x].split(',');
                        arr.push({x: _ele[3], y: _ele[2]});

                    }
                    mapIni(arr)
                }
            }
        };
        rawFile.send(null);
    }

    readTextFile("tmp.txt");

    function mapIni(arr) {
        // 百度地圖API功能
        var map = new BMap.Map("allmap");    // 建立Map例項
        map.centerAndZoom(new BMap.Point(120.202914, 30.193124), 22);  // 初始化地圖,設定中心點座標和地圖級別
        map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.6,//圖示縮放大小
            strokeColor: '#fff',//設定向量圖示的線填充顏色
            strokeWeight: '2'//設定線寬
        });
        var icons = new BMap.IconSequence(sy, '10', '30');
// 建立polyline物件
        var pois=[];
        for(var i in arr){
            var _data=new BMap.Point(arr[i].x, arr[i].y)
            pois.push(_data)
        }
        var polyline = new BMap.Polyline(pois, {
            enableEditing: false,//是否啟用線編輯，預設為false
            enableClicking: true,//是否響應點選事件，預設為true
            icons: [icons],
            strokeWeight: '8',//折線的寬度，以畫素為單位
            strokeOpacity: 0.8,//折線的透明度，取值範圍0 - 1
            strokeColor: "#18a45b" //折線顏色
        });

        map.addOverlay(polyline);          //增加折線
    }


</script>

4.搭建本地HTML伺服器

經過多次試驗後，最終找到了一個最簡單的方法，那就是使用HFS搭建本地HTML檔案伺服器。

（1）下載並開啟HFS軟體

下載地址：http://www.rejetto.com/hfs/?f=dl

（2）更改埠號

預設埠號是80，為了防止埠號衝突，將埠號改為8080。

（3）新增檔案

將前面的生成的TXT檔案和HTML檔案都用滑鼠拖進HFS介面中即可。

5.在百度地圖顯示運動軌跡

上一步完成後會在HFS軟體的位址列中出現一個地址，把這個地址輸進瀏覽器或者直接單擊該位址列左邊的“在瀏覽器中開啟”按鈕既可在百度地圖中顯示電動車運動軌跡。以下是實際的顯示效果，反應了新華三附近的一輛電動車橫穿濱安路的情形。

參考文獻

[1]NAVIGATE創客節-黑客鬆“物聯網終端行為分析”賽題：https://zhiliao.h3c.com/Developer/huati/40

[2]註冊百度金鑰：https://jingyan.baidu.com/article/3f16e0031ed1522591c103ea.html

[3]在百度地圖畫折線示例：http://lbsyun.baidu.com/jsdemo.htm#c1_25

[4]搭建本地HTML伺服器：https://www.cnblogs.com/1024zy/p/6402534.html

讀取本地座標檔案，在百度地圖畫運動軌跡（2018新華三“物聯網終端行為分析”第三題）

問題描述