首页 > 代码库 > 百度地图 起点 终点 线路 轨迹查询
百度地图 起点 终点 线路 轨迹查询
<%@ 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://www.mamicode.com/"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=http://www.mamicode.com/"查 询" /> </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=http://www.mamicode.com/"<%=(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><style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style><style type="text/css">.csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }</style>
百度地图 起点 终点 线路 轨迹查询
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。