该博客介绍如何使用JQuery和JavaScript实现百度地图动态加载数据库中的坐标，根据上传时间以不同图标展示，并每隔5秒自动刷新数据。通过模拟按钮模拟GPS设备向数据库更新数据，动态显示巡逻组的位置信息。
功能：借助JQuery，使用 JS 方式实现后台加载坐标数据然后显示在百度地图上，并每隔5秒刷新一次数据。
对不同点使用不同的图标进行标注，比如上传时间大于半小时的点标记为红色图标，说明数据不实时，
对上传时间短于半小时的，则用绿色的点表示正在运动的目标，蓝色的点表示静止的目标。
其中，页面上的模拟按钮是在后台写了一个方法，每5秒向数据库更新一条信息，模拟GPS设备
向数据库更新数据的过程。
先上HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图动态加载DEMO</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/select-ui.min.js"></script>
<script type="text/javascript" src="js/gps_position.js"></script>
<!-- 引用百度地图 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RwEx752LA1MFLGKKRr7jZtnp"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></script>
</head>
<body>
<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a href="#" id="sub_gps">所在网站位置</a></li>
</ul>
</div>
<div class="mainindex" style="margin-top:1px;">
<div style="width:20%;float:left;">
<table class="tablelist">
<thead>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-001" id="cb_grp1"/></th&g
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
