百度地图车辆历史轨迹jsp与后台访问数据

最新推荐文章于 2022-06-02 09:28:11 发布
最新推荐文章于 2022-06-02 09:28:11 发布
阅读量441 收藏 2
点赞数
分类专栏： 前后端交互 文章标签： jquery html css javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luxin120/article/details/111039706
版权

百度地图车辆历史轨迹

一、日期控件：

链接: https://pan.baidu.com/s/1NWTKTCbA4I9iwY_Y6CQM0g 提取码: x9pp 复制这段内容后打开百度网盘手机App，操作更方便哦

二、jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>车辆历史轨迹</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--mobiscroll日期插件-->
    <link href="../mobiscroll_date.css" rel="stylesheet" type="text/css" />
    <script src="../core/js/date/mobiscroll_date.js" type="text/javascript"></script>
    <script src="../core/js/date/mobiscroll.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak='创建应用的AK'"></script>
    <style type="text/css">
        html{
            height:100%
        }
        body{
            height:100%;
            margin:0px;
            padding:0px
        }
        #allmap {
            margin: 8px;
            width: 95%;
            height: 70%;
            overflow: hidden;
        }
        .searchdiv{
            height: 110px;
            background-color: #f5f5f5;
            margin: 10px;
            border-radius: 8px;
            text-align: center;
        }
        .searchdiv .search {
            font-size: 16px;
            padding-left: 10px;
            padding-top: 5px;
        }
        .searchdiv .search .searchcarhistory {
            height: 30px;
            width: 240px;
            margin-top: 5px;
        }
        input{
            width: 150px;
            height: 25px;
            border-radius: 5px;
            outline-style: none;
            border: 1px solid #ccc;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        label {
            font-size: 16px;
        }
        #toptitle{
            background-color:#2695D0;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            color:#ffffff;
        }
        #toptitle .htitle{
            font-size: 20px;
            font-weight: bold;
            margin: 0;
            padding: 0;
            text-align: center;
        }
    </style>
    <script>
        var _carId = '车辆Id';
        var now = new Date();
        var currYear = now.getFullYear();
        var currMonth = now.getMonth() + 1;
        var currDay = now.getDate();
        var currHours = now.getHours(); //获取当前小时数(0-23)
        var currMinutes = now.getMinutes(); //获取当前分钟数(0-59)
        //var currSeconds = now.getSeconds(); //获取当前秒数(0-59)

        var _begintime = "";
        var _endtime = "";
        //mobiScroll插件选项
        var opt1 = {
            preset : 'datetime', //日期，可选：date\datetime\time\tree_list\image_text\select
            theme : 'android-ics light', //皮肤样式，可选：default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
            display : 'modal', //显示方式 ，可选：modal\inline\bubble\top\bottom
            mode : 'scroller', //日期选择模式，可选：scroller\clickpick\mixed
            lang : 'zh',
            dateFormat:'yy-mm-dd',
            setText : '确认', //确认按钮名称
            cancelText : '取消', //取消按钮名籍我
            dateOrder : 'yyyymmdd', //面板中日期排列格式
            dayText : '日',
            monthText : '月',
            yearText : '年', //面板中年月日文字
            hourText: '时',
            minuteText: '分',
            showNow : false,
            nowText : "今",
            endYear: currYear +100, //结束年份
            //minDate: new Date(currYear, currMonth - 1, currDay - 7),
            maxDate: new Date(currYear, currMonth - 1, currDay+1),
            onSelect:function(textVale,inst){ //选中时触发事件
                $("#begintime").val(textVale);
            },
            onClose:function(textVale,inst){ //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel

            }
        };
        var opt2 = {
            preset : 'datetime', //日期，可选：date\datetime\time\tree_list\image_text\select
            theme : 'android-ics light', //皮肤样式，可选：default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
            display : 'modal', //显示方式 ，可选：modal\inline\bubble\top\bottom
            mode : 'scroller', //日期选择模式，可选：scroller\clickpick\mixed
            lang : 'zh',
            dateFormat:'yy-mm-dd',
            setText : '确认', //确认按钮名称
            cancelText : '取消', //取消按钮名籍我
            dateOrder : 'yyyymmdd', //面板中日期排列格式
            dayText : '日',
            monthText : '月',
            yearText : '年', //面板中年月日文字
            hourText: '时',
            minuteText: '分',
            showNow : false,
            nowText : "今",
            endYear: currYear +100, //结束年份
            //minDate: new Date(currYear, currMonth - 1, currDay - 7),
            maxDate: new Date(currYear, currMonth - 1, currDay+1),
            onSelect:function(textVale,inst){ //选中时触发事
                $("#endtime").val(textVale);
            },
            onClose:function(textVale,inst){ //插件效果退出时执行 inst:表示点击的状态反馈：set/cancel

            }
        };
        function GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth()+1;//获取当前月份的日期
            var d = dd.getDate();
            if (m < 10) m = "0" + m;
            if (d < 10) d = "0" + d;
            return y+"-"+m+"-"+d+" 00:00";
        }
        function GetToDateStr() {
            var dd = new Date();
            var y = dd.getFullYear();
            var m = dd.getMonth()+1;//获取当前月份的日期
            var d = dd.getDate();
            var h = now.getHours(); //获取当前小时数(0-23)
            var s = now.getMinutes(); //获取当前分钟数(0-59)
            //var currSeconds = now.getSeconds(); //获取当前秒数(0-59)
            if (m < 10) m = "0" + m;
            if (d < 10) d = "0" + d;
            if (h < 10) h = "0" + h;
            if (s < 10) s = "0" + s;
            return y+"-"+m+"-"+d+" "+h+":"+s;
        }
        function _search() {
            _starttime = $("#begintime").val();
            _endtime = $("#endtime").val();
            _queryParam = {
                carId: '车辆id',
                startTime: _starttime,
                endTime: _endtime
            }
            getmaphistory(_queryParam);
        }
    </script>
