問題描述

該部分內容來自新華三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>