百度地图 动画车辆轨迹 并获取所有经过的经纬度点

已于 2022-02-09 13:55:06 修改
阅读量1.5k 收藏 6
点赞数 2
文章标签： 百度 动画 javascript
于 2022-02-07 16:07:05 首次发布
嘎嘎淘
本文链接：https://blog.csdn.net/zhang804633234/article/details/122810382
版权
本文详细介绍了如何使用百度地图API在网页上模拟车辆行驶轨迹，包括起点和终点坐标获取、路线搜索、行驶标记和动态路线绘制。通过JavaScript代码展示了如何获取并展示动态行驶路线，以及关键的图标定义和地图操作。
摘要由CSDN通过智能技术生成 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度地图的动态行驶轨迹</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度KEY"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="mapId" style="height: 600px;"></div>
<div>模拟轨迹为: <button onclick="copyText()">复制</button></div>
<input id="req"  style="height: 200px; width: 100%;"  value="">
    <script>
        function copyText(){
            var input = document.getElementById("req");
            input.select(); // 选中文本
            document.execCommand("copy"); // 执行浏览器复制命令
            alert("复制成功");
        }
        var map = new BMap.Map("mapId");
        map.enableScrollWheelZoom();             // 开启鼠标滚轮缩放
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
		
		
        var PointArr =[];
        var myP1 = new BMap.Point(109.513341,18.27572);    //起点
        var myP2 = new BMap.Point(109.526963,18.269643);   //终点
        var carMk;//先将终点坐标展示的mark对象定义
        //小车行驶图标
        var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26), {
            anchor : new BMap.Size(27, 13),
            imageSize:new BMap.Size(52,26)
        });
        //终点图标
        var terminalPoint = new BMap.Icon('https://mapopen-website-wiki.cdn.bcebos.com/shouye/redPoint.png', new BMap.Size(45,45), {
                    anchor : new BMap.Size(20, 45),
                    imageSize:new BMap.Size(22,30)
        });
        var op=0;
        var driving = new BMap.DrivingRoute(map, {onSearchComplete:function(results){
            op+=1;
            if(op>1){
                return;
            }
            if(driving.getStatus()== BMAP_STATUS_SUCCESS){
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                var paths = pts.length;    //获得有几个点
                console.log("点的个数为：");
                console.log("paths=%d",paths);

                var ztime=Date.parse(new Date())/1000-paths*1000
                var req={}
                for(var i=0;i<paths;i++){
                    PointArr.push({lng: pts[i].lng, lat: pts[i].lat})
                    req[pts[i].lng+","+pts[i].lat]=ztime+1000;
                    ztime+=1000;
                }
                document.getElementById("req").value=JSON.stringify(req);
                //$("#req").html=JSON.stringify(req);
                //alert(JSON.stringify(req));
                map.centerAndZoom(PointArr, 13);// 根据经纬度显示地图的范围
                map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野
                addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map);
                var i = 0;
                var interval = setInterval(function () {
                    if (i >= PointArr.length) {
                        
                        clearInterval(interval);
                        return;
                    }else{
                        console.log(i,PointArr.length);
                    }
                    drowLine(map,PointArr[i],PointArr[i+1]);//画线调用
                   
                    i = i + 1;
                }, 1000);

            }
            }},{renderOptions:{map:map,autoViewport:true}});    //驾车实例
    
        driving.search(myP1, myP2);    //显示一条公交线路
    
        
	 
        // var PointArr = [

        //     {lng: 120.42201589513277, lat: 36.10700627324672},
        //     {lng: 120.42201589513277, lat: 36.10700627324672},
        //     {lng: 120.42236704579075, lat: 36.10708566579729},
        //     {lng: 120.42269817692573, lat: 36.107201270041955},
        //     {lng: 120.42239277578172, lat: 36.10812797579566},
        //     {lng: 120.42175457671763, lat: 36.10947659586882},
        //     {lng: 120.42144906678747, lat: 36.11028554037044},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.4213722360578, lat: 36.110547069787465},
        //     {lng: 120.42134433787885, lat: 36.110691285540966},
        //     {lng: 120.42234193234574, lat: 36.110931417305515},
        //     {lng: 120.42374305054953, lat: 36.11109804633305},
        //     {lng: 120.42478859440246, lat: 36.111102173671576},
        //     {lng: 120.42606467439863, lat: 36.11129314178323},
        //     {lng: 120.4274220550685, lat: 36.11148065963647},
        //     {lng: 120.42831965719076, lat: 36.111638311669736},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42839951065358, lat: 36.11164240198062},
        //     {lng: 120.42869196887202, lat: 36.1116737914188},
        //     {lng: 120.43031048017785, lat: 36.11190642360766},
        //     {lng: 120.43239173942534, lat: 36.11229570404404},
        //     {lng: 120.43368467575368, lat: 36.11281195352835},
        //     {lng: 120.43371757862009, lat: 36.11284016439977},
        //     {lng: 120.43379230066179, lat: 36.11284161798212},
        //     {lng: 120.43441423254144, lat: 36.113205746094536},
        //     {lng: 120.43549342023326, lat: 36.11391074053337},
        //     {lng: 120.43637497341942, lat: 36.11441797319607},
        //     {lng: 120.4365024200745, lat: 36.11445405475196},
        //     {lng: 120.43670459776231, lat: 36.11458083085174},
        //     {lng: 120.43745246924915, lat: 36.11507070008782},
        //     {lng: 120.43821097991501, lat: 36.115416050767585},
        //     {lng: 120.43821097991501, lat: 36.115416050767585},
        //     {lng: 120.43821097991501, lat: 36.115416050767585},
        //     {lng: 120.43821097991501, lat: 36.115416050767585},
        //     {lng: 120.43821097991501, lat: 36.115416050767585},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43823585473245, lat: 36.11541929557907},
        //     {lng: 120.43859812511984, lat: 36.115583971494395},
        //     {lng: 120.43901701857004, lat: 36.115714318017346},
        //     {lng: 120.43928467292172, lat: 36.11582517772885},
        //     {lng: 120.43959708522435, lat: 36.115963587312805},
        //     {lng: 120.43986466921422, lat: 36.116047547858166},
        //     {lng: 120.44007952157578, lat: 36.11611896447754},
        //     {lng: 120.440167025596, lat: 36.11612294605039},
        //     {lng: 120.440167025596, lat: 36.11612294605039},
        //     {lng: 120.44024360205321, lat: 36.116138815526504},
        //     {lng: 120.44024360205321, lat: 36.116138815526504},
        //     {lng: 120.44024360205321, lat: 36.116138815526504},
        //     {lng: 120.44026150723737, lat: 36.11614702160796},
        //     {lng: 120.44027344364953, lat: 36.11615215895656},
        //     {lng: 120.44027344364953, lat: 36.11615215895656},
        //     {lng: 120.44028836484941, lat: 36.1161593311561},
        //     {lng: 120.44034209724579, lat: 36.116201960713745},
        //     {lng: 120.44048233691922, lat: 36.116254585044935},
        //     {lng: 120.44048233691922, lat: 36.116254585044935},
        //     {lng: 120.4405738257871, lat: 36.116276646228826},
        //     {lng: 120.44073595695149, lat: 36.11635856195875},
        //     {lng: 120.44115463412841, lat: 36.11652357056175},
        //     {lng: 120.44118546544034, lat: 36.11653994619434},
        //     {lng: 120.44118546544034, lat: 36.11653994619434},
        //     {lng: 120.44121529948468, lat: 36.1165533090833}];
        // map.centerAndZoom(PointArr, 13);// 根据经纬度显示地图的范围
        // map.setViewport(PointArr);// 根据提供的地理区域或坐标设置地图视野

        // addStartMarker(new BMap.Point(PointArr[0].lng, PointArr[0].lat),'起点',map);
        // var carMk;//先将终点坐标展示的mark对象定义
        // //小车行驶图标
        // var drivingPoint = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26), {
        //     anchor : new BMap.Size(27, 13),
        //     imageSize:new BMap.Size(52,26)
        // });
        // //终点图标
        // var terminalPoint = new BMap.Icon('endMap.png', new BMap.Size(45,45), {
        //     anchor : new BMap.Size(20, 45),
        //     imageSize:new BMap.Size(45,45)
        // });
        // var i = 0;
        // var interval = setInterval(function () {
        //     if (i >= PointArr.length) {
        //         clearInterval(interval);
        //         return;
        //     }
        //     drowLine(map,PointArr[i],PointArr[i+1]);//画线调用
        //     i = i + 1;
        // }, 1000);

        // 划线
        function drowLine(map,PointArr,PointArrNext) {
            if(PointArrNext!=undefined) {
                var polyline = new BMap.Polyline(
                    [
                        new BMap.Point(PointArr.lng, PointArr.lat),
                        new BMap.Point(PointArrNext.lng, PointArrNext.lat)
                    ],
                    {
                        strokeColor: "red",
                        strokeWeight: 7,
                        strokeOpacity: 1
                    });   //创建折线
                map.addOverlay(polyline);
                addMarkerEnd(new BMap.Point(PointArrNext.lng, PointArrNext.lat), '小车行驶', map, PointArrNext, new BMap.Point(PointArr.lng, PointArr.lat));//添加图标
            }else {
                addMarkerEnd(new BMap.Point(PointArr.lng, PointArr.lat), '终点', map);//添加终点图标
            }
        }
        //添加起始图标
        function addStartMarker(point, name,mapInit) {
            if(name=="起点"){
                var myIcon = new BMap.Icon("https://mapopen-website-wiki.cdn.bcebos.com/shouye/redPoint.png", new BMap.Size(45,45),{
                    anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
                    imageSize:new BMap.Size(22, 30)//图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
                    // offset: new BMap.Size(-10, 45), // 指定定位位置
                    // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });
                window.marker = new BMap.Marker(point,{icon:myIcon});  // 创建标注
                mapInit.addOverlay(marker);               // 将标注添加到地图中
                //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }
        }
        //添加行驶和终点图标
        function addMarkerEnd(point, name,mapInit,trackUnit,prePoint) {
            if(name=="小车行驶"){
                if(carMk){//先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
                    mapInit.removeOverlay(carMk);
                }
                carMk = new BMap.Marker(point,{icon:drivingPoint});  // 创建标注
                carMk.setRotation(trackUnit.route);//trackUnit.route
                //getAngle(point,prePoint);// js求解两点之间的角度
                carMk.setRotation(getAngle(point,prePoint)-90);// 旋转的角度
                mapInit.addOverlay(carMk);               // 将标注添加到地图中
                //carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }else {
                mapInit.removeOverlay(carMk);
                carMk = new BMap.Marker(point,{icon:terminalPoint});  // 创建标注
                mapInit.addOverlay(carMk);
            }
        }
        //获得角度的函数
        function getAngle(n,next){
            var ret
            var w1 = n.lat/180 * Math.PI
            var j1 = n.lng/180 * Math.PI

            var w2 = next.lat/180 * Math.PI
            var j2 = next.lng/180 * Math.PI

            ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
            ret = Math.sqrt(ret);

            // var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
            var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
            //console.log(temp)
            ret = ret/temp;

            ret = Math.atan(ret) / Math.PI * 180 ;
            ret += 90;

            // 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
            if(j1-j2 < 0){
                // console.log('j1<j2')
                if(w1-w2 < 0){
                    // console.log('w1<w2')
                    ret;
                }else{
                    // console.log('w1>w2')
                    ret = -ret+180;
                }
            }else{
                // console.log('j1>j2')
                if(w1-w2 < 0){
                    // console.log('w1<w2')
                    ret = 180+ret;
                }else{
                    // console.log('w1>w2')
                    ret = -ret;
                }
            }
            return ret ;
        }


    </script>
</body>
</html>

凄凉山谷的风 OL
关注
js百度地图小车html,Web js实现百度地图实时轨迹画线 小车车行驶轨迹 | 彬菌
weixin_39639505的博客
06-23 1607
版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！恰饭广告注意：1.百度地图ak换成自己在百度地图官网申请2.建议使用firefox浏览器，google被墙无法调用gps3.发布到服务器必须使用https，对于localhost和本地测试不用4.电脑开启位置服务，手机打开gps定位5.百度地图坐标和gps坐标不一致，要在百度地图正确显示位置必须把gps坐标转为百度坐标con...
百度地图 获取两坐标点之间的驾车路线所有坐标
~冷空气~
05-20 1168
百度地图 获取两坐标点之间的驾车路线所有坐标 <html> <head> <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"> #box { wid
C# VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆
01-14
C#VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆 项目源代码
Mapxtreme C#鹰眼地图
devgis
03-25 2976
Demo演示程序下载地址： http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找：EagelEyeMap.rar 安装mapxtreme6.8.0 下载地址：http://pan.baidu.com/share/link?shareid=643564&uk=890678271#dir/pa
百度地图根据经纬度坐标，显示轨迹
qq_36865945的博客
07-15 3732
1.html 部分设置存放地图的div，定义id和宽高，并引入百度地图相关JS <div id="baiduMap" style="width:600px;height:600px;"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图开发者秘钥"></script> 2.JS部分，初始化的时候我就创造了一个searchTr
轨迹回放 百度地图
几番风雨的专栏
11-05 1452
Track html{height:100%} body{height:100%;margin:0px;padding:0px} #controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000;
Informerd详解（2）与C#百度地图定位显示项目学习
weixin_44790306的博客
05-15 1338
文章目录摘要一.Informer代码部分（2）1.1 Deconder模块代码二.三. conda环境导入导出 摘要 一.Informer代码部分（2） 1.1 Deconder模块代码 二. 三. conda环境导入导出 代码运行环境的
百度地图运动轨迹 车辆行驶轨迹
07-27
在IT行业中，尤其是在地理信息系统（GIS）和Web开发领域，"百度地图运动轨迹 车辆行驶轨迹"是一个常见的应用场景。这个主题涉及到如何利用百度地图API来追踪和展示车辆的行驶路径，通常用于物流监控、交通管理或者...
类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（轨迹已画好和无轨迹）
11-12
本项目基于百度地图API，提供了完整的源码实现，包括车辆已有轨迹和无轨迹两种情况。下面我们将深入探讨这个项目所涉及的关键技术点。 1. **百度地图API集成**： 百度地图SDK为开发者提供了丰富的地图展示、定位、...
使用百度地图实现车辆轨迹回放
05-31
要实现车辆轨迹回放，你需要先获取车辆行驶轨迹的数据，可以通过GPS或其他位置数据采集设备获取。接下来，你可以使用百度地图API提供的Polyline类来绘制轨迹线路，使用Marker类来标注车辆行驶的起点和终点，使用...
C#百度地图源码例子
12-20
具有查询线路（包括公交线路，步行线路，驾车线路），查询位置信息，快速定位，获取地图任一点位置信息，添加兴趣定功能，测量距离功能及等功能,可供学者参考学习。
vue百度地图实时动态轨迹动画
最新发布
09-03
4. 将轨迹数据的经纬度坐标转换为百度地图的坐标系，并将其存储在一个数组中。 5. 在地图上绘制轨迹动画，可以使用百度地图的 Polyline 对象，并通过定时器来更新 Polyline 的路径坐标。 6. 为了实现动画效果，...
记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
baby_duoduo的博客
09-10 2200
** 前言： ** 最近一直在做数据可视化方面的工作，其中平面可视化没什么难度，毕竟已经有很多成熟的可供使用的框架，比如百度的echart.js，highcharts.js等。还有就是3D可视化了，整体来说难度也还好，通过WEBGL技术一般的可视化效果还是很好实现，如果对于WEBGL光线渲染力不从心的话直接通过three.js来做也是很方便。 其实真正困扰我开发的是可视化项目中一般会存在很多基于地...
C#调用百度地图API经验分享（四）
热门推荐
追
03-12 3万+
这一篇，记录一下我调用的地图API实现的功能。下面介绍的都是一些片段的节选，不能直接复制就运行。在实现之前肯定要加载地图，先放一个webbroser控件，然后如下： private void Form1_Load(object sender, EventArgs e) { string str_url = Application.StartupPa
C#沿线行走动画
weixin_44547431的博客
06-17 1388
《C#沿线行走动画》 一、 说明 本文介绍在C#中如何绘制不规则的线，并在线上滑动行走。 二、 代码 <Window x:Class="高级动画和模板.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.mic...
百度地图API详解之驾车导航
weixin_30640769的博客
09-23 1087
本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发。 一个简单的示例 驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线，我们先从一个最简单的示例看起： var map = new BMap.Map('container');map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var driving ...
【百度地图系列】规划驾车路线和途径点及判断车辆路线偏移
SilenceViking的充电桩
07-23 3943
star: 项目需求需要利用百度地图构建路线并支持设置途径点，以及可以实时监控车辆是否偏移路线；两种方案。 写了比较完整的注释了，替换ak可直接看效果，规划驾车路线和途径点及判断车辆路线偏移 源码： 方法一： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset......
百度地图api使用学习
darer49的博客
11-22 381
跟百度地图api打交道其实很多次了，但是每次用完就忘了，所以这次特意总结一下。 //在head里面需要有一个api的引入，密钥的话去申请一下 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script> //引用路书 <script type="text/javascript" src="http://api.map.baidu.com/library/
类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现（轨迹已画好）
qq_30651537的博客
11-21 5902
类似滴滴打车，多辆小车在地图上平滑移动的实现，基于百度地图实现
百度地图API：获取经纬度并存储到文件
- 百度地图API的使用，特别是获取地图中心点经纬度和创建地图视图的方法。 - JavaScript中文件操作，通过`ActiveXObject`与操作系统进行交互，实现经纬度数据的读取和写入。 - 界面交互设计，如何通过按钮事件处理...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值