百度地图 起点 终点 线路 轨迹查询

标签：style   http   color   io   os   ar   java   for   sp   

<%@ 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>

百度地图 起点 终点 线路 轨迹查询

标签：style   http   color   io   os   ar   java   for   sp   

原文地址：http://www.cnblogs.com/qizhinan/p/4042472.html