【原创：车路协同前端】

找好require.js脚本
配置好百度地图的ak
<!DOCTYPE html> 
<html>
    <head> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>小蚂蚁</title> 
        <style type="text/css"> 
            html{height:100%} 
            body{height:100%;margin:0px;padding:0px} 
            #container{height:100%} 
            /* img {max-width: 100%}; */
            img {width:50%;height:50%};

            /* 去掉百度logo 保留比例尺 */
            .BMap_cpyCtrl {
                display: none;
            }
            .anchorBL {
                display: none;
            }
            
            .BMap_noprint  {
                display: block;
            }
        </style> 

        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=mBYZHriZV4r4j06kwSynjFjpYqax3OcP">
        </script>

    <script src="js/require.js"></script>
    </head> 
    
    <body> 
        <div id="container"></div>
    </body> 
</html>


<script>
    //创建地图
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(118.82193, 31.89243), 20);//初始位置
    map.enableScrollWheelZoom(true);//允许缩放
    var scaleCtrl = new BMapGL.ScaleControl(BMAP_ANCHOR_TOP_RIGHT);  // 添加比例尺控件
    map.addControl(scaleCtrl);

    // 3D
    var navi3Dctrl=new BMapGL.NavigationControl3D();
    map.addControl(navi3Dctrl);
    // map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

    // 创建定位控件
    var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 20)
    });
    // 将控件添加到地图上
    map.addControl(locationControl);

    // 添加定位事件
    locationControl.addEventListener("locationSuccess", function(e){
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为：" + address);
    });


    // 1：创建点标记
    var point_point=new BMapGL.Point(118.82193, 31.89243);
    var marker_point = new BMapGL.Marker(point_point,{
        enableDragging:true
    });

    // 2：创建不缩放图片标记
    // car
    var myIcon_car = new BMapGL.Icon(("https://i0.hdslb.com/bfs/album/055d29382f61fb4ea4e19b6859c3f86907fab92f.png@.webp"), new BMapGL.Size(50, 40));
    var pt_car = new BMapGL.Point(118.82193, 31.89255);
    var marker_car = new BMapGL.Marker(pt_car, {
        icon: myIcon_car,
        title:'奇瑞小蚂蚁'
    });


    //road
    x_road=118.82175;
    y_road=31.89252;
    road_width=0.0001;
    
    var myIcon_road = new BMapGL.Icon(("https://i0.hdslb.com/bfs/album/a111343388e082ae02df5325433af1cb885179a4.png@.webp"), new BMapGL.Size(80, 80));
    var pt_road = new BMapGL.Point(x_road, y_road);
    var marker_road = new BMapGL.Marker(pt_road, {
        icon: myIcon_road,
        title:'路端感知平台'
    });


    // 3：创建随动缩放图片标记

    var pStart1 = new BMapGL.Point(x_road,y_road);
    var pEnd1 = new BMapGL.Point(x_road+road_width*2,y_road+road_width);
    var bounds1 = new BMapGL.Bounds(new BMapGL.Point(pStart1.lng, pEnd1.lat), new BMapGL.Point(pEnd1.lng, pStart1.lat));

    var imgOverlay_road = new BMapGL.GroundOverlay(bounds1, {
        type: 'image',
        url: 'https://i0.hdslb.com/bfs/album/a111343388e082ae02df5325433af1cb885179a4.png@.webp',
        opacity: 1
    });
    // 4:创建文本标签
    var opts = {
        position: new BMapGL.Point(x_road-0.00002, y_road), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(30, -30) // 设置文本偏移量
    };
    var label_road = new BMapGL.Label('路端感知平台', opts);
    // 自定义文本标注样式
    label_road.setStyle({
        color: 'black',
        borderRadius: '5px',
        borderColor: '#ccc',
        padding: '10px',
        fontFamily:'微软雅黑',
    });

    // 加入地图中
    map.addOverlay(marker_point);
    map.addOverlay(marker_car);
    map.addOverlay(label_road);
    map.addOverlay(marker_road);
    // map.addOverlay(imgOverlay_road);
    

    

    //制作动画
    //定时器动画
    timer_is_on = true;
    x=118.82193;
    y=31.89243;
    function resetMkPoint(){
        // 改变Marker的位置

        marker_car.setPosition(new BMapGL.Point(x, y));
        x=x+0.00001;
        // y=y+0.00001
        //map.setCenter(points[i]);
        // 如果没有超出数组个数
        setTimeout(function(){resetMkPoint();},1000);
    }
    my_timer = setTimeout(function() {resetMkPoint();}, 1000);

</script>
在这里插入图片描述
原文链接：https://blog.csdn.net/qianmin12345678/article/details/121184341