<!--<!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>