开源：根据GPS坐标生成Html文件直接显示轨迹的代码

dreampet · 发表于 2012-9-18 14:33:13

本帖最后由 dreampet 于 2012-9-18 14:32 编辑

文件系统用的是Fatfs，存储介质为SD卡，以下代码跟硬件无关，可直接使用
生成的Html文件效果如下所示

代码实现是根据Google Map提供的API实现,我建立了一个最简模板，如下所示，在这个模板中，我们只需要修改、填充这一部分即可 new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx);

<html>
<head runat="server">
<title>TraceLog</title>
<meta name="viewport"content="initial-scale=1.0,user-scalable=no"/>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize()
{
var myLatlng = new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx);
var mapOptions= {
zoom:14,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var trackPath = new google.maps.Polyline(
{path:trackPoints,
strokeColor:"#FF0000",
strokeOpacity:1.0,
strokeWeight:2}
);
trackPath.setMap(map);
}
//坐标数组
var trackPoints = [
new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx),
new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx)
];
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 800px; height: 600px; position: relative; "></div>
</form>
</body>
</html>

复制代码

根据以上模板构建4个数组，如下所示

static const int8_t LogTemplet0[]={"<html><head runat="server"><title>TraceLog</title><meta name="viewport"content="initial-scale=1.0,user-scalable=no"/><script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true"></script><script type="text/javascript">"};
static const int8_t LogTemplet1[]={"function initialize(){var myLatlng=new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx);var mapOptions={zoom:14,center:myLatlng,mapTypeId:google.maps.MapTypeId.ROADMAP};var map=new google.maps.Map(document.getElementById("map_canvas"),mapOptions);var trackPath=new google.maps.Polyline({path:trackPoints,strokeColor:"#FF0000",strokeOpacity:1.0,strokeWeight:2});trackPath.setMap(map);}"};
static const int8_t LogTemplet2[]={"var trackPoints = ["};
static const int8_t LogTemplet3[]={"];</script></head><body onload="initialize()"><form id="form1" runat="server"><div id="map_canvas" style="width: 800px; height: 600px; position: relative;"></div></form></body></html>"};

复制代码

初始化函数如下所示，这个函数在SD卡初始化成功后会尝试建立一个名称为Trace_xxx.html的记录文件，xxx的取值范围是000至999，文件建立成功后即按上面的格式建立html文件模块

uint8_t DataLog_Init(void)
{
FRESULT res;
int16_t i;
uint32_t Len;
int8_t TmpStr[16];
res = FR_NO_FILE;
DataLog_Status = 0;
CopyStr("Trace_",TmpStr,15);
if (SD_Init() != SD_Unknown)
{
printf("\r\nSDCard Init Success\r\n");
f_mount(0,&fs);
for (i=0;i<999;i++)
{
Int32ToDecStr(i,&TmpStr[6],3);
StrCat(TmpStr,".html");
res = f_open(&logfile,TmpStr,FA_CREATE_NEW|FA_WRITE);
if (res == FR_OK)
break;
}
}
if (res == FR_OK)
{
res = f_write(&logfile,(int8_t*)LogTemplet0,sizeof(LogTemplet0)-1,&Len);
res |= f_write(&logfile,(int8_t*)LogTemplet1,sizeof(LogTemplet1)-1,&Len);
res |= f_write(&logfile,(int8_t*)LogTemplet2,sizeof(LogTemplet2)-1,&Len);
res |= f_write(&logfile,"\r\n",2,&Len);
res |= f_write(&logfile,(int8_t*)LogTemplet3,sizeof(LogTemplet3)-1,&Len);
if (res == FR_OK)
{
printf("No. %d LogFile Created!\r\n",i);
f_sync(&logfile);
DataLog_Status = 1;
DataLog_NewLog = 1;
return 1;
}
else
{
f_close(&logfile);
f_mount(0,NULL);
DataLog_Status = 0;
}
}
return 0;
}

复制代码

构建坐标数组元素的代码如下所示，这个函数将xx.xxxxxx,xxx.xxxxxx 格式的坐标转化成 new google.maps.LatLng(xx.xxxxxx,xxx.xxxxxx) 格式

uint8_t DataLog_BuildRecord(int8_t *pLatLng)
{
uint8_t TmpStr[128];
sprintf(TmpStr,"new google.maps.LatLng(%s)",pLatLng);
return DataLog_WriteRecord(TmpStr);
}

复制代码

将坐标元素插入到模板中的代码如下所示，当第一次插入元素时，需进行特殊处理，填充起点坐标，每次填充完毕后，调用f_sync将缓存同步至SD卡，确保数据记录完整

uint8_t DataLog_WriteRecord(uint8_t *pRec)
{
int16_t res,RecLen,Len;
if (!DataLog_Status)
return 0;
if (DataLog_NewLog == 1)
{
f_lseek(&logfile,275);
f_write(&logfile,pRec,44,(UINT*)&Len);
f_lseek(&logfile,(&logfile)->fsize - sizeof(LogTemplet3) + 1);
DataLog_NewLog = 0;
}
else
{
f_lseek(&logfile,(&logfile)->fsize - sizeof(LogTemplet3) + 1);
f_write(&logfile,",\r\n",3,(UINT*)&Len);
}
f_write(&logfile,pRec,44,(UINT*)&RecLen);
f_write(&logfile,(int8_t*)LogTemplet3,sizeof(LogTemplet3)-1,(UINT*)&Len);
if (44 != RecLen)
{
printf("\r\nLog Failure!\r\n");
f_close(&logfile);
DataLog_Status = 0;
return 0;
}
else
{
f_sync(&logfile); //同步文件至SD卡
printf("\r\nLog Success!\r\nLog Size:%d\r\n",f_size(&logfile));
return 1;
}
}

复制代码

生成的Html文件如下

leifeng · 发表于 2012-9-18 14:37:36

谢谢分享!

fsclub · 发表于 2012-9-18 14:44:15

不错！
有没有应用实例啊？

52avr · 发表于 2012-9-18 14:44:31

Mark
果断的Mark

zhzj2007 · 发表于 2012-9-18 14:46:46

不错，学习

dreampet · 发表于 2012-9-18 14:49:45

fsclub 发表于 2012-9-18 14:44
不错！
有没有应用实例啊？

这段代码是从手头上的项目里摘出来了
目前暂时没有时间专门针对这个功能做Demo

yizchan · 发表于 2012-9-19 22:49:21

这个真不错。

jjj · 发表于 2012-9-19 23:11:28

mark google map 根据地理坐标在地图上定位，good

3050311118 · 发表于 2012-9-20 08:05:28

非常强悍

Name_006 · 发表于 2012-9-20 09:01:09

哇哈哈前两天还想看看google map API呢最近做了直接生成KML文件的代码这下省事啦

yuhui · 发表于 2012-9-20 09:07:36

mark一下，说不定以后有用

aohu_2012 · 发表于 2012-9-20 09:29:40

不错，进来学习啦

sunliezhi · 发表于 2012-9-20 14:26:42

收藏备用

yyt1372 · 发表于 2012-9-27 22:36:37

我真不明白html中的哪个函数能接受GPS定位数据而显示的，楼主能否说一说呢

yyt1372 · 发表于 2012-9-27 22:43:37

GPS数据每次都要转换再送到html？html如何能动态捕捉第三方软件传来的GPS坐标并实时显示呢？也许我的这个想法是有错误的，诚请各位批评指正，我不懂网页

yurinacn · 发表于 2012-9-28 08:35:09

不知楼主用的模块遇到的火星坐标问题了没？如何解决的？我看的解决办法是买一个偏移数据库。。。一个数据库还不便宜...

52robot · 发表于 2012-10-2 22:55:42

果断马克，这个必须要学习

b57203493 · 发表于 2013-1-25 06:49:37

mark 了！！！！！

dreampet · 发表于 2013-2-17 13:08:28

yurinacn 发表于 2012-9-28 08:35
不知楼主用的模块遇到的火星坐标问题了没？如何解决的？我看的解决办法是买一个偏移数据库。。。一个数据库 ...

用数据库是精度要求比较高的办法，我的办法是在主要城市取点计算偏移值，然后修正。这样的话只要几百个点就够了。

ljt80158015 · 发表于 2013-2-17 13:21:16

很好很强大!!!

dreampet · 发表于 2015-1-13 14:22:10

yyt1372 发表于 2012-9-27 22:43
GPS数据每次都要转换再送到html？html如何能动态捕捉第三方软件传来的GPS坐标并实时显示呢？也许我的这个想 ...

这个实现的是轨迹记录，坐标存储在SD卡后，一次性画出整个轨迹，不是实时显示的。

大米饭 · 发表于 2015-1-16 10:52:08

使用LZ的程序，生成的HTML文件一直打不开啊，浏览器要怎么设置？

大米饭 · 发表于 2015-1-16 10:53:07

一直显示正在连接，就是出刷不出地图

dreampet · 发表于 2015-1-23 21:56:42

大米饭发表于 2015-1-16 10:53
一直显示正在连接，就是出刷不出地图

现在Google被屏蔽了，需要番墙才能用。

dreampet · 发表于 2015-1-23 22:01:59

大米饭发表于 2015-1-16 10:53
一直显示正在连接，就是出刷不出地图

或者把文件里面的maps.google.com替换成ditu.google.cn即可。

大米饭 · 发表于 2015-1-28 22:22:43

dreampet 发表于 2015-1-23 22:01
或者把文件里面的maps.google.com替换成ditu.google.cn即可。

又来请教楼主
使用楼主的代码可以成功建立HTML文件，轨迹绘制出来感觉再地图上显示不对，在深圳的轨迹地图上却显示是在珠海，差的好远
GPS读取出来的坐标要怎么处理？

tanek · 发表于 2015-1-29 00:28:54

好多东西，收藏

huangqi412 · 发表于 2015-1-29 10:07:07

菜发现这个号东西

dreampet · 发表于 2015-1-29 10:14:24

大米饭发表于 2015-1-28 22:22
又来请教楼主
使用楼主的代码可以成功建立HTML文件，轨迹绘制出来感觉再地图上显示不对，在深圳的轨迹地 ...

GPS的NEMA协议中，经纬度格式是这种：
ddd.mm.mmm，度 . 分 . 分的十进制小数部分（3位）例如 31º10.335'
Google用的的这种：
ddd.ddddd，度 . 度的十进制小数部分（5位）例如：31.12035º

虽然国内的地图跟GPS坐标有偏差，但一般也就500-1000米左右，你这个估计是转换时算错了。

SCS_Super · 发表于 2015-1-29 20:44:48

不错，MARK

ycwjl728 · 发表于 2015-3-31 17:14:34

Mark!
z学习一下，多谢

ggchao · 发表于 2015-3-31 17:23:55

这个真心不错，代码也是有模有样的

开源：根据GPS坐标生成Html文件直接显示轨迹的代码

本帖子中包含更多资源

阿莫论坛20周年了！感谢大家的支持与爱护！！