`

百度地图汽车行驶轨迹

 
阅读更多

<!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://webapi.amap.com/maps?v=1.4.15&key=f15d2bb0a478e528d2f325621ac5491c&plugin=AMap.ToolBar'></script>
</head>
<body>
<div id="mapId" style="height: 500px;">
    <script>
        var map = new BMap.Map("mapId");
        map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        var PointArr = [
            {lat: 36.10339957700999, lng: 120.4207801005104},
            {lat: 36.10349055332635,lng: 120.42113539348455},
            {lat: 36.10370795896673,lng: 120.42162977768736},
            {lat: 36.10411490190429,lng: 120.42166901055167},
            {lat: 36.104232027406695,lng: 120.42185015059275},
            {lat: 36.10425620255758,lng: 120.42202022562539},
            {lat: 36.104265908631284,lng: 120.42208225102176},
            {lat: 36.104399968669526,lng: 120.42187425183421},
            {lat: 36.10452708476511,lng: 120.42076268466177},
            {lat: 36.10480132817409, lng: 120.4196557913201},
            {lat: 36.10560773716036,lng: 120.418951386886},
            {lat: 36.10621159088823,lng: 120.41900182905378},
            {lat: 36.1064641068988,lng: 120.41992809616544},
            {lat: 36.10679444086644,lng: 120.42102125032955},
            {lat: 36.107010189089046,lng: 120.42182982905027},
            {lat: 36.107014665948654,lng: 120.42193587265254},
            {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;
        }, 100);

        // 划线
        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("startMap.png", new BMap.Size(45,45),{
                    anchor: new BMap.Size(20, 45),//这句表示图片相对于所加的点的位置mapStart
                    imageSize:new BMap.Size(45, 45)//图标所用的图片的大小，此功能的作用等同于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>

分享到：
| kafka 配置文件参数详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript百度地图行驶轨迹、车辆跟随路径移动并变化方向

    javascript百度地图行驶轨迹、车辆跟随路径移动并变化方向,只需传入起点和终点坐标即可模拟车辆导航，真实导航需要再进行定位，将定位的坐标点实时传入，稍微改动即可

    echarts+百度地图实现个人轨迹-点随线顺序移动

    在本文中，我们将深入探讨如何使用ECharts与百度地图结合，来实现个人轨迹的动态展示，其中亮点是点随线顺序移动的效果。ECharts是一款基于JavaScript的数据可视化库，而百度地图则是国内广泛应用的地图服务提供商。...

    百度地图鹰眼轨迹SDK

    2. **公共交通**：监控公交、地铁等公共交通工具的行驶轨迹。 3. **共享经济**：共享自行车、汽车的定位与调度。 4. **智能出行**：导航、路线规划、行程分享等。 5. **安全监控**：老人、儿童的防走失系统。 总之...

    利用百度地图的路书功能实现汽车实时定位

    【标题】：“利用百度地图的路书功能实现汽车实时定位” 在现代的智能交通系统中，实时定位技术已经成为车辆管理、导航服务以及安全监控的重要组成部分。百度地图作为国内领先的在线地图服务提供商，提供了丰富的...

    基于百度地图的车辆车速预警

    1. 地图显示：在地图上显示车辆位置，可能还包括行驶轨迹。 2. 用户界面：设计简洁易用的UI，展示当前车速、安全车速信息，以及可能的预警状态。 3. 耗电优化：考虑到GPS定位会增加设备电量消耗，开发者可能进行了...

    绘制车辆行驶轨迹图

    公司的一个项目，研究了一天弄出来的，以BaiduMapsApiDemo为原型。需求就是APP会拿到客户提供的GPS经纬度数据，就是车辆在行车时的经纬度，然后需要显示在百度地图上，以观察车辆是否行驶偏离，当然，不止一辆车。

    百度大巴商业生态系统

    用户可以通过百度地图应用轻松查询并购买长途汽车票。例如，从余杭至黄山的行程，用户可以查看预计到达时间、预计拥堵路段等信息，并根据实时路况选择最优路线。 - **用户故事2：验票上车** 用户在上车前可通过...

    react-bmapgl:基于百度地图JavaScript GL版API封装的React组件库

    文档范例官方地址： : 备用地址： ://huiyan-fe.github.io/react-bmapgl/开始使用脚本首先，需要在你的index.html模板页面顶部加载百度地图JavaScript API代码，密钥可去申请&lt; script type =" text/javascript " ...

    探讨GPS轨迹的出租车载客路径智能选择.pdf

    国内外学者已对GPS数据在交通管理中的应用进行了广泛研究，利用云计算和大数据技术处理汽车GPS轨迹数据，取得了一系列成果。例如，Tang等人基于出租车浮动数据建立驾驶员道路选择模型，通过对不同情况下的道路选择...

    百度无人驾驶平台apollo源码

    Apollo是百度开发的一个开源自动驾驶平台，它为全球的开发者、汽车制造商和合作伙伴提供了一个完整的软硬件解决方案，旨在加速自动驾驶的研发和商业化进程。这个压缩包"apollo-master"很可能包含了Apollo项目的最新...

    百度慧眼-车联网合作方案

    在这一过程中，它将采集到的车辆行驶轨迹、驾驶行为、路况信息等大量数据进行实时分析，预测可能遇到的问题，并提供精准的驾驶辅助。此外，百度慧眼还能够协助汽车制造商对产品进行改进，以及提供服务升级。 车联网...

    基于C#的GPS车辆监控系统源码.zip

    6. **地图集成**：系统通常会集成第三方地图API，如高德地图或百度地图，提供地图展示、导航等功能。C#提供了丰富的图形界面控件和API接口，方便地图的集成和操作。 7. **数据分析**：通过对收集的数据进行统计和...

    Apollo Planning - Trajectory Planning.pdf

    轨迹规划是无人驾驶汽车在行驶过程中，根据当前环境和目标位置，规划出一条最优行驶轨迹的技术。 在无人驾驶领域，Apollo计划的轨迹规划功能至关重要。它涉及到了多个学科的知识，比如车辆动力学、传感器融合技术、...

    基于Android平台的校车管理系统设计与实现.docx

    在本系统中，百度地图被用来显示校车的实时位置和历史轨迹，使得用户可以直观地了解校车的具体位置及其行驶路线。 #### 系统功能分析 - **校车信息查询管理**：该模块允许管理员录入、修改、删除校车的基本信息，...

    百度apollo 1.5源码

    Apollo是百度公司开发的一个开放平台，致力于为自动驾驶领域提供一个完整的解决方案。Apollo 1.5版本是该平台的重要里程碑，它包含了大量的软件组件和工具，用于实现车辆的半自动化驾驶功能。这个开源项目旨在帮助...

    Optimal trajectory generation for dynamic street scenarios in a Frenet Frame.rar

    在自动驾驶领域，轨迹规划是确保车辆安全、高效行驶的关键技术之一。"Optimal trajectory generation for dynamic street scenarios in a Frenet Frame"这个主题探讨的是如何在动态街景中为自动驾驶汽车生成最优轨迹...

    汽车自动驾驶算法行业专题：大模型助力，自动驾驶有望迎来奇点.docx

    早期市场以传统计算机视觉和专家系统为基础构建辅助驾驶功能，随后人工智能的蓬勃发展让深度学习在自动驾驶领域被广泛使用，以 Waymo 为代表的自动驾驶先驱玩家开创了激光雷达+高精度地图的感知范式，Cruise、百度等...

Magicbox
Global site tag (gtag.js) - Google Analytics