百度地图展示小车动，且在运行过程中需要车头方向随着角度进行变化

本文通过使用百度地图API实现了一条模拟的1号线公交路线，从火车站出发经过多个站点最终到达目的地。通过JavaScript编程实现了公交车在设定路线上的移动效果，并在特定站点播报信息。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>

<title>1号线</title>
</head>
<body>
<div id="allmap"></div>
    

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        //地图中心
        map.centerAndZoom(new BMap.Point(109.712778, 28.287154), 14);
        // 左上角，添加比例尺
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
        //左上角，添加默认缩放平移控件
        var top_left_navigation = new BMap.NavigationControl();  
        //添加控件和比例尺
        map.addControl(top_left_control);        
        map.addControl(top_left_navigation); 
        //可滚轮缩放
        map.enableScrollWheelZoom();
        huoChe();
        //1号线 起点火车站
        function huoChe() {
            var p1 = new BMap.Point(109.74257,28.329039);
                p2 = new BMap.Point(109.744286,28.326809),
                p23 = new BMap.Point(109.69507140855,28.245313335457),
                p24 = new BMap.Point(109.69155298664,28.241825029473),
                p25 = new BMap.Point(109.68709982285,28.237708055369),
            //  p26 = new BMap.Point(109.68492037303,28.234478307947);
                p26 = new BMap.Point(109.684917, 28.234319);

            //1号线 起点火车站 存到数组里
            var arrayList = [] ;
            arrayList.push(p1);
            arrayList.push(p2);
            arrayList.push(p23);
            arrayList.push(p24);
            arrayList.push(p25);
            arrayList.push(p26);
            moveBus(arrayList)
        }
        
        function moveBus(arrayList) {
            map.setViewport(arrayList);
            // marker=new BMap.Marker(arrayList[0],{
            //   icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
            // });
            // var label = new BMap.Label("湘U16888",{offset:new BMap.Size(0,-30)});
            // label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
            //         marker.setLabel(label);
                 
            //  map.addOverlay(marker);
            BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {
                var pointsArr=[initPos,targetPos];  //点数组
                var me = this,
                //当前的帧数
                currentCount = 0,
                //步长，米/秒
                timer = 10,
                step = this._opts.speed / (1000 / timer),
                //初始坐标
                init_pos = this._projection.lngLatToPoint(initPos),
                //获取结束点的(x,y)坐标
                target_pos = this._projection.lngLatToPoint(targetPos),
                //总的步长
                count = Math.round(me._getDistance(init_pos, target_pos) / step);
                 //显示折线 syj201607191107
                // this._map.addOverlay(new BMap.Polyline(pointsArr, { 
                //     strokeColor : "#111", 
                //     strokeWeight : 5, 
                //     strokeOpacity : 0.5 
                // })); // 画线 
                //如果小于1直接移动到下一点
                if (count < 1) {
                    me._moveNext(++me.i);
                    return;
                }
                me._intervalFlag = setInterval(function() {
                //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
                if (currentCount >= count) {
                    clearInterval(me._intervalFlag);
                    //移动的点已经超过总的长度
                    if(me.i > me._path.length){
                        return;
                    }
                    //运行下一个点
                    me._moveNext(++me.i);
                }else {
                        currentCount++;
                        var x = effect(init_pos.x, target_pos.x, currentCount, count),
                            y = effect(init_pos.y, target_pos.y, currentCount, count),
                            pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
                        //设置marker
                        if(currentCount == 1){
                            var proPos = null;
                            if(me.i - 1 >= 0){
                                proPos = me._path[me.i - 1];
                            }
                            if(me._opts.enableRotation == true){
                                 me.setRotation(proPos,initPos,targetPos);
                            }
                            if(me._opts.autoView){
                                if(!me._map.getBounds().containsPoint(pos)){
                                    me._map.setCenter(pos);
                                }  
                            }
                        }
                        //正在移动
                        me._marker.setPosition(pos);
                        //设置自定义overlay的位置
                        me._setInfoWin(pos);  
                    }
                },timer);
            };
            lushu = new BMapLib.LuShu(map,arrayList,{
                defaultContent:"湘U16888",
                autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                speed: 450,
                enableRotation:true,//是否设置marker随着道路的走向进行旋转
                landmarkPois:[
                    {lng:109.74260833236,lat:28.328984703864,html:'女士们先生们，欢迎您乘坐6号公交车，请大家坐好了',pauseTime:2},
                    {lng:109.684917,lat:28.234319,html:'女士们先生们，到达终点站，请拿好行李下车',pauseTime:2},
              ],
                defaultContent: '湘U16888 公交车极速前进中...',
            }); 
            lushu.start();
        }   
    </script>
</body>
</html>