JQuery條件下使用 JS方式實現百度地圖載入資料庫中的座標並實現動態重新整理
功能：藉助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="
<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>
<th width="80%">巡邏組1</th>
</tr>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-002" id="cb_grp2"/></th>
<th width="80%">巡邏組2</th>
</tr>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-003" id="cb_grp3"/></th>
<th width="80%">巡邏組3</th>
</tr>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-004" id="cb_grp4"/></th>
<th width="80%">巡邏組4</th>
</tr>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-005" id="cb_grp5"/></th>
<th width="80%">巡邏組5</th>
</tr>
<tr>
<th width="20%"><input name="gpsGroup" type="checkbox" value="equ-006" id="cb_grp6"/></th>
<th width="80%">巡邏組6</th>
</tr>
</thead>
</table>
<div align="center" >
<input name="" type="button" class="scbtn" value="確定" id="btn_search" style="margin-top:50px"/>
<!-- <input name="" type="button" class="scbtn" value="模擬" id="btn_moni" style="margin-top:20px;margin-left: 10px"/> -->
</div>
</div>
<div style="width:79%; height:100%; float:right;">
<div id="gps_map" style="width: 100%;height: 500px;overflow: hidden;margin:0;font-family:"微軟雅黑";">
</div>
<div style="margin-top: 20px">
<table class="tablelist">
<thead>
<tr>
<th width="5%">序號</th>
<th width="15%">班組名稱</th>
<th width="15%">速度</th>
<th width="20%">採集時間</th>
</tr>
</thead>
<tbody id="contentTable">
<!--
<tr>
<td colspan="4"><div align="center"><img src="images/loading.gif" width=40px height=40px/><span>正在載入資料，請稍後......</span></div></td>
</tr>
-->
</tbody>
</table>
</div>
</div>
</div>
<!-- 提示的浮層 -->
<div class="okdiv">
<div class="oktip">
<div class="oktiptop"><span>提示資訊</span><a></a></div>
<div class="oktipinfo">
<span><img src="images/okicon.png" id="info_img"/></span>
<div class="oktipright">
<p id="info_tip1">操作失敗！</p>
<cite id="info_tip2">請至少選擇一個巡邏組！</cite>
</div>
</div>
<div class="oktipbtn">
<input name="input" type="button" class="scbtn" value="確定" id="btn_okdiv_ok" style="margin-left: 60px;"/>
</div>
</div>
</div>
</body>
</html>
JS程式碼：
$(document).ready(function() {
var map = new BMap.Map("gps_map"); //建立Map例項
map.centerAndZoom(new BMap.Point(118.XXXX, 37.XXXX), 17); //初始化地圖，設定中心點座標和地圖級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件
map.addControl(new BMap.NavigationControl()); //新增地圖縮放控制元件
map.addControl(new BMap.ScaleControl()); //新增比例尺控制元件
map.setCurrentCity("某城市"); //設定地圖顯示的城市，這項是必須的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
var objList = null;
var groupIds = "";
var intetv = undefined;
$('input[name="gpsGroup"]').each(function(){
$(this).attr("checked",true);
});
$("#btn_search").click(function(){
$("#contentTable").html("");
var checked = [];
$('input[name="gpsGroup"]:checked').each(function(){
checked.push($(this).val());
});
groupIds = "";
for(var i=0;i<checked.length;i++){
if(checked.length == 1){
groupIds = "'"+checked[i] +"'";
}else{
if(i == 0){
groupIds = "'"+checked[i] +"','";
}else{
if(i == checked.length-1){
groupIds += checked[i]+"'";
}else{
groupIds += checked[i] +"','";
}
}
}
}
if(groupIds.length == 0){
$("#info_img").attr("src","images/failicon.png");
$("#info_tip1").html("操作失敗！");
$("#info_tip2").html("請至少選擇一個巡邏組！");
$(".okdiv").fadeIn(200);
}else{
map.clearOverlays();
if(intetv != undefined){
clearInterval(intetv);
}
refreshData(groupIds);
intetv = setInterval(function() {
map.clearOverlays();
refreshData(groupIds);
}, 5000);
}
});
$("#btn_okdiv_ok").click(function(){
$(".okdiv").fadeOut(200);
});
$(".oktiptop a").click(function(){
$(".okdiv").fadeOut(200);
});
$("#btn_moni").click(function(){
alert("模擬資料");
$.post("../gps.do?method=editCurrentPosition",
{"groupIds" : "adad" },
function(data){
});
});
//更新頁面資料
function refreshData(groupIds){
$.post("../gps.do?method=getCurrentPosition",
{"groupIds" : groupIds },
function(data){
var htmlStr = "";
var o = eval(data);
objList = o.pointList;
if(objList.length != 0){
var points = [objList.length];
for(var i=0;i<objList.length;i++){
var obj = objList[i];
htmlStr +=
"<tr name='coordsRow' id='row_"+i+"' "+(i%2==0?"":"class='otr'")+">"+
"<td style='padding-left:10px;'>"+(i<9?("0"+(i+1)):(i+1))+"</td>"+
"<td>"+obj.groupName+"</td>"+
"<td>"+obj.speed+"</td>"+
"<td>"+obj.collectDate+"</td></tr>";
var pointTemp = new BMap.Point(obj.x,obj.y);
var myIcon_lv = new BMap.Icon("images/marker_lv25.png", new BMap.Size(25, 25), {
// 指定定位位置。
// 當標註顯示在地圖上時，其所指向的地理位置距離圖示左上
// 角各偏移10畫素和25畫素。
offset: new BMap.Size(10, 25),
// 設定圖片偏移。
// 當您需要從一幅較大的圖片中擷取某部分作為標註圖示時，您
// 需要指定大圖的偏移位置，此做法與css sprites技術類似。
//imageOffset: new BMap.Size(0, 0 - 25) // 設定圖片偏移
});
var myIcon_lan = new BMap.Icon("images/marker_lan25.png", new BMap.Size(25, 25), {
offset: new BMap.Size(10, 25),
//imageOffset: new BMap.Size(0, 0 - 25) // 設定圖片偏移
});
var myIcon_hong = new BMap.Icon("images/marker_hong25.png", new BMap.Size(25, 25), {
offset: new BMap.Size(10, 25),
//imageOffset: new BMap.Size(0, 0 - 25) // 設定圖片偏移
});
var markerTemp = null;
if(obj.status == 1){
if(obj.speed == 0){
markerTemp = new BMap.Marker(pointTemp,{icon: myIcon_lan});
}else{
markerTemp = new BMap.Marker(pointTemp,{icon: myIcon_lv});
}
}else{
markerTemp = new BMap.Marker(pointTemp,{icon: myIcon_hong});
}
map.addOverlay(markerTemp);
markerTemp.setAnimation(BMAP_ANIMATION_BOUNCE);
points[i] = pointTemp;
}
map.setViewport(points);
}else{
map.clearOverlays();
}
if(htmlStr == ""){
htmlStr = "<tr><td colspan='4' align='center'>暫無資料</td></tr>";
}
$("#contentTable").html(htmlStr);
$("tr[name=coordsRow]").click(function(){
var i = $(this).attr("id").split("_")[1];
var pointSelected = new BMap.Point(objList[i].x,objList[i].y);
map.setCenter(pointSelected);
});
});
}
});