百度地图路书边画线边走

最新推荐文章于 2024-06-25 15:48:39 发布
最新推荐文章于 2024-06-25 15:48:39 发布
阅读量4k 收藏
点赞数
分类专栏： 回顾 百度地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangtao7913/article/details/66972065
版权 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>订单轨迹回放</title>
    <%@include file="/WEB-INF/views/common/common.jsp"%>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
    <!-- 弹出层 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resource/plugins/artDialog/jquery.artDialog.js?skin=default&local=auto"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resource/plugins/artDialog/plugins/iframeTools.js"></script>
    <!-- 当前页面的JS -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/order/leaseOrder/orderLocusMap.js"></script>


    <style type="text/css">
        .stationInfoDivRow {
            margin-bottom: 4px;
        }

        .stationInfoDivLabel {
            display: inline-block;
            width: 60px;
            text-align: center;
        }

        .stationInfoDivValue {
            display: inline-block;
            width: 60px;
            text-align: left;
        }
        html{height:100%}
        /*地图弹出样式*/
        .lanmumc { height:35px; min-width:430px; border-bottom:1px solid #ababab;}
        .lanmumc li { height:33px; width:130px; text-align:center; font-size:14px; border-bottom:2px solid #2e8be0;  color:#2e8be0; line-height:33px; font-family: "微软雅黑"; margin-left:20px;}
        .nrirong ul { line-height:24px;}.nrirong li{ width:135px;}
        .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
        .search_row {
            margin-bottom: 8px;
        }
        .search_column label {
            display: inline-block;
            width: 60px;
            text-align: center;
        }
        .search_column input,select {
            border: 1px solid #ccc;
            height: 20px;
            width: 160px;
            line-height: 20px;
            text-indent: 4px;
            outline: none;
        }
        .search_row .search_column {
            margin-right: 10px;
        }
        .search_columnLast {
            margin-right: 0px;
        }
        .search_button {
            border: 1px solid #bacae3;
            background: #4eb2e1;
            color: #fff;
            width: 35px;
        }
        #searchMapResult {
            z-index: 100;
            margin-top: 2px;
            background: #fff;
            box-shadow: 1px 2px 1px rgba(0,0,0,.15);
            width: 320px;
            max-width: 320px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .station_ctr_title {
            background: #f9f9f9;
            border-bottom: 1px solid #dadada;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            color: #4c4c4c;
            padding-left: 7px;
        }
        #searchMapResult_close {
            outline: none;
            position: relative;
            z-index: 50;
            top: -20px;
            right: -300px;
            width: 12px;
            height: 12px;
            background: url(${pageContext.request.contextPath}/resource/images/popup_close_15d2283.gif) no-repeat;
            border: 0;
            cursor: pointer;
        }
        #searchStationList {
            z-index: 100;
            /* max-height:382px; */
            overflow-x:auto;
            /*     -webkit-user-select:all;
                -moz-user-select:all;
                -ms-user-select:all;
                user-select:all; */
        }

        .station_icon {
            background: url(${pageContext.request.contextPath}/resource/images/markers.png) no-repeat;
            width: 19px;
            height: 25px;
            cursor: pointer;
            float: left;
            *zoom: 1;
            overflow: hidden;
            margin: 2px 3px 0 5px;
            *margin-right: 0px;
            display: inline;
        }
        .station_info_li {
            margin: 2px 0px;
            padding: 0px 5px 5px 0px;
            /* cursor: pointer; */
            overflow: hidden;
            line-height: 17px;
            border-bottom: 1px solid #CCC;
        }
        .station_info_div {
            zoom: 1;
            overflow: hidden;
            padding: 0px 5px;
            /* background-color: rgb(240, 240, 240) */
        }
        .station_info_d {
            float: left;
            font-weight: bold;
            *zoom: 1;
            overflow: hidden;
            padding-right: 5px;
            *margin-right: -3px;
        }
        .station_info_span {
            color: #666;
            display: block;
            zoom: 1;
            overflow: hidden;
        }
        a,a:hover,a:focus{text-decoration:none;background:0 0;}
        .op_table img{vertical-align:middle;max-width:100%;}


        .ml10{margin-left:10px;}
        .mr10{margin-right:10px;}



        .left-operate{width:280px;left:0;top:0;bottom:0;position:fixed;padding:10px;padding-right:0;padding-bottom:0;box-sizing:border-box;}
        .left-operate>div,.rigth-map>div{border:1px solid #B1C3E0;height:100%;}
        .op_table{width:100%;text-align:center;}
        .op_table tr{height:38px;line-height:38px;}
        .op_table tr:nth-child(odd){background:#f5f8f8;}
        .op_table img{cursor:pointer;}

        .rigth-map{width:100%;left:0;top:0;bottom:0;position:fixed;padding-left:290px;padding-top:10px;box-sizing:border-box;}

        .search_row{padding:0 5px;font-size:12px;line-height:30px;background:#fff;border-radius:5px;box-shadow:0 2px 2px #e5e5e5;}
        .search_row img{vertical-align:middle;margin-top:-2px;}
        .search_row  a{display:inline-block;cursor:pointer;}
        .add_elec{border-right:1px solid #eeeeee;}
    </style>
</head>
<body>
<div id="mainform" class="m10" >
    <div id="container" style="margin:0 auto;width:1300px;height:500px;border:1px solid gray"></div>
    <div style="margin:0 auto;width:1300px;"><input id="goBack" name="goBack" type="button" value="返回"  style="margin-left:600px;margin-top: 10px;" class="gy_btn gy_gray ml10"/></div>
</div>
</body>
</html>


JS代码：
BaiDuMap_station = function() {
    this.mainform = null;
    this.baiduMap = null;
    this.leaseOrderId=Dic.Url.getRequestParams('leaseOrderId');
    this.carNum=decodeURIComponent(Dic.Url.getRequestParams('carNum'));
    var marker;//小车标注
    var lushu;
    /** 初始化百度地图 */
    this.initMap=function(){
        //创建百度地图实例
        this.baiduMap = new BMap.Map("container");
        //创建中心坐标深圳
        var point = new BMap.Point(114.025973657,22.5460535462); // 创建中心点坐标 ,北京  116.404, 39.915  ; 全国中心  103.21853, 34.798205 ; 西安坐标 108.95033,34.274204
        this.baiduMap.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别
        this.baiduMap.enableScrollWheelZoom(); // 启用滚轮放大缩小
        this.baiduMap.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT})); //地图平移缩放控件
        this.baiduMap.addControl(new BMap.ScaleControl()); //比例尺控件
        this.baiduMap.addControl(new BMap.CopyrightControl()); //版权控件
        this.baiduMap.addControl(new BMap.GeolocationControl()); //定位控件
        if(navigator.userAgent.indexOf("MSIE")>0)
        {
            if(navigator.userAgent.indexOf("MSIE 6.0")>0
                || navigator.userAgent.indexOf("MSIE 7.0")>0
                || navigator.userAgent.indexOf("MSIE 8.0")>0)
            {
                // IE 6 7 8
            } else {
                this.baiduMap.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(85, 25)})); // 城市切换
            }
        } else {
            // 其他浏览器
            this.baiduMap.addControl(new BMap.CityListControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(85, 25)})); // 城市切换
        }
    }

    /** 初始化布局 */
    this.initFrameLayout = function() {
        if(navigator.userAgent.indexOf("MSIE")>0)
        {
            if(navigator.userAgent.indexOf("MSIE 6.0")>0
                || navigator.userAgent.indexOf("MSIE 7.0")>0
                || navigator.userAgent.indexOf("MSIE 8.0")>0
                || navigator.userAgent.indexOf("MSIE 9.0")>0)
            {
                $(document.body).css("width", "100%");
                $(document.body).css("height", "98%");

                this.mainform.css("height", document.body.clientHeight - 5);
                this.mainform.css("width", document.body.clientWidth - 20);

                $("#container").css("height", "100%");
                $("#container").css("width", "100%");
            }
        }
    }


    this.initData = function(){
        // 封装请求数据对象
        var requestObj = new Object();
        requestObj['url'] = ctx + '/leaseOrder/queryTrail.json';
        requestObj['data'] = new Object();
        requestObj['data']["leaseOrderId"] = baidumap_station.leaseOrderId;
        requestObj['data']["pageSize"] = '0';
        requestObj['data']["currentPage"] = '0';
        var responseObj = Dic.Ajax.request(requestObj);
        if (null != responseObj && true == responseObj.success) {
           var pointArray =[];//经纬度数组
            for(var i=0;i<responseObj.result.trails.length;i++){
                var point  = new BMap.Point(responseObj.result.trails[i].lo,responseObj.result.trails[i].la);
                pointArray.push(point);
            }
            baidumap_station.baiduMap.setViewport(pointArray);//设置地图视野
            marker = new BMap.Marker(pointArray[0],{
                icon: new BMap.Icon(
                    ctx+'/resource/images/origin.png',
                    new BMap.Size(52,26),
                    {anchor : new BMap.Size(27, 13)}
                )
            });
            var label = new BMap.Label(this.carNum,{offset:new BMap.Size(0,-30)});//创建地图上的文本标注
            label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
            //marker.setLabel(label);//添加文本标注
            this.baiduMap.addOverlay(marker);//向地图中添加小车覆盖物
            BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
                var pointsArr = [initPos, targetPos];  //点数组
                var me = this, currentCount = 0, timer = 100, step = this._opts.speed / (1000 / timer);//当前的帧数,步长，米/秒
                //初始坐标
                var init_pos = this._projection.lngLatToPoint(initPos);
                //获取结束点的(x,y)坐标
                var target_pos = this._projection.lngLatToPoint(targetPos);
                //总的步长
                var count = Math.round(me._getDistance(init_pos, target_pos) / step);
                baidumap_station.baiduMap.addOverlay(new BMap.Polyline(pointsArr, {
                    strokeColor: "blue",
                    strokeWeight: 5,
                    strokeOpacity: 0.5
                })); // 画线
                //如果小于1直接移动到下一点
                if (count < 1) {
                    me._moveNext(++me.i);
                    return;
                }
                me._intervalFlag = setInterval(function () {
                    //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
                    if (currentCount >= count) {
                        clearInterval(me._intervalFlag);
                        //移动的点已经超过总的长度
                        if (me.i > me._path.length) {
                            return;
                        }
                        //运行下一个点
                        me._moveNext(++me.i);
                    } else {
                        currentCount++;
                        var x = effect(init_pos.x, target_pos.x, currentCount, count),
                            y = effect(init_pos.y, target_pos.y, currentCount, count),
                            pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
                        //设置marker
                        if (currentCount == 1) {
                            var proPos = null;
                            if (me.i - 1 >= 0) {
                                proPos = me._path[me.i - 1];
                            }
                            if (me._opts.enableRotation == true) {
                                me.setRotation(proPos, initPos, targetPos);
                            }
                            if (me._opts.autoView) {
                                if (!me._map.getBounds().containsPoint(pos)) {
                                    me._map.setCenter(pos);
                                }
                            }
                        }
                        //正在移动
                        me._marker.setPosition(pos);
                        //设置自定义overlay的位置
                        me._setInfoWin(pos);
                    }
                }, timer);
            };
            lushu = new BMapLib.LuShu(this.baiduMap,pointArray,{
                defaultContent:this.carNum,
                autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                speed: 2000,
                enableRotation:true,//是否设置marker随着道路的走向进行旋转
                landmarkPois:[
                    {lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
                ]
            });
            //this.baiduMap.clearOverlays();    //清除所有覆盖物
            //marker.hide();
            lushu.start();
            // marker.addEventListener("click",function() {
           // marker.enableMassClear();   //设置后可以隐藏改点的覆盖物
            //     marker.hide();
            //     lushu.start();
            //     //map.clearOverlays();  //清除所有覆盖物
            // });
        } else {
            art.dialog.message('error', "数据载入失败", null);
        }
    }

    /**
    * 按钮等事件绑定
    */
    this.bind = function() {
        Dic.addEvent(this.mainform.find('#goBack'), 'click', this.goBack, null, this);
    }

    this.goBack=function(){
        window.location.href=ctx +'/leaseOrder/goAllOrder.do'
    }


    this.init = function() {
        baidumap_station.mainform = $('#mainform');
        this.initFrameLayout();
        this.initMap();
        this.initData();
        this.bind();
    }

}
var baidumap_station = new BaiDuMap_station();
$(document).ready(function(){
    baidumap_station.init();
});
jiangtao7913
关注
专栏目录
百度地图，路书，边走边画线，显示详细消息demo
10-22
百度地图，路书，边走边画线，显示详细消息demo，填上自己的ak可以正常运行，改写move方法
百度地图-路书
frank_hehe的博客
11-26 1718
一、HTML部分 <html lang="en"> <head> <meta charset="utf-8" /> <title>路书</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0...
调用百度地图BMapLib.DrawingManager绘制点线面圆
最新发布
weixin_47459234的博客
06-25 516
调用百度地图BMapLib.DrawingManager绘制点线面圆
百度地图路书边走边画功能
ssiizhang的博客
04-14 1740
百度地图路书边走边画功能，附带速度控制和暂停功能
百度地图路书及（路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正）
07-03
路书自定义路线及多路书自定义定位最佳视角，及百度地图坐标矫正精确到0.2米，都是开发心得。供大家参考！
百度地图轨迹回放,自定义路书,边走边画线
当幸福来敲门的专栏
03-17 9409
转自：https://www.cnblogs.com/syj2016/p/5685294.html百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的需求.源代码如下,其中您的密钥要换成自己的,如果不换,则需要粘贴到百度API示例里面的GPS路书的编辑器中才能运行123456789101112131415161718192021222324252627...
vue 2.x 使用百度地图 与 轨迹回放
u013771380的博客
07-12 801
因公司项目需求需要用到百度地图在后台管理端呈现，由于之前未和任何地图打过交道的，第一时间便是百度查找资料，在vue导入使用百度地图网上的资料很乱，各种自定义方法，各种异步方法导入，我刚开始导入地图都踩了不少坑，后面查找到vue2.x使用组件化导入地图，既然vue是组件化，那我觉得就应该拿单页面组件化的思维去干活能，地址如下，如未打开网址请翻墙使用，不知道是否网络原因，我在广东使用需要翻墙，我朋友在四川那边打开地址就不用 https://dafrok.github.io/vue-baidu-map/#/zh
利用百度地图实现路书实时轨迹边走边划
07-12
本篇文章将深入探讨如何利用百度地图API实现“路书实时轨迹边走边划”的功能。 首先，我们需要理解“路书”和“实时轨迹”的概念。路书通常是指一种详细的路线规划，包括途经点、行驶方向、距离等信息，为驾驶员或...
百度地图API自定义点路书，路书点击事件，路书速度动态改变
02-14
前一段时间研究百度地图路书，查了很多资料也看源码，总结了一下，动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制，高速运动的标注也可以触发点击事件，添加多个互不影响其它标注和地图性能，可参考...
路书实时轨迹边走边划.zip
05-07
本项目"路书实时轨迹边走边划.zip"主要关注的是如何在百度地图上实现车辆的实时轨迹显示和动态绘制功能。接下来，我们将详细讨论相关知识点。 首先，我们要了解**百度地图API**。百度地图API是百度提供的一套开发...
百度地图-路书根据点画出轨迹
08-22
根据点画出轨迹可以做轨迹回放功能，基于百度地图开发
百度路书实现车辆实时轨迹和边走边划线
dawudayudaxue的博客
05-07 2635
百度地图提供了一个路书功能，非常适合画行驶轨迹，但是不能实现实时的轨迹，只能够做历史轨迹回放使用。为了方便在起点和终点确定的情况下，根据当前移动画出车辆实时轨迹，只有对Lushu.js进行修改，以适合自己的需要。 思路是先根据起始点，通过百度驾车轨迹规划画出一条起始点到终点的轨迹。然后通过路书，对每个实时的GPS点进行轨迹绘制（绿色的线随着行走不断延长），车辆图标随着轨迹前进，车头头随着行驶方...
百度地图-驾车路线规划及轨迹回放
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
10-08 804
【代码】百度地图-驾车路线规划及回放。
百度地图路书(移动轨迹)功能
chundui7399的博客
09-24 2777
现在的互联网+，智能电子产品，特别的车载智能系统，大部分会在手机端有一个功能，就是产品的移动轨迹，这种功能怎么实现呢？用百度地图的路书功能可以完美的实现这个功能 下面是路书功能的主要代码： 1：在页面引入百度地图以及路书的JS <scriptsrc="http://api.map...
百度地图 轨迹
weixin_30265171的博客
06-06 421
https://www.jianshu.com/p/7dd8ef2cf3eb https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线 https://www.twblogs.net/a/5c28ce75bd9eee139f2fe949/zh-cn 路书修改代码 带前进后退 转载于:https:...
vue-baidu-map 路书（bml-lushu）组件开启rotation时 setRotation文件报错
m0_37687073的博客
10-19 1935
问题描述 在调用路书组件，开启自动转弯功能（rotation为 true）时，当小车在地图轨迹上转弯，会出现以下问题 Uncaught TypeError: Cannot read properties of undefined (reading 'x') 解决方法 // template <bml-lushu :play="mapConfig.play" :path="mapConfig.path" :icon="icon" :speed="m..
利用百度地图 绘制行车记录 或 行走记录
weixin_47230082的博客
06-15 827
先看功能 类似于地图导航的样式 不多bb 说下实现步骤 1.下载依赖 npm i vue-baidu-map --save 2.在main.js中引入 并设置key 使用百度地图时一定申请在项目中使用,并生成一个专属的ak 详情参考百度地图使用详情 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap,{ak:'@##$@$#%#$%#%#'}) 3.在模块中使用 1.在项目中引用路书功能,类似导航 import { BmlLushu } fro
Android百度地图Demo：实现地图轨迹绘制
该资源主要介绍了如何在Android应用中集成百度地图并展示轨迹。通过提供的博客链接，我们可以获取到具体的实现细节，包括在地图上绘制轨迹的方法和可能遇到的问题及解决方案。 在Android开发中，集成百度地图API...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值