借用百度地图实现车辆轨迹功能
效果图如下：
注册百度地图开发者账户，创建应用，加入到代码里边即可。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o8Twp8m3Aawus2Tyts9dz8lWW"></script>
前段页面源码：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CLGJ.aspx.cs" Inherits="PDAHD.Controls.ZFDD.CLGJ" %> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>根据地址查询经纬度</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 7 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o8Twp8m3Aawus2Tyts9z8lWW"></script> 8 <script src="../../Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script> 9 <link href="../../Styles/XMSYZB/XMSYZB.css" rel="stylesheet" type="text/css" /> 10 <style type="text/css"> 11 .body{ font-size:10px; background:#aaccff;} 12 .box{width:100%;margin:auto;} 13 .content{position: absolute;margin-top:10px;width:100%; height:100%;border: 1px solid gray; overflow:auto;} 14 .right{ float:right; margin-top:10px;width:22%;} 15 .right .car{ height:30px; margin-top:5px;} 16 .right .time input{ width:35%; cursor:pointer;} 17 .input{ cursor:pointer;} 18 .right .search{ height:30px; margin-top:20px;} 19 .left{ float:right; border:1px solid #aaccff} 20 21 </style> 22 </head> 23 <body class="body"> 24 <form id="Form1" runat="server" > 25 <div class="box"> 26 <div style=" margin:5px;"> 27 <div class="car"><b>查询车辆:</b><asp:DropDownList runat="server" ID="txt_Car" Width="20%"></asp:DropDownList> 28 <b>查询时间:</b> 29 <input id="from" class="Wdate input" type="text" runat="server" onfocus="var to=$dp.$('to');WdatePicker({readOnly:true,onpicked:function(){to.focus();},maxDate:'#F{$dp.$D(\'to\')}'})"/> 30 至 31 <input id="to" class="Wdate input" type="text" runat="server" onfocus="WdatePicker({readOnly:true,minDate:'#F{$dp.$D(\'from\')}'})"/> 32 <input type="button" class="BUTTON" value="查 询" onclick="searchCarGraph();"/> 33 </div> 34 <div id="container" class="content left"> 35 </div> 36 </div> 37 </div> 38 <div id="vLoading" class="vLoading" style="display: none; position: absolute; left: 40%; 39 top: 35%"> 40 正在加载数据，请稍候... 41 </div> 42 </form> 43 </body> 44 <script type="text/javascript"> 45 var json_data = ""; //全局变量 46 //创建和初始化地图函数： 47 function initMap() { 48 createMap(); //创建地图 49 setMapEvent(); //设置地图事件 50 addMapControl(); //向地图添加控件 51 } 52 //创建地图函数： 53 function createMap() { 54 var map = new BMap.Map("container"); //在百度地图容器中创建一个地图 55 var point = new BMap.Point(121.547873, 31.198445); //定义一个中心点坐标 56 map.centerAndZoom(point, 11); //设定地图的中心点和坐标并将地图显示在地图容器中 57 window.map = map; //将map变量存储在全局 58 map.clearOverlays(); //情况所有标点 59 } 60 61 //地图事件设置函数： 62 function setMapEvent() { 63 map.enableDragging(); //启用地图拖拽事件，默认启用(可不写) 64 map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 65 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写) 66 map.enableKeyboard(); //启用键盘上下左右键移动地图 67 } 68 //地图控件添加函数： 69 function addMapControl() { 70 map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE })); //向地图中添加缩放控件 71 map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 })); //向地图中添加缩略图控件 72 map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件 73 map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角小地图 74 //向地图中添加红点 75 var pointArray = new Array(); 76 for (var i = 0; i < json_data.length; i++) { 77 var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点 78 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 79 map.addOverlay(marker); //增加点 80 pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]); 81 var content = $("#txt_Car").find("option:selected").text() + " " + json_data[i][2] + "<br/><br/>经度：" + json_data[i][0] + "<br/>纬度：" + json_data[i][1]; 82 var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>"); 83 var label = new BMap.Label(content, { offset: new BMap.Size(20, -10) }); 84 marker.setLabel(label); 85 } 86 //让所有点在视野范围内 87 map.setViewport(pointArray); 88 //划折线到地图上边 89 var polyline = new BMap.Polyline(pointArray, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 }); //创建折线 90 map.addOverlay(polyline); //增加折线 91 } 92 initMap(); //创建和初始化地图 93 function searchCarGraph() { 94 if ($("#txt_Car").val() == "") { 95 alert("请先选择要查询的车辆！"); 96 return; 97 } 98 $.ajax({ 99 type: "GET", 100 url: "../../AjaxHandler.ashx", 101 dataType: "text", 102 data: "method=searchCarGraph&&tot=" + $("#to").val() + "&&fromt=" + $("#from").val() + "&&carID=" + $("#txt_Car").val(), 103 beforeSend: function () { 104 $("#vLoading").show(); 105 }, 106 complete: function () { 107 $("#vLoading").hide(); 108 }, 109 cache: false, 110 success: function (data) { 111 if (data) { 112 json_data = eval(data); 113 if (json_data != "") { 114 initMap(); 115 } 116 else { 117 alert("暂无数据！"); 118 } 119 } 120 } 121 }); 122 } 123 </script> 124 </html>
后台（C#）：
/// <summary>
/// 地图返回车辆轨迹
/// </summary>
public void searchCarGraph()
{
int carId = Common.GetQueryValue<int>("carID", 0);//车辆ID
string fromt = Common.GetQueryValue<string>("fromt","");//起时间
string tot = Common.GetQueryValue<string>("tot", "");//止时间
StringBuilder retVal = TF_Car_BLL.SearchTransferBill(carId, Convert.ToDateTime(fromt),Convert.ToDateTime(tot));
Response.Write(retVal.ToString());
Response.End();
}
/// <summary>
/// 查找车辆轨迹
/// </summary>
/// <param name="carId">车辆ID</param>
/// <param name="fromt">起时间</param>
/// <param name="tot">止时间</param>
/// <returns></returns>
public static StringBuilder SearchTransferBill(int carId,DateTime fromt,DateTime tot)
{
using (PDAHDEntities ad = new PDAHDEntities())
{
StringBuilder sb = new StringBuilder();
string sql = @"";
if(carId!=0)
{
sql +=" and t.Transport_Man="+carId;
}
if(!string.IsNullOrEmpty(fromt.ToShortDateString()))
{
sql +=string.Format(" and t.Receive_Date>='{0}'",fromt);
}
if(!string.IsNullOrEmpty(fromt.ToShortDateString()))
{
sql +=string.Format(" and t.Receive_Date<='{0}'",tot);
}
sql += "ORDER BY t.Receive_Date DESC";
DataTable dt = DBFunction.ExecuteDataTable(sql);
sb.Append("[");
foreach (DataRow dr in dt.Rows)
{
if (!string.IsNullOrEmpty(dr["Location"].ToString()))
{
string[] temp = dr["Location"].ToString().Split(',');
//sb.Append("[" + temp[0] + "," + temp[1] + ",'" + Convert.ToDateTime(dr["Receive_Date"].ToString()).ToString("yyyy-MM-dd") + "'," + dr["NAME"].ToString() + "],");
sb.Append("[" + temp[0] + "," + temp[1] + ",'" + Convert.ToDateTime(dr["Receive_Date"].ToString()).ToString("yyyy-MM-dd") + "'," + "],");
}
}
sb.Replace(",", "", sb.Length - 1, 1).Append("]").ToString();
return sb;
}
}
至此。实现效果。。后台数据按照前端要求json格式返回即可。
