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

目录

问题描述

解决思路

1.注册百度密钥

2.创建本地TXT文件。

3.编写HTML代码

4.搭建本地HTML服务器

5.在百度地图显示运动轨迹

参考文献

---

问题描述

该部分内容来自新华三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中显示运动轨迹。

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