【高德地图进阶】--- 会动的小汽车（行动轨迹）

2021-12-26 11:58:13 阅读：598 来源： 互联网

标签：map 进阶路径 --- window 小汽车 marker 移动高德

在这里插入图片描述

轨迹回放主要是通过marker的moveALong方法,指定marker的移动的路线和速度.
通过监听marker的moving事件,可以获取marker已经走过的路径,通过该路径进行画线,就可以实现图片中路线的绘制
这里面加了 , 动态改变小车移动速度的函数, 具体可看代码 ,只需要改变speed即可

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>map</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        body,
        html,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .input-card .btn {
            margin-right: 1.2rem;
            width: 9rem;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <!-- 地图div -->
    <div id="container"></div>
    <!-- 右下角 有四个按钮 -->
    <div class="input-card">
        <h4>轨迹回放控制</h4>
        <div class="input-item">
            <input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" />
            <input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()" />
        </div>
        <div class="input-item">
            <input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()" />
            <input type="button" class="btn" value="变速动画" id="stop" onclick="changeSpeed()" />
        </div>
    </div>
</body>
<script>
    window._AMapSecurityConfig = {
        securityJsCode: "xxxx",
    };
</script>
<script language="javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=ccc"></script>

<script language="javascript">
    const map = (window.map = new AMap.Map("container", {
        center: [116.478935, 39.997761],
        zoom: 17,
    }));
    //动态控制小车移动速度
    window.speed = 1
    // 小车移动轨迹
    var lineArr = [
        [116.478935, 39.997761],
        [116.478939, 39.997825],
        [116.478912, 39.998549],
        [116.478912, 39.998549],
        [116.478998, 39.998555],
        [116.478998, 39.998555],
        [116.479282, 39.99856],
        [116.479658, 39.998528],
        [116.480151, 39.998453],
        [116.480784, 39.998302],
        [116.480784, 39.998302],
        [116.481149, 39.998184],
        [116.481573, 39.997997],
        [116.481863, 39.997846],
        [116.482072, 39.997718],
        [116.482362, 39.997718],
        [116.483633, 39.998935],
        [116.48367, 39.998968],
        [116.484648, 39.999861],
    ];
    // 这是小汽车
    var marker = new AMap.Marker({
        map: map,
        position: [116.478935, 39.997761],
        icon: "https://webapi.amap.com/images/car.png",
        //点标记显示位置偏移量，默认值为Pixel(-10,-34)。 因为图片都是矩形的 放到地图上可能位置不太对 通过这个属性 可以调一调位置
        offset: new AMap.Pixel(-26, -13),
        //是否自动旋转  点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。
        autoRotation: true,
        //点标记的旋转角度，广泛用于改变车辆行驶方向
        // 因为图片 可能方向不太对  通过这个旋转一下图片，但是这个不要和autoRotation 混淆了哦， 这个angle是图片刚加载出来之后的旋转角度，autoRotation是在angle基础上进行旋转哦
        angle: -90,
    });

    // 小汽车还未走的路 
    var polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        strokeWeight: 6, //线宽
    });
    // 小汽车已经走过的路线
    var passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: "#AF5", //线颜色
        strokeWeight: 6, //线宽
    });
    //监听小车移动事件
    marker.on("moving", function (e) {
        //passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径
        //通过passedPath 给passedPolyline 设置path 也就是让他开始画绿色的线
        passedPolyline.setPath(e.passedPath);
    });
    // 可以加个这个方法  这个让屏幕 聚焦在小汽车
    map.setFitView();
    // 下面是四个按钮
    function startAnimation() {
        // 第一个参数标识这个标记 移动的路径， 第二个是移动的速度
        //第三个参数 是变化曲线函数 可以动态控制 移动速度
        marker.moveAlong(lineArr, 200, function (e) {
        	// e 是 当前小汽车 在路径中的比值
        	// 路径是由多个坐标组成, e 不是整个路径的比值
        	// e 是每两个坐标点之间的比值 从0 到 1
     		// return 返回的值 就是改变小汽车在路径上的比值 ,比如现在走了一半(e为0.5),这时候return 0.8 那小车就会移动到 0.8的位置上,视觉上小车移动速度就变快了,但是不能超过1 超过1 就 跑出路径了
            return e * window.speed > 1 ? 1 : e * window.speed
        });
    }

    function pauseAnimation() {
        // 这是暂停动画 调用resumeMove 还能继续动
        marker.pauseMove();
    }

    function resumeAnimation() {
        // 继续执行的方法
        marker.resumeMove();
    }
    // 改变小汽车移动速度
    function changeSpeed() {
        marker.pauseMove();
        //改变小车移动速度,这里要注意 需要暂停 再继续 不然会有小车倒退的问题出现
        window.speed = window.speed === 2 ? 1 : 2
        marker.resumeMove();
    }
</script>

</html>

标签：map,进阶,路径,---,window,小汽车,marker,移动,高德
来源： https://blog.csdn.net/qq_39078783/article/details/122129531

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【高德地图进阶】--- 会动的小汽车（行动轨迹）