「马拉松记录」马拉松运动员信息记录系统（基于百度地图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>
    <p id="allmap"></p>

</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的代码为：

<?php

  require '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);
  ?>

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

马拉松记录

相关阅读

栏目导航

推荐阅读

热门阅读