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

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

.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; }
.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; }

时间: 2024-10-05 03:10:14

百度地图 起点 终点 线路 轨迹查询的相关文章

使用百度地图API制作线路轨迹播放

1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1) 1.2绘制动态轨迹图(固定间隔时间) 每隔500毫秒读取一个轨迹点,实现a,b两个功能 a增加一条polyline b将marker从先前的point移到当前点 主方法使用setTimeout方法迭代来实现动态循环 Polyline在

基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统(1)

本文描述了一个系统,功能是评价和抽象地理围栏(Geo-fencing),以及监控和分析核心地理围栏中业务的表现. 技术栈:Spring-JQuery-百度地图WEB SDK 存储:Hive-Elasticsearch-MySQL-Redis 什么是地理围栏? LBS系统中,地理围栏指的是虚拟边界围成的部分. tips:这只是一个demo,支撑实习生的本科毕设,不代表生产环境,而且数据已经做了脱密处理,为了安全还是隐去了所有数据. 功能描述 1.地理围栏的圈选 (1)热力图 热力图展示的是,北京市

百度地图的API接口----多地址查询和经纬度

最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" c

安卓实现在百度地图上播放历史轨迹

把一个人一个月的轨迹历史描绘出来,并实现按时间顺序回放.小弟菜鸟一枚,代码质量不高,高手勿喷,谢谢. 关于描点和描线,百度地图都有自己的API,大家都应该会了:至于播放动画,肯定不止一种方法,如果大家有好的方法,分享出来,小弟感激不尽. 我的方法是:在一个线程里,开始播放后,遍历存放item的list,找到当前的item,移除他的marker,然后给他换一个marker,再添加到list里面,然后睡眠:接着就判断,如果不是当前item,该什么样子就什么样子,如此迭代就可以了. http://c.

Android studio 百度地图开发(5)查询周边服务(加油站)

email:[email protected] 开发环境:win7 64位,Android Studio,请注意是Android Studio,使用的导航SDK版本:3.1.0. 百度地图应用(1):Android studio 百度地图开发(1)配置工程.显示地图 百度地图应用(2):Android studio 百度地图开发(2)地图定位 百度地图应用(3):Android studio 百度地图开发(3)地图导航 百度地图应用(4):Android studio 百度地图开发(4)触摸选点

百度地图应用 1.根据地址查询经纬度

首先新建一张html页面.然后引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>根据地址查询经纬度</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/j

基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统(3)-前端实现

转载自:http://www.cnblogs.com/Auyuer/p/8086975.html MoonLight可视化订单需求区域分析系统实现功能: 在现实生活中,计算机和互联网迅速发展,人们越来越趋向于网络,于是我们就有了各种各样的系统,来帮助我们更好地生活.比如对于打车来说,我们也可以通过网上叫车,那么我们就会产生大量的用户订单,特别是对于一些固定时间.固定地点,叫车用户的订单量会非常大,那么我们同样也要很好的管理这些订单.那么我们便要采取某些策略来统计分析,比如我们可以使用区域化的管理

百度地图API的自动定位路线查询

功能如下:打开时自动定位到当前位置(浏览器可能会屏蔽自动定位功能,建议手机查看,或直接打开地址:http://1.jingcode.applinzi.com/test2.html),输入目的地点击搜索后,显示当前位置和目的地之间的线路图.<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

百度地图API,根据经纬度实现车辆移动轨迹绘制

百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连线起来,形成连贯的轨迹线路 4.生成下一个图标后删除上一个绘制的图标,形成小车移动动画感 5.本例使用的是临近的随机坐标点 6.初学者,欢迎大家交流学习 7.查看实例 代码: [html] view plain copy <!DOCTYPE html> <html> <head&