<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<html >
<head>
<title>订单轨迹图</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" type="text/css" href="demo.Default.css" />
<script type="text/ecmascript" language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=4b10da3ab0afc310306e14dd6303204b"></script>
<script type="text/ecmascript" language="javascript">
var mapObj, polyline, n, p, jsonData, markerLine;
//标记点
var markers = [];
$(document).ready(
function () {
$("#btnSearch").click(
function () {
InitOrderLineDataList();
});
});
function Init() {
n = getQueryStringV(location.href, "n");
p = getQueryStringV(location.href, "p");
var orderID = getQueryStringV(location.href, "orderID");
$("#txtOrderID").attr("value", orderID);
mapObj = new AMap.Map("iCenter", {
view: new AMap.View2D({
center: new AMap.LngLat(114.053535, 22.544903), //地图中心点
zoom: 12 //地图显示的缩放级别
})
});
//地图中添加地图操作ToolBar插件
mapObj.plugin(["AMap.ToolBar"], function () {
toolBar = new AMap.ToolBar();
mapObj.addControl(toolBar);
});
if (orderID != null && orderID != "") {
InitOrderLineDataList();
}
};
//添加线覆盖物
function addLine(orderLine) {
var lineArr = new Array(); //创建线覆盖物节点坐标数组
for (var i = 0; i < orderLine.length; i++) {
lineArr.push(new AMap.LngLat(orderLine[i].Lon, orderLine[i].Lat));
}
polyline = new AMap.Polyline({
path: lineArr, //设置线覆盖物路径
strokeColor: "#3366FF", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
strokeStyle: "solid", //线样式
strokeDasharray: [10, 5] //补充线样式
});
polyline.setMap(mapObj);
}
function InitOrderLineDataList() {
var orderID = $("#txtOrderID").val();
if (orderID == null) {
alert("请输入订单号！");
return;
}
var pUrl = "TopOneDriverWebService.asmx/SelectOrderTravelTrack";
//alert("{orderID:'" + orderID + "',n:'" + n + "',p:'" + p + "'}");
//alert(pUrl);
$.ajax({
url: pUrl,
type: "POST",
contentType: "application/json;utf-8",
dataType: 'json',
data: "{orderID:'" + orderID + "',n:'" + n + "',p:'" + p + "'}",
timeout: 10000, //超时时间：10秒
success: function (msg) {
jsonData = $.parseJSON(msg.d);
if (jsonData.Code == 0 || jsonData.Code == -1) {
alert(jsonData.Msg);
//alert("1");
}
else {
//alert("2");
var orderList = jsonData.Data.Table1;
addPoint(orderList[0].Lon, orderList[0].Lat, jsonData.Data.Table[0].StartInfomation, "./image/green.png");
addPoint(orderList[orderList.length - 1].Lon, orderList[orderList.length - 1].Lat, jsonData.Data.Table[0].EndInfomation, "./image/red.png");
if (orderList != null && orderList.length > 0) {
//更新地图中心点
mapObj.setZoomAndCenter(12, new AMap.LngLat(orderList[0].Lon, orderList[0].Lat));
addLine(orderList);
completeEventHandler(orderList);
}
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("未查询到订单行程轨迹");
//alert(XMLHttpRequest.readyState);
//alert(XMLHttpRequest.responseXML);
//alert(XMLHttpRequest.responseText);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.statusText);
//alert(XMLHttpRequest.getAllResponseHeaders());
//alert(XMLHttpRequest.getResponseHeader("headerLabel"));
//alert(textStatus);
//alert(errorThrown);
}
});
}
//实例化点标记
function addPoint(x, y, driverContent, imgUrl) {
marker = new AMap.Marker({
icon: imgUrl,
position: new AMap.LngLat(x, y)
});
marker.setMap(mapObj); //在地图上添加点
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = AMap.event.addListener(marker, 'click', function (e) {
openInfo(x, y, driverContent);
});
markers.push(marker);
}
//地图图块加载完毕后执行函数
function completeEventHandler(orderLine) {
if (markerLine != null) {
markerLine.setMap(null);
}
markerLine = new AMap.Marker({
icon: "./image/car_03.png", //marker图标，直接传递地址url
position: new AMap.LngLat(orderLine[0].Lon, orderLine[0].Lat)
});
markerLine.setMap(mapObj); //在地图上添加点
markers.push(markerLine);
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = AMap.event.addListener(markerLine, 'click', function (e) {
markerLine.moveAlong(lineArr, 5000);
});
var lineArr = new Array(); //创建线覆盖物节点坐标数组
for (var i = 0; i < orderLine.length; i++) {
lineArr.push(new AMap.LngLat(orderLine[i].Lon, orderLine[i].Lat));
}
//绘制轨迹
var polyline = new AMap.Polyline({
map: mapObj,
path: lineArr,
strokeColor: "#00A", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线宽
strokeStyle: "solid"//线样式
});
mapObj.setFitView();
markerLine.moveAlong(lineArr, 10000);
}
// function startAnimation() {
// marker.moveAlong(lineArr, 500);
// }
// function stopAnimation() {
// marker.stopMove();
// }
function openInfo(x, y, driverContent) {
var inforWindow = new AMap.InfoWindow({
autoMove: true,
content: driverContent
});
inforWindow.open(mapObj, new AMap.LngLat(x, y));
}
//截取url数据
function getQueryStringV(vhref, name) {
// 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空
if (vhref.indexOf("?") == -1 || vhref.indexOf(name + '=') == -1) {
return '';
}
// 获取链接中参数部分
var queryString = vhref.substring(vhref.indexOf("?") + 1);
// 分离参数对 ?key=value&key2=value2
var parameters = queryString.split("&");
var pos, paraName, paraValue;
for (var i = 0; i < parameters.length; i++) {
// 获取等号位置
pos = parameters[i].indexOf('=');
if (pos == -1) {
continue;
}
// 获取name 和 value
paraName = parameters[i].substring(0, pos);
paraValue = parameters[i].substring(pos + 1);
if (paraName == name) {
return unescape(paraValue.replace(/\+/g, " "));
}
}
return '';
}
</script>
</head>
<body onload="Init()">
订单号<input type="text" id="txtOrderID" value="144760" /><button id="btnSearch">查询</button>
<div id="iCenter" style="height:95%;"></div>
</body>
</html>
