百度地图驾车导航用来生成路线轨迹回放（LuShu）

最新推荐文章于 2024-09-25 16:01:15 发布

tianmeng1999

最新推荐文章于 2024-09-25 16:01:15 发布

阅读量3.3k

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/weixin_42448623/article/details/100659561

版权

百度地图专栏收录该内容

14 篇文章 1 订阅

订阅专栏

百度地图秘钥申请(AK)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轨迹回放_路书</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script> -->
    <script type="text/javascript" src="./js/LuShu_center.js"></script> 
    <style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#map_canvas{width:100%;height:500px;}
		#result {width:100%}
	</style>
</head>
<body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button id="run">开始</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>


    <script>
    var map = new BMap.Map('map_canvas');
	map.enableScrollWheelZoom();
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
    map.setMapType(BMAP_SATELLITE_MAP);//设置卫星地图
	var lushu;
	// 实例化一个驾车导航用来生成路线
    var drv = new BMap.DrivingRoute('北京', {
        onSearchComplete: function(res) {
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0);
                var arrPois =[];
                for(var j=0;j<plan.getNumRoutes();j++){
                    var route = plan.getRoute(j);
                    arrPois = arrPois.concat(route.getPath());
                }
                //map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                //map.setViewport(arrPois); //展示整条路线

                lushu = new BMapLib.LuShu(map,arrPois,{
                    defaultContent:"",//"从天安门到百度大厦"
                    autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                    icon  : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                    speed: 100,
                    enableRotation:true,//是否设置marker随着道路的走向进行旋转
                    landmarkPois: [
                        {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                        {lng:116.315391,lat:39.964429,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
                        {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
                    ]
                });

                BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {
                    var pointsArr = [initPos,targetPos];  //点数组
                    console.log(pointsArr)

                    var me = this,
                    //当前的帧数
                    currentCount = 0,
                    //步长，米/秒
                    timer = 10,
                    step_p = 45//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_p);
                    console.log(step_p)

                    //画线
                    this._map.addOverlay(new BMap.Polyline(pointsArr, { 
                        strokeColor : "#111", 
                        strokeWeight : 5, 
                        strokeOpacity : 0.5 
                    })); // 画线 

                    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);
                }
            }
        }
    });
    var start=new BMap.Point(116.404844,39.911836);
    var end=new BMap.Point(116.308102,40.056057);
	drv.search(start, end);
	//绑定事件
	$("run").onclick = function(){
		lushu.start();
	}
	$("stop").onclick = function(){
		lushu.stop();
	}
	$("pause").onclick = function(){
		lushu.pause();
	}

	function $(element){
		return document.getElementById(element);
	}
    </script>
</body>
</html>