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

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

轨迹回放主要是通过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>
上一篇:STL应用 map HDU 3527


下一篇:地图自定义弹窗 高德地图信息窗体 鼠标点击地图点标记显示弹窗vue