</head>
<body>
<div id="toptitle">
    <h1 class="htitle">车辆历史轨迹</h1>
</div>
<div class="applydiv" id="applydiv">
    <div class="searchdiv" id="searchdiv">
        <div class="search">
            <label for="begintime">开始时间：</label>
            <input type="text" id="begintime" name="begintime"/>
        </div>
        <div class="search">
            <label for="endtime">结束时间：</label>
            <input type="text" id="endtime" name="endtime"/>
        </div>
        <div class="search">
            <input type="button" class="searchcarhistory" id="searchcarhistory" value="查询" onclick="_search()">
        </div>
    </div>
</div>
<div id="allmap"></div>
<script>
    //经度
    var lon = 0;
    //纬度
    var lat = 0;
    var _address = "";
    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.enableScrollWheelZoom(true);    //启用滚轮放大缩小，默认禁用
    //map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.centerAndZoom(new BMap.Point(114.08997, 22.54502), 10); // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.ScaleControl());                    // 添加默认比例尺控件
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));                    // 左上
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));                    // 右上
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));                    // 左下
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));                    // 右下
    map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，仅包含缩放按钮
    $(function(){
        $("#begintime").mobiscroll(opt1);
        $("#begintime").val(GetDateStr(0));
        $("#endtime").mobiscroll(opt2);
        $("#endtime").val(GetToDateStr());
        _queryParam = {
            carId: '车辆id',
            startTime: GetDateStr(0),
            endTime: GetToDateStr()
        }
        getmaphistory(_queryParam);
    });

    function getmaphistory(_queryParam){
        map.clearOverlays();  //清除所有覆盖物
        $.ajax({
            url:'访问路径',
            type: "post",
            timeout: 30000,
            dataType: "json",
            data : _queryParam,
            success : function(result) {
                if(result.code == '1'){
                    var res = result.data.data;
                    var points = [];
                    //console.log("经纬度："+res)
                    if(res.length > 0){
                        map.centerAndZoom(new BMap.Point(res[0].lonc, res[0].latc), 10);
                        for (var i = 0; i < res.length; i++) {
                            lat = res[i].latc;   //获取纬度
                            lon = res[i].lonc;   //获取经度
                            points[i]=new BMap.Point(lon, lat);
                        }
                        var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:3, strokeOpacity:1.0});   //创建折线
                        map.addOverlay(polyline);
                    }else{
                        alert("该时间段没有行车记录!")
                    }
                } else{
                    alert(result.desc)
                }
            },
            error:function(xmlhttp){
                alert("网络异常！");
            }
        });
    }

