马拉松运动员信息记录系统（基于百度地图API）

本文主要是介绍马拉松运动员信息记录系统（基于百度地图API），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这个项目的想法是在运动员身上放置一个可以检测运动员身体状况以及位置的设备，通过将数据发送到数据库然后通过系统就可以监测运动员的身体状况，大大提高了运动员的运动质量，同时可以给他们提供适时的，有需要的帮助。这个项目分为硬件和软件两部分，我主要负责软件部分。首先要实现在地图上可以观测到运动员的位置，并追踪，再次是显示运动员的心率、体温等信息，本来还想着弄一个报警功能，后面再准备实现。
这里写图片描述

实现的方法是不断从数据库读取运动员的位置、体温、心率信息再在地图上显示，setInterval（）和ajax（）发挥了关键作用，实验代码如下：

<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{width:100%;height:500px;}p{margin-left:5px; font-size:14px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Zk6huv39tehCwuTMxKz5hlSI"></script><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><title>给多个点添加信息窗口</title>
</head>
<body><div id="allmap"></div></body>
</html>
<script type="text/javascript">// 百度地图API功能map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);setTimeout(function(){map.setZoom(14);   }, 2000);  //2秒后放大到14级map.enableScrollWheelZoom(true);setInterval(function(){$.ajax({    //不断执行type:'GET',url:'getNewsJSON.php',success:function(response,statu){map.clearOverlays();var box=eval(response);var str0="体温为："+box[0].temture+"<br>"+"心率为："+box[0].heartrate; //跳动的点上显示的身体信息var str1="体温为："+box[1].temture+"<br>"+"心率为："+box[1].heartrate; //跳动的点上显示的身体信息var data_info = [[box[0].longitude,box[0].latitute,str0],   //跳动的点经度，维度，信息[box[1].longitude,box[1].latitute,str1]];var opts = {width : 250,     // 信息窗口宽度height: 80,     // 信息窗口高度title : "<b>身体状况：</b>" , // 信息窗口标题enableMessage:true,//设置允许信息窗发送短息};for(var i=0;i<data_info.length;i++){var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注var content = data_info[i][2];map.addOverlay(marker);               // 将标注添加到地图中addClickHandler(content,marker);marker.setAnimation(BMAP_ANIMATION_BOUNCE); }function addClickHandler(content,marker){marker.addEventListener("click",function(e){openInfo(content,e)});}function openInfo(content,e){var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口}}
})},10000);</script>

连接数据库的php的代码为：

<?phprequire 'mysql_connect.php';$n=0;$result=mysql_query("select * from news");while($row=mysql_fetch_array($result)){$arr[$n++]=array("longitude"=>$row['longitude'],"latitute"=>$row['latitute'],"temture"=>$row['temture'],"heartrate"=>$row['heartrate'],);}echo json_encode($arr);?><?php$con=mysql_connect("localhost","root",'');mysql_query("SET NAMES 'utf8'");mysql_query("SET CHARACTER SET utf8");mysql_query("SET CHARACTER_SET_RESULT=utf8");IF(!$con){die(mysql_error());}mysql_select_db("newsdemo",$con);?>