开源：根据GPS坐标生成Html文件直接显示轨迹的代码
本帖最后由 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;
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,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;
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文件如下
谢谢分享! 不错！
有没有应用实例啊？ Mark
果断的Mark 不错，学习 fsclub 发表于 2012-9-18 14:44 static/image/common/back.gif
不错！
有没有应用实例啊？
这段代码是从手头上的项目里摘出来了
目前暂时没有时间专门针对这个功能做Demo
这个真不错。 markgoogle map 根据地理坐标在地图上定位，good 非常强悍 哇哈哈前两天还想看看google map API呢 最近做了直接生成KML文件的代码 这下省事啦 mark一下，说不定以后有用 不错，进来学习啦 收藏备用 我真不明白html中的哪个函数能接受GPS定位数据而显示的，楼主能否说一说呢 GPS数据每次都要转换再送到html？html如何能动态捕捉第三方软件传来的GPS坐标并实时显示呢？也许我的这个想法是有错误的，诚请各位批评指正，我不懂网页{:smile:} 不知楼主用的模块遇到的火星坐标问题了没？如何解决的？我看的解决办法是买一个偏移数据库。。。一个数据库还不便宜... 果断马克，这个必须要学习 mark了！！！！！ yurinacn 发表于 2012-9-28 08:35 static/image/common/back.gif
不知楼主用的模块遇到的火星坐标问题了没？如何解决的？我看的解决办法是买一个偏移数据库。。。一个数据库 ...
用数据库是精度要求比较高的办法，我的办法是在主要城市取点计算偏移值，然后修正。这样的话只要几百个点就够了。 很好很强大!!! yyt1372 发表于 2012-9-27 22:43
GPS数据每次都要转换再送到html？html如何能动态捕捉第三方软件传来的GPS坐标并实时显示呢？也许我的这个想 ...
这个实现的是轨迹记录，坐标存储在SD卡后，一次性画出整个轨迹，不是实时显示的。 使用LZ的程序，生成的HTML文件一直打不开啊，浏览器要怎么设置？ 一直显示正在连接，就是出刷不出地图 大米饭 发表于 2015-1-16 10:53
一直显示正在连接，就是出刷不出地图
现在Google被屏蔽了，需要番墙才能用。 大米饭 发表于 2015-1-16 10:53
一直显示正在连接，就是出刷不出地图
或者把文件里面的maps.google.com替换成ditu.google.cn即可。 dreampet 发表于 2015-1-23 22:01
或者把文件里面的maps.google.com替换成ditu.google.cn即可。
又来请教楼主
使用楼主的代码可以成功建立HTML文件，轨迹绘制出来感觉再地图上显示不对，在深圳的轨迹地图上却显示是在珠海，差的好远
GPS读取出来的坐标要怎么处理？ 好多东西，收藏 菜发现这个号东西 大米饭 发表于 2015-1-28 22:22
又来请教楼主
使用楼主的代码可以成功建立HTML文件，轨迹绘制出来感觉再地图上显示不对，在深圳的轨迹地 ...
GPS的NEMA协议中，经纬度格式是这种：
ddd.mm.mmm，度 . 分 . 分的十进制小数部分（3位）例如 31º10.335'
Google用的的这种：
ddd.ddddd， 度 . 度的十进制小数部分（5位）例如：31.12035º
虽然国内的地图跟GPS坐标有偏差，但一般也就500-1000米左右，你这个估计是转换时算错了。 不错，MARK Mark!
z学习一下，多谢 这个真心不错，代码也是有模有样的
页:
[1]