读取本地坐标文件，在百度地图画运动轨迹（2018新华三“物联网终端行为分析”第三题）

目录问题描述解决思路1.注册百度密钥2.创建本地TXT文件。3.编写HTML代码4.搭建本地HTML服务器5.在百度地图显示运动轨迹参考文献问题描述该部分内容来自新华三NAVIGATE创客节-黑客松“物联网终端行为分析”第三题：已知一系列经纬度坐标点，在百度地图上画出该坐标点对应的运动轨迹。注意：文中所有的文件和源代码都可以在CSDN上下载（点击进入下载...

老王回归

3443人浏览 · 2018-11-08 22:20:35

老王回归 · 2018-11-08 22:20:35 发布

问题描述

该部分内容来自新华三NAVIGATE创客节-黑客松“物联网终端行为分析”第三题：已知一系列经纬度坐标点，在百度地图上画出该坐标点对应的运动轨迹。

注意：文中所有的文件和源代码都可以在CSDN上下载（点击进入下载界面）；没有积分的小伙伴，请在评论区留下邮箱，我会通过邮箱发送给你；考虑到个人隐私，代码中没有给出本人AK，请读者自行补上自己的AK。

解决思路

调用百度地图API来完成，读取本地txt文件，并将读取到的经纬度坐标值用折线图的形式显示在百度地图中。本人是人生第一次接触前端，在完成这个任务中多次查找资料并向专业人士求教，现将完整的过程记录如下：

1.注册百度密钥

具体注册方法可以参考百度经验：https://jingyan.baidu.com/article/3f16e0031ed1522591c103ea.html。我们的目的是得到密钥，即AK。

2.创建本地TXT文件。

TXT文件中存放的是电动车的经纬度坐标，由新华三提供，经过与新华三沟通，该部分内容可以公开使用，该文件和本文的源代码都可以在CSDN上下载到。下面是本文所用的tmp.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

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

mac 使用brew卸载安装node

mac 使用brew卸载安装node卸载1. 查看当前安装的node版本：node -v2. 卸载node：brew uninstall node@版本号 --force比如安装的是12.18.1，使用brew uninstall node@12 --force。还有另外两种现在不能用的方法：使用brew uninstall node，会报错：Error: No such keg: /usr/lo