效果图：

![](https://blog.junphp.com/public/upload/20220518/faeb3cdf351f9717ec571bccf7d4a2b8.png)

前端代码：
```

<!DOCTYPE HTML>
<html class="no-js">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>小黄牛博客</title>
    <style type="text/css"> 
        body, html, #allmap {
            width:  100%;
            height:  100%;
            overflow: hidden;
            margin: 0;
        } 
    </style> 
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.3"></script>
    </head>

// 获取线路轨迹信息,并且绘制轨迹线路
    fetchLineTrack = async () => {
        // const location = 'blog.junphp.com';
        // const settings = {
        //     method: 'POST',
        //     body: {
        //         id: 74,
        //         type: 1
        //     },
        //     // headers: {
        //     //     'Accept': 'application/json',
        //     //     'Content-Type': 'application/json',
        //     // }
        // };
        // const data = await fetch(`https://${location}/api/trajectory_correction/php/get.php`, settings)
        //     .then(response => response.json())
        //     .then(data => {
        //         if (!data) {
        //             drawPolyline(data);
        //         }
        //     })
        //     .catch(e => {
        //         return e
        //     });
    
        // return data;

return drawPolyline([{"id":"299858015","lat":"33.332999","lng":"120.197148","error_circle":"134","add_time":"1597677112","speed":"0"},{"id":"299858301","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677122","speed":"0"},{"id":"299858585","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677132","speed":"0"},{"id":"299858871","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677142","speed":"0"},{"id":"299859153","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677152","speed":"0"},{"id":"299859442","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677162","speed":"0"},{"id":"299859730","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677172","speed":"0"},{"id":"299860017","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677182","speed":"0"},{"id":"299860302","lat":"33.333454","lng":"120.198656","error_circle":"59","add_time":"1597677192","speed":"0"},{"id":"299860590","lat":"33.333068","lng":"120.198634","error_circle":"76","add_time":"1597677202","speed":"0"},{"id":"299860876","lat":"33.333068","lng":"120.198634","error_circle":"76","add_time":"1597677212","speed":"0"},{"id":"299861159","lat":"33.333068","lng":"120.198634","error_circle":"76","add_time":"1597677222","speed":"0"},{"id":"299861448","lat":"33.333068","lng":"120.198634","error_circle":"76","add_time":"1597677232","speed":"0"},{"id":"299861736","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677242","speed":"0"},{"id":"299862017","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677252","speed":"0"},{"id":"299862299","lat":"33.333233","lng":"120.197943","error_circle":"71","add_time":"1597677262","speed":"0"},{"id":"299862582","lat":"33.333233","lng":"120.197943","error_circle":"71","add_time":"1597677272","speed":"0"},{"id":"299862871","lat":"33.333233","lng":"120.197943","error_circle":"71","add_time":"1597677282","speed":"0"},{"id":"299863158","lat":"33.333233","lng":"120.197943","error_circle":"71","add_time":"1597677292","speed":"0"},{"id":"299863441","lat":"33.333233","lng":"120.197943","error_circle":"71","add_time":"1597677302","speed":"0"},{"id":"299863728","lat":"33.332462","lng":"120.195051","error_circle":"250","add_time":"1597677312","speed":"0"},{"id":"299864020","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677322","speed":"3"},{"id":"299864308","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677332","speed":"3"},{"id":"299864598","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677342","speed":"3"},{"id":"299864884","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677352","speed":"3"},{"id":"299865173","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677362","speed":"3"},{"id":"299865462","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677372","speed":"3"},{"id":"299865749","lat":"33.332680","lng":"120.197713","error_circle":"3220","add_time":"1597677382","speed":"3"},{"id":"299866038","lat":"33.334183","lng":"120.197544","error_circle":"72","add_time":"1597677392","speed":"0"},{"id":"299866324","lat":"33.334183","lng":"120.197544","error_circle":"72","add_time":"1597677402","speed":"0"},{"id":"299866608","lat":"33.334183","lng":"120.197544","error_circle":"72","add_time":"1597677412","speed":"0"},{"id":"299866891","lat":"33.334736","lng":"120.197767","error_circle":"48","add_time":"1597677422","speed":"-1"},{"id":"299867170","lat":"33.335328","lng":"120.198094","error_circle":"32","add_time":"1597677432","speed":"-1"},{"id":"299867452","lat":"33.336380","lng":"120.197252","error_circle":"32","add_time":"1597677442","speed":"-1"},{"id":"299867732","lat":"33.336760","lng":"120.196948","error_circle":"32","add_time":"1597677452","speed":"34"},{"id":"299868009","lat":"33.337066","lng":"120.196523","error_circle":"24","add_time":"1597677462","speed":"0"},{"id":"299868289","lat":"33.337043","lng":"120.196478","error_circle":"8","add_time":"1597677472","speed":"7"},{"id":"299868618","lat":"33.337566","lng":"120.196006","error_circle":"16","add_time":"1597677484","speed":"39"},{"id":"299868847","lat":"33.338214","lng":"120.195470","error_circle":"16","add_time":"1597677492","speed":"44"},{"id":"299869126","lat":"33.339510","lng":"120.194187","error_circle":"284","add_time":"1597677502","speed":"0"},{"id":"299869404","lat":"33.340290","lng":"120.193835","error_circle":"24","add_time":"1597677512","speed":"54"},{"id":"299869679","lat":"33.340290","lng":"120.193835","error_circle":"24","add_time":"1597677522","speed":"54"},{"id":"299869952","lat":"33.343188","lng":"120.190784","error_circle":"100","add_time":"1597677532","speed":"0"},{"id":"299870226","lat":"33.343269","lng":"120.190581","error_circle":"100","add_time":"1597677542","speed":"0"},{"id":"299870508","lat":"33.343269","lng":"120.190581","error_circle":"100","add_time":"1597677552","speed":"0"},{"id":"299870780","lat":"33.346421","lng":"120.191575","error_circle":"352","add_time":"1597677562","speed":"0"},{"id":"299871056","lat":"33.343370","lng":"120.190834","error_circle":"137","add_time":"1597677572","speed":"0"},{"id":"299871324","lat":"33.343370","lng":"120.190834","error_circle":"137","add_time":"1597677582","speed":"0"},{"id":"299871589","lat":"33.343370","lng":"120.190834","error_circle":"137","add_time":"1597677592","speed":"0"},{"id":"299871862","lat":"33.347212","lng":"120.195639","error_circle":"228","add_time":"1597677602","speed":"0"},{"id":"299872126","lat":"33.347212","lng":"120.195639","error_circle":"228","add_time":"1597677612","speed":"0"},{"id":"299872393","lat":"33.349812","lng":"120.200348","error_circle":"249","add_time":"1597677622","speed":"0"},{"id":"299872658","lat":"33.349218","lng":"120.198613","error_circle":"284","add_time":"1597677632","speed":"0"},{"id":"299872926","lat":"33.348832","lng":"120.198220","error_circle":"48","add_time":"1597677642","speed":"0"},{"id":"299873185","lat":"33.348832","lng":"120.198220","error_circle":"24","add_time":"1597677652","speed":"0"},{"id":"299873449","lat":"33.348826","lng":"120.198225","error_circle":"32","add_time":"1597677662","speed":"0"},{"id":"299873712","lat":"33.349391","lng":"120.199582","error_circle":"314","add_time":"1597677672","speed":"0"},{"id":"299873971","lat":"33.349391","lng":"120.199582","error_circle":"314","add_time":"1597677682","speed":"0"},{"id":"299874245","lat":"33.351566","lng":"120.203091","error_circle":"252","add_time":"1597677692","speed":"0"},{"id":"299874501","lat":"33.351302","lng":"120.202779","error_circle":"83","add_time":"1597677702","speed":"0"},{"id":"299874756","lat":"33.351302","lng":"120.202779","error_circle":"83","add_time":"1597677712","speed":"0"},{"id":"299875021","lat":"33.351308","lng":"120.202620","error_circle":"48","add_time":"1597677722","speed":"0"},{"id":"299875282","lat":"33.351308","lng":"120.202620","error_circle":"48","add_time":"1597677732","speed":"0"},{"id":"299875534","lat":"33.351308","lng":"120.202620","error_circle":"24","add_time":"1597677742","speed":"0"},{"id":"299875794","lat":"33.351308","lng":"120.202620","error_circle":"32","add_time":"1597677752","speed":"-1"},{"id":"299876050","lat":"33.351841","lng":"120.203722","error_circle":"48","add_time":"1597677762","speed":"45"},{"id":"299876298","lat":"33.352616","lng":"120.205088","error_circle":"32","add_time":"1597677772","speed":"54"},{"id":"299876556","lat":"33.353212","lng":"120.206123","error_circle":"32","add_time":"1597677782","speed":"-1"},{"id":"299876814","lat":"33.353257","lng":"120.206213","error_circle":"48","add_time":"1597677792","speed":"0"},{"id":"299877067","lat":"33.353262","lng":"120.206208","error_circle":"48","add_time":"1597677802","speed":"0"},{"id":"299877326","lat":"33.353261","lng":"120.206208","error_circle":"48","add_time":"1597677812","speed":"0"},{"id":"299877586","lat":"33.353261","lng":"120.206208","error_circle":"32","add_time":"1597677822","speed":"0"},{"id":"299877857","lat":"33.353261","lng":"120.206208","error_circle":"24","add_time":"1597677832","speed":"0"},{"id":"299878100","lat":"33.353396","lng":"120.206489","error_circle":"48","add_time":"1597677842","speed":"29"},{"id":"299878362","lat":"33.353644","lng":"120.206941","error_circle":"48","add_time":"1597677852","speed":"35"},{"id":"299878620","lat":"33.354721","lng":"120.208724","error_circle":"48","add_time":"1597677862","speed":"40"},{"id":"299878889","lat":"33.355101","lng":"120.209334","error_circle":"48","add_time":"1597677872","speed":"-1"},{"id":"299879148","lat":"33.355123","lng":"120.209357","error_circle":"24","add_time":"1597677882","speed":"0"},{"id":"299879410","lat":"33.355130","lng":"120.209367","error_circle":"16","add_time":"1597677892","speed":"0"},{"id":"299879671","lat":"33.355131","lng":"120.209366","error_circle":"16","add_time":"1597677902","speed":"0"},{"id":"299879937","lat":"33.355131","lng":"120.209366","error_circle":"32","add_time":"1597677912","speed":"0"},{"id":"299880197","lat":"33.355130","lng":"120.209364","error_circle":"48","add_time":"1597677922","speed":"0"},{"id":"299880466","lat":"33.355152","lng":"120.209387","error_circle":"48","add_time":"1597677932","speed":"3"},{"id":"299880729","lat":"33.355540","lng":"120.207732","error_circle":"379","add_time":"1597677942","speed":"0"},{"id":"299880997","lat":"33.355540","lng":"120.207732","error_circle":"379","add_time":"1597677952","speed":"0"},{"id":"299881259","lat":"33.355540","lng":"120.207732","error_circle":"379","add_time":"1597677962","speed":"0"},{"id":"299881521","lat":"33.355540","lng":"120.207732","error_circle":"379","add_time":"1597677972","speed":"0"},{"id":"299881788","lat":"33.363346","lng":"120.202753","error_circle":"294","add_time":"1597677982","speed":"0"},{"id":"299882085","lat":"33.362583","lng":"120.202957","error_circle":"244","add_time":"1597677993","speed":"0"},{"id":"299882317","lat":"33.366712","lng":"120.198840","error_circle":"179","add_time":"1597678002","speed":"0"},{"id":"299882577","lat":"33.366712","lng":"120.198840","error_circle":"179","add_time":"1597678012","speed":"0"},{"id":"299882844","lat":"33.365747","lng":"120.199545","error_circle":"206","add_time":"1597678022","speed":"0"},{"id":"299883109","lat":"33.365570","lng":"120.199891","error_circle":"379","add_time":"1597678032","speed":"0"},{"id":"299883379","lat":"33.365805","lng":"120.199367","error_circle":"389","add_time":"1597678042","speed":"0"},{"id":"299883643","lat":"33.365805","lng":"120.199367","error_circle":"389","add_time":"1597678052","speed":"0"},{"id":"299883906","lat":"33.367488","lng":"120.203070","error_circle":"16","add_time":"1597678062","speed":"0"},{"id":"299884161","lat":"33.367488","lng":"120.203070","error_circle":"16","add_time":"1597678072","speed":"0"},{"id":"299884419","lat":"33.367488","lng":"120.203070","error_circle":"16","add_time":"1597678082","speed":"0"},{"id":"299884675","lat":"33.367488","lng":"120.203068","error_circle":"16","add_time":"1597678092","speed":"0"},{"id":"299884937","lat":"33.368702","lng":"120.202617","error_circle":"16","add_time":"1597678102","speed":"58"},{"id":"299885192","lat":"33.370286","lng":"120.201169","error_circle":"12","add_time":"1597678112","speed":"78"},{"id":"299885445","lat":"33.372006","lng":"120.200036","error_circle":"12","add_time":"1597678122","speed":"71"},{"id":"299885702","lat":"33.373657","lng":"120.199342","error_circle":"12","add_time":"1597678132","speed":"61"},{"id":"299885966","lat":"33.374797","lng":"120.198838","error_circle":"8","add_time":"1597678142","speed":"39"},{"id":"299886220","lat":"33.375333","lng":"120.198565","error_circle":"32","add_time":"1597678152","speed":"-1"},{"id":"299886469","lat":"33.375315","lng":"120.198576","error_circle":"12","add_time":"1597678162","speed":"0"},{"id":"299887005","lat":"33.376166","lng":"120.197873","error_circle":"16","add_time":"1597678183","speed":"49"},{"id":"299887219","lat":"33.375370","lng":"120.198540","error_circle":"16","add_time":"1597678191","speed":"20"},{"id":"299887236","lat":"33.377719","lng":"120.196381","error_circle":"16","add_time":"1597678192","speed":"75"},{"id":"299887487","lat":"33.378937","lng":"120.195203","error_circle":"16","add_time":"1597678202","speed":"73"},{"id":"299887734","lat":"33.380373","lng":"120.193860","error_circle":"16","add_time":"1597678212","speed":"71"},{"id":"299887983","lat":"33.381832","lng":"120.192570","error_circle":"12","add_time":"1597678222","speed":"70"},{"id":"299888230","lat":"33.383289","lng":"120.191252","error_circle":"32","add_time":"1597678232","speed":"-1"},{"id":"299888481","lat":"33.384603","lng":"120.190215","error_circle":"12","add_time":"1597678242","speed":"69"},{"id":"299888726","lat":"33.385981","lng":"120.188985","error_circle":"12","add_time":"1597678252","speed":"69"},{"id":"299888971","lat":"33.387031","lng":"120.188258","error_circle":"16","add_time":"1597678262","speed":"49"},{"id":"299889215","lat":"33.387867","lng":"120.189894","error_circle":"16","add_time":"1597678272","speed":"62"},{"id":"299889449","lat":"33.388575","lng":"120.191905","error_circle":"12","add_time":"1597678282","speed":"68"},{"id":"299889689","lat":"33.389262","lng":"120.193858","error_circle":"12","add_time":"1597678292","speed":"65"},{"id":"299889924","lat":"33.390069","lng":"120.195528","error_circle":"12","add_time":"1597678302","speed":"66"},{"id":"299890155","lat":"33.391136","lng":"120.197305","error_circle":"12","add_time":"1597678312","speed":"76"},{"id":"299890389","lat":"33.392266","lng":"120.199138","error_circle":"32","add_time":"1597678322","speed":"71"},{"id":"299890616","lat":"33.393182","lng":"120.200675","error_circle":"24","add_time":"1597678332","speed":"50"},{"id":"299890850","lat":"33.393946","lng":"120.201928","error_circle":"24","add_time":"1597678342","speed":"53"},{"id":"299891075","lat":"33.394683","lng":"120.203273","error_circle":"12","add_time":"1597678352","speed":"55"},{"id":"299891301","lat":"33.395515","lng":"120.204611","error_circle":"28","add_time":"1597678362","speed":"58"},{"id":"299891525","lat":"33.396314","lng":"120.205920","error_circle":"58","add_time":"1597678372","speed":"48"},{"id":"299891749","lat":"33.397095","lng":"120.207395","error_circle":"32","add_time":"1597678382","speed":"53"},{"id":"299891970","lat":"33.397730","lng":"120.208502","error_circle":"24","add_time":"1597678392","speed":"48"},{"id":"299892189","lat":"33.398206","lng":"120.209441","error_circle":"24","add_time":"1597678402","speed":"26"},{"id":"299892412","lat":"33.397914","lng":"120.209979","error_circle":"24","add_time":"1597678412","speed":"17"},{"id":"299892636","lat":"33.397679","lng":"120.210266","error_circle":"24","add_time":"1597678422","speed":"4"}]);
    }
    fetchLineTrack();

// 颜色区间
    function getColor(speed) {
        if (speed > 0 && speed <= 30) {
            return '#3E3EFF';
        } else if (speed > 30 && speed <= 60) {
            return '#00EE00';
        } else if (speed > 60 && speed <= 80) {
            return '#108ee9';
        } else if (speed > 80) {
            return '#FF3626';
        } else {
            return '#3E3EFF';
        }
    }

// 颜色分段
    function drawPolyline(data){
        let end_num = data.length - 1;
        // 起点图标
        addMarker(new BMap.Point(data[0].lng, data[0].lat), 'https://blog.junphp.com/public/img/start.png');
        addMarker(new BMap.Point(data[end_num].lng, data[end_num].lat), 'https://blog.junphp.com/public/img/end.png');
        // 终点图标

// 创建图标对象  
    function addMarker(point, img){   
        var myIcon = new BMap.Icon(img, new BMap.Size(64, 64));
        map.setCenter(point); 
        car = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(car);
    }
</script>
```

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