</script>
</body>
</html>
小白博主
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
共享单车之数据可视化
Junds0的博客
11-08 825
上图中，线段AB是路程线，只要绘制出CBD就可以实现箭头效果，为了灵活绘制箭头，需要用户自定义箭头的长度（r）和角度（angle）。给起点和终点都创建标注，描述起点为乡里乡情铁锅炖南228米，终点为擎天矿用材料有限公司北609米，要求设置的字体大小为。上图可以看到路程，但只有一条线并无法详细的向我们展示信息，因此我们可以通过给路程线添加标注位置和方向箭头。再根据B点、小绿点的屏幕坐标及angle角度，计算出C，D两点的屏幕坐标。利用map的坐标转换方法，将C，D两点的屏幕坐标转成经纬度表示的坐标。
JSP实现简单的用户登录并显示出用户信息的方法
01-08
本文实例讲述了JSP实现简单的用户登录并显示出用户信息的方法。分享给大家供大家参考。具体实现方法如下： login.jsp 代码如下:<%@ page language=”java” import=”java.util.*” pageEncoding=”GB18030″%>  <%  String path = request.getContextPath();  String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;  %> 
关于百度地图与后台数据的结合使用
lanselianyu的博客
10-08 3281
关于百度地图与后台数据的结合使用 工作中百度地图总是少不了 关键点在于怎么去使用百度地图跟后台获取的数据结合 此案例仅仅是个人在项目中使用的一种方式 创建一个company.data.js.jsp的js页面内容如下 <%@ page pageEncoding="UTF-8"%> <script type="text/javascript"> var companyid = ""; //页面加载 通过AJAX异步调
js使用百度地图api绘制单、多线路
Jul的博客
06-02 2698
js使用百度地图api绘制单、多线路
Java物流项目第六天 车辆轨迹服务开发(pd-netty、pd-druid)
fegus的博客
04-21 1942
品达物流TMS项目 第7章 车辆轨迹服务开发(pd-netty、pd-druid) 1. apache druid概述 1.1 druid介绍 Apache Druid是一个开源、分布式、高性能的实时数据分析的数据存储系统。能快速的实现查询与数据分析，具有高可用、高拓展的能力。 中文网址：http://www.apache-druid.cn/ Druid的常用应用领域包括： 点击流分析(web和移动分析) 网络遥测分析(网络性能监控) 服务器指标存储 供应链分析（制造指标） 应用程序性能度量 数字营销/广
百度地图显示多点坐标并连线显示用户轨迹
03-07
读取移动端存入数据库的坐标位置信息显示在百度地图上并连线显示用户轨迹。 程序为mysql数据库，location.sql为数据库导出文件 数据库连接信息见BaiduMap\src\com\pandora\db\SqlConnection.java 运行环境：...
使用百度地图JavaScript API 画轨迹，给出自定义图标和标注
02-07
traceDraw.jsp画给定点的运动轨迹，personTraceMap.jsp根据位置数组画运动轨迹。person.png为自行准备的图标
ajax 提交数据到后台jsp页面及页面跳转问题
11-30
ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给...
基于JSP的企业车辆管理系统设计与实现.doc
05-31
本系统前台主要使用JSP作为开发语言，后台使用SQServer作为数据库管理系统，开发环境是MyEclipse，服务器采用tomcat，开发出的一个基于Web技术的B/S结构的企业车辆管理系统。 关键词：车辆，管理系统，JSP，B/S结构
jsp页面数据分页模仿百度分页效果(实例讲解)
10-19
下面小编就为大家带来一篇jsp页面数据分页模仿百度分页效果(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
车辆轨迹回放
12-14
示范使用SuperMap iServer Java 6R通过时间函数触发为FeaturesLayer添加PictureMarkerStyle和设置指定的时间段上在属性的开始值和结束值之间发生的动画两种方式实现车辆行走的效果；采用的开发模式是Flex+iServer Java 6R
Android车辆轨迹平滑移动
10-19
基于高德地图3D API做的点平滑移动效果，Android车辆轨迹平滑移动【旧版本】
仿共享单车显示地图中心位置附近的markers
10-25
模仿共享单车，显示地图中心附近3公里内的markers，移动地图中心位置（2公里以上），markers时时刷新。我在【上海】放置了5k个markers，写在了json文件中，请将地图移动至【上海】进行验证。使用的是百度地图，如果地图不能正常显示，请更换AndroidManifest.xml中的百度地图密钥。过几天会出个高德地图版。
谷歌地图车辆运动轨迹
09-17
谷歌地图车辆运动轨迹（根据坐标地址），纯粹自己用来备份资源，以后自己方便用到。
JSP页面使用百度地图定位
08-07
jsp结合springmvc使用百度地图api根据经纬度进行定位
jsp学习之路之实现一个用户信息页面并实现跳转到另外一个页面输出用户的相关信息
热门推荐
茕夜
09-12 1万+
1.首先，打开MyEclipse工具，新建一个Web Project
js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌
weixin_39639505的博客
06-23 1542
版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！恰饭广告注意：1.百度地图ak换成自己在百度地图官网申请2.建议使用firefox浏览器，google被墙无法调用gps3.发布到服务器必须使用https，对于localhost和本地测试不用4.电脑开启位置服务，手机打开gps定位5.百度地图坐标和gps坐标不一致，要在百度地图正确显示位置必须把gps坐标转为百度坐标con...
jsp中的用户跟踪
a271256939的博客
01-07 333
为什么要进行会话跟踪首先用户浏览网页或者其他网页的操作信息是需要被记录已提供更好的服务的，例如购物车的购物清单，用户买多个东西需要多次请求，而这些请求需要被记录来，对用户的逻辑上相关联的多次不同的访问请求进行记录就叫用户跟踪。 http协议是无状态协议，也就是说HTTP协议无法将同一个用户的多个请求关联在一起，每次请求都是独立的。这也就意味着同一个用户的多次访问是无法记忆的，需要借助其他手段。 会话
jsp从数据库调用经纬度在百度地图上显示路径轨迹
最新发布
06-28
3. 使用百度地图API，在JSP页面中嵌入地图，并将Java对象中的经纬度信息传递给地图API，绘制路径轨迹。 4. 可以使用JavaScript或者jQuery等前端技术，对地图进行交互操作，比如缩放、拖拽等。 需要注意的是，百度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值