百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移

2020-02-24 18:41:15

参考地址 百度地图API实时画出动态运行轨迹（一条行驶轨迹），车头实时指向行驶方向，设置角度偏移


参考网址：https://blog.csdn.net/skywqnan/article/details/79036262

改变车的方向：http://www.cnblogs.com/peixuanzhihou/p/6540086.html

代码如下：

<!doctype html>
<html>
<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=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
</head>
<body>
<div id="mapId" style="height: 500px;">
    <script>
        var map = new BMap.Map("mapId");
        map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        // map.centerAndZoom("青岛", 8);

        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;
        }, 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("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>


  • 精彩推荐

  • 2019-12-06 10:47:29

    date-fns日期工具的使用方法详解

    isToday() 判断传入日期是否为今天 isYesterday() 判断传入日期是否为昨天 isTomorrow() 判断传入日期是否为 format() 日期格式化 addDays() 获得当前日期之后的日期 addHours() 获得当前时间n小时之后的时间点 addMinutes() 获得当前时间n分钟之后的时间 addMonths() 获得当前月之后n个月的月份 subDays() 获得当前时间之前n天的时间 subHours() 获得当前时间之前n小时的时间 subMinutes() 获得当前时间之前n分钟的时间 subMonths() 获得当前时间之前n个月的时间 differenceInYears() 获得两个时间相差的年份 differenceInWeeks() 获得两个时间相差的周数 differenceInDays() 获得两个时间相差的天数 differenceInHours() 获得两个时间相差的小时数 differenceInMinutes() 获得两个时间相差的分钟数

  • 2019-12-06 10:49:39

    npm 查看源 换源

    npm，cnpm，查看源，切换源，npm config set registry https://registry.npmjs.org

  • 2019-12-06 11:01:31

    npm发布包流程详解 有demo

    npm发布包步骤，以及踩过的坑（见红颜色标准）： 1.注册npm账号，并完成Email认证（否则最后一步提交会报Email错误） 2.npm添加用户或登陆：npm adduser 或 npm login

  • 2019-12-06 13:16:18

    vue mixins组件复用的几种方式

    最近在做项目的时候，研究了mixins，此功能有妙处。用的时候有这样一个场景，页面的风格不同，但是执行的方法，和需要的数据非常的相似。我们是否要写两种组件呢？还是保留一个并且然后另个一并兼容另一个呢？ 不管以上那种方式都不是很合理，因为组件写成2个，不仅麻烦而且维护麻烦；第二种虽然做了兼容但是页面逻辑造成混乱，必然不清晰；有没有好的方法，有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能，使代码易懂，简单、清晰。

  • 2019-12-06 13:26:30

    vue的mixins混入合并规则

    混入minxins：分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项。

  • 2019-12-06 16:50:34

    Intellij idea 如何关闭无用的提示

    Linux：Settings —> Editor —> Inspections —> General —> Duplicated Code Mac：Preferences --> Editor —> Inspections —> General —> Duplicated Code fragment 将对应的勾去掉。

  • 2019-12-09 15:36:56

    神秘的 shadow-dom 浅析，shadow-root

    顾名思义， shadow-dom，直译的话就是 影子dom ？我觉得可以理解为潜藏在黑暗中的 DOM 结构，也就是我们无法直接控制操纵的 DOM 结构。前端同学经常用开发者工具的话，查看 DOM 结构的时候，肯定看到过下面这样的结构：

  • 2019-12-10 11:13:50

    前端实战-基于Nuxt的SVG使用

    虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。