高德地图实现路线规划+轨迹回放（显示车牌）

小帅丶

已于 2023-06-21 09:15:59 修改

阅读量3k

点赞数 3

分类专栏：工作学习文章标签： css3 html css

于 2021-11-02 14:55:58 首次发布

本文为博主原创文章，转载请注明原文出处。QQ(VX):783021975

本文链接：https://blog.csdn.net/u010651369/article/details/121100253

版权

工作学习专栏收录该内容

22 篇文章

订阅专栏

联系作者Q/V:783021975

Tips:

1.高德好的方法非同步执行。一定要注意执行顺序或等待执行完成再进行具体的操作

2.高德地图不支持label旋转哦~

3.百度是支持的。可以参考 百度地图实现轨迹回放（显示到达时间）_博客-CSDN博客_百度地图轨迹回放使用了百度路书直接上代码，添加秘钥直接运行<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="https://blog.csdn.net/weixin_42244754/article/details/87860709

先看下效果

在线演示:https://www.ydxiaoshuai.cn/track.html

代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹回放</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
            font-family: "微软雅黑";
        }

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

        .input-card .btn:last-child{
            margin-right: 0;
        }
        .amap-marker-content img{
            width: 25px;
            height: 34px;
        }
        .amap-marker-label{
            border: 0;
            background-color: transparent;
        }

        .info{
            position: relative;
            top: 0;
            right: 0;
            min-width: 0;
            font-size: 16px;
            border: 1px solid rgb(204, 204, 204);
        }
    </style>
</head>
<body>
<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="stopAnimation()"/>
    </div>
</div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Driving"></script>
<script>
    //只要起点 和 终点的 经纬度信息
    var markerB = [[120.208156,30.253687],[120.206873,30.251105]];//baidu
    var coords = [[120.200598,30.257652],[120.201386,30.257618],[120.200816,30.251847]]
    var lineArr;
    var polyline;
    var passedPolyline;
    //AMap.DrivingPolicy.LEAST_TIME 最快捷模式
    //AMap.DrivingPolicy.LEAST_FEE 最经济模式
    //AMap.DrivingPolicy.LEAST_DISTANCE 最短距离模式
    //AMap.DrivingPolicy.REAL_TRAFFIC 考虑实时路况
    //驾车策略基础信息
    var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_DISTANCE,
        ferry: 1,
    }
    //创建地图。中心点、缩放等级
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [markerB[0][0],markerB[0][1]],
        zoom: 17
    });
    // 构造路线导航类
    var driving = new AMap.Driving(drivingOption,{map:map})
    addCar('京A 88888');
    //规划路线得到坐标
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(markerB[0][0],markerB[0][1]),
        new AMap.LngLat(markerB[1][0],markerB[1][1]),
        function(status, result) {
        if (status === 'complete') {
            if (result.routes && result.routes.length) {
                var path = parseRouteToPath(result.routes[0])
                lineArr = path;
                addMarker(path);
                drawTrack(path)
                drawPassedPolyLine();
                map.setFitView();
                console.info('绘制驾车路线完成')
            }
        } else {
            console.info('获取驾车数据失败：' + result)
        }
    });
    // 绘制轨迹
    function drawTrack(path) {
        polyline = new AMap.Polyline({
            map: map,
            path: path,
            showDir:true,
            strokeColor: "#18a45b",  //线颜色
            strokeWeight: 6,      //线宽
        });
    }
    // 绘制运动轨迹样式
    function drawPassedPolyLine() {
        passedPolyline = new AMap.Polyline({
            map: map,
            strokeColor: "#AF5",  //线颜色
            strokeWeight: 6,      //线宽
        });
    }
    /*
     增加轨迹回放的小汽车和车牌
     @param plate - 车牌
    */
    function addCar(plate) {
        marker = new AMap.Marker({
            map: map,
            zIndex:9999,
            position: [markerB[0][0],markerB[0][1]],
            icon: "http://lbsyun.baidu.com/jsdemo/img/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            label:{ content:"<div class='info'>"+plate+"</div>",offset: new AMap.Pixel(-26, -35),autoRotation: true}
        });
    }
    // 实例化点标记
    function addMarker(path) {
        path.forEach(function(marker) {
            new AMap.Marker({
                map: map,
                position: [marker.lng,marker.lat],
                offset: new AMap.Pixel(-13, -30)
            });
        });
    }
    /**********起点ICON**********/
    var startMarker = new AMap.Marker({
        position: markerB[0],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
        map: map
    })
    /**********终点ICON**********/
    var endMarker = new AMap.Marker({
        position: markerB[markerB.length - 1],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
        map: map
    })

    // 调整视野达到最佳显示区域
    map.setFitView([startMarker,endMarker])

    marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
    });
    /**********动画 START**********/
    function startAnimation () {
        marker.moveAlong(lineArr,200);
    }

    function pauseAnimation () {
        marker.pauseMove();
    }

    function resumeAnimation () {
        marker.resumeMove();
    }

    function stopAnimation () {
        marker.stopMove();
    }
    /**********动画 END**********/

    // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
    function parseRouteToPath(route) {
        var path = []
        for (var i = 0, l = route.steps.length; i < l; i++) {
            var step = route.steps[i]

            for (var j = 0, n = step.path.length; j < n; j++) {
                path.push(step.path[j])
            }
        }
        return path
    }
    //坐标转换
    function convert() {
        var lnglats;
        AMap.convertFrom(coords, 'baidu', function (status, result) {
            if (result.info === 'ok') {
                lnglats = result.locations;
                alert(lnglats);
            }
        });
    }
</script>
</body>
</html>