<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PathQueryList.aspx.cs" Inherits="PathQuery_PathQueryList" MasterPageFile="~/Master/Default.master" meta:resourcekey="PageResource1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="script" runat="Server">
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<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: 900px;
height: 600px;
}
#control {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GaKliY8jGUtxre44yGCXFwDu"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
<table width="100%" >
<tr valign="top">
<td>
<div class="panel">
<div class="title">轨迹查询</div>
<div class="content">
<table class="tablesearch">
<tr>
<th>
开始时间：
</th>
<td>
<input type="text" name="txtStartDate" id="txtStartDate" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })" />
</td>
<th>
结束时间：
</th>
<td>
<input type="text" name="txtEndDate" id="txtEndDate" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss' })" />
<input type="button" id="btnQuery" value="查 询" />
</td>
<td >
</td>
</tr>
</table>
</div>
<div class="content" style="height:500px">
<div id="allmap"></div>
</div>
</div>
</td>
</tr>
</table>
<input type="hidden" name="hidUserId" id="hidUserId" value="<%=(Request.QueryString.Count>0?Request.QueryString[0].Replace("'null',",""):"") %>" />
<script type="text/javascript">
function OpenImg(id) {
var obj = new Object();
obj.name = "img";
window.showModalDialog("../image.aspx?id=" + id, obj, "dialogWidth=900px;dialogHeight=700px");
}
function checkEndTime() {
var startTime = $("#txtStartDate").val();
var start = new Date(startTime.replace("-", "/").replace("-", "/"));
var endTime = $("#txtEndDate").val();
var end = new Date(endTime.replace("-", "/").replace("-", "/"));
if (end < start) {
return false;
}
return true;
}
// 百度地图API功能
var map = new BMap.Map("allmap",{mapType:BMAP_HYBRID_MAP});
map.centerAndZoom(new BMap.Point(118.93272879287, 32.157743250202), 18);
map.enableScrollWheelZoom();
var mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP] });
map.addControl(mapType1);
function Read() {
if ($("#txtStartDate").val().length == 0 || $("#txtEndDate").val().length == 0) {
alert("时间不能为空！");
return;
}
if (!checkEndTime()) {
alert("结束时间必须晚于开始时间！");
return;
}
ClearAllPoint();
$.ajax({
type: 'post',
cache: false,
url: 'getPoints.aspx/GetLinePoints',
data: '{userId:"' + $("#hidUserId").val() + '",startDate:"' + $("#txtStartDate").val() + '",endDate:"' + $("#txtEndDate").val() + '"}',
contentType: 'application/json',
datatype: 'json',
success: function (data) {
var obj = eval(data.d);
if (obj == null) {
return;
}
else {
mapCommon.drawRoad(obj, "#ff0000", true);
}
},
error: function(XmlHttpRequest,textStatus, errorThrown) {
alert("失败" + XmlHttpRequest.responseText);
}
});
}
function ClearAllPoint() {
map.clearOverlays(); //清除地图覆盖物
}
// 地图常用功能
var mapCommon = (function () {
// 经纬度转换
this.transformCoord = function (source) {
if (!source) return null;
var coord;
var ps = source.split(",");
if (ps.length < 2) return;
coord = new BMap.Point(ps[0], ps[1]);
return coord;
};
// 标记油站
this.markStation = function (code, name, coord,imgId, liImg,ico) {
if (!coord) return;
var myIcon;
if (ico== 0) {
myIcon = new BMap.Icon("../images/start.png", new BMap.Size(43, 32));
}
else if (ico == 1) {
myIcon = new BMap.Icon("../images/end.png", new BMap.Size(40, 32));
}
else {
myIcon = new BMap.Icon("../images/here.png", new BMap.Size(23, 32));
}
var marker = new BMap.Marker(coord, { icon: myIcon }); // 创建标注
var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) });
label.setStyle({ borderColor: "#808080", cursor: "pointer" });
map.addOverlay(marker); // 将标注添加到地图中
marker.setLabel(label);
// 窗口
var html;
if (imgId.indexOf('00000000-0000-0000-0000-000000000000') != -1) {
html =
["<h4 style='margin:0 0 5px 0;padding:0.2em 0'>",
name,
"</h4>",
"<p style='text-align:center;'>暂无图片</p>"
];
}
else {
html =
["<h4 style='margin:0 0 5px 0;padding:0.2em 0'>",
name,
"</h4>",
liImg
];
var infoWindow = new BMap.InfoWindow(html.join(""), { enableMessage: false }); // 创建信息窗口对象
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
label.addEventListener("click", function () { map.openInfoWindow(infoWindow, coord); });
}
return marker;
};
// 标记多个油站,setViewport=false
this.markMultiStation = function (stationArray, setViewport) {
var setViewport = !!setViewport;
var coordArray = [];
for (var i = 0; i < stationArray.length; i++) {
var station = stationArray[i];
var coord = transformCoord(station.Coord);
if (coord) {
coordArray.push(coord);
markStation(station.Code, station.Name, coord,'', '',2);
}
}
if (setViewport) {
if (coordArray.length == 1) {
map.centerAndZoom(coordArray[0], 14);
} else {
map.setViewport(coordArray);
}
}
};
// 画路
this.drawRoad = function (data, color, setViewport) {
if (!data) return;
var setViewport = !!setViewport;
var options = {
onSearchComplete: function (results) {
if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
addOverlays(results);
}
},
map: map
};
// 添加覆盖物
function addOverlays(results) {
// 自行添加起点和终点
var start = results.getStart();
var end = results.getEnd();
var viewPoints = [start.point, end.point];
// 获取方案
var plan = results.getPlan(0);
for (var i = 0; i < plan.getNumRoutes() ; i++) {
//addRoute(plan.getRoute(i).getPath());
viewPoints.concat(plan.getRoute(i).getPath());
}
}
// 添加路线
function addRoute(path) {
map.addOverlay(new BMap.Polyline(path, {
strokeColor: color,
enableClicking: false
}));
}
var driving = new BMap.DrivingRoute("广东省", options);
driving.setPolicy(BMAP_DRIVING_POLICY_AVOID_HIGHWAYS) // 避开高速
var pointArr = [];
var p1 = null, p2 = null;
var pStart = null, pEnd = null;
var colorArr = ["#C6A300", "#BF0060", "#5B00AE", "#0000C6", "#008B8B", "#B22222", "#FFD700", "#FF0000", "#40E0D0", "#FF1493"];
$.each(data, function (i) {
var polylinePointsArray = [];
$.each(data[i].lM_RTLocation, function (j, item) {
var x = item.Point.split(",")[0];
var y = item.Point.split(",")[1];
polylinePointsArray[j] = new BMap.Point(x, y);
if (j == 0) {
var coord = transformCoord(item.Point);
pStart = coord;
markStation("", item.UserId, coord, item.ImgId, item.liImg, 0);
if (coord) {
pointArr.push(coord);
if (!p2) {
p2 = coord;
} else {
p1 = p2;
p2 = coord;
driving.search(p1, p2);
}
}
}
else if (j == data[i].lM_RTLocation.length - 1) {
var coord = transformCoord(item.Point);
pEnd = coord;
markStation("", item.UserId, coord, item.ImgId,item.liImg, 1);
if (coord) {
pointArr.push(coord);
if (!p2) {
p2 = coord;
} else {
p1 = p2;
p2 = coord;
driving.search(p1, p2);
}
}
}
else {
if (item.ImgId.indexOf('00000000-0000-0000-0000-000000000000') != -1) {
}
else {
var coord = transformCoord(item.Point);
markStation("", item.UserId, coord, item.ImgId, item.liImg,2);
if (coord) {
pointArr.push(coord);
if (!p2) {
p2 = coord;
} else {
p1 = p2;
p2 = coord;
driving.search(p1, p2);
}
}
}
}
});
var polyline = new BMap.Polyline(polylinePointsArray, { strokeColor: colorArr[i], strokeWeight: 5, strokeOpacity: 1});
map.addOverlay(polyline);
});
if (pointArr.length > 1 && setViewport) {
map.setViewport(pointArr);
}
};
return this;
})();
//window.onload = Read;
$(document).ready(function () {
$("#btnQuery").click(function () {
Read();
});
});
//setInterval("Read()", 1000 * 5);
</script>
</asp:Content>
