百度地图API使用第一弹------动态轨迹运动封装

最新推荐文章于 2024-08-06 02:43:13 发布

EricEco8

最新推荐文章于 2024-08-06 02:43:13 发布

阅读量3.5k

点赞数 2

分类专栏：百度地图js开发文章标签：百度地图 javascript 动态运动轨迹

本文链接：https://blog.csdn.net/github_38847071/article/details/72574560

版权

百度地图js开发专栏收录该内容

1 篇文章 1 订阅

订阅专栏

百度地图API使用第一弹 ——动态轨迹运动封装

你还在为冗杂的百度地图API看着看着就想睡觉而犯愁吗？
你还在不会使用百度地图生成动态轨迹而犯愁吗？
你还在为百度地图默认的路线不符合自己的轨迹而犯愁吗？
别愁了，向下看，–> 此法为你节约时间，愿你能把更多时间留给生活

一步步来：

高手第一步都是 –> 度娘关键词：bmap，进入第一条,这里你可以找到bmap的所有API；
ps：我是菜鸟，我不走这一步@@_ ，直接进入下一步：
打开IDE，新建HTML类文档，弄个div接收地图，
问题出来了，地图哪儿来的？”*.js”这样的文件能生成地图吗？先写个标签试试吧： <script type="text/javascript" src="这里放什么呢？向下看"></script>
点击链接：生成百度地图开发者密钥，一路疯狂点击配置，直到配置完，给你密钥了回来继续。
没错，就是它：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
var map = new BMap.Map("allmap");生成地图就是这么简单
或许，你可以加上：map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);

切入正题：动态运动轨迹

听着好高大上哇，肯定很难吧@—@
对于路痴来说，肯定知道手机百度地图上有路线规划：最短时间路线，最近距离路线… …
我想说的是，这里一样有这些：
你要从学校去网吧，那么需要两点间动态轨迹运动：(详情见文档)

    // 百度地图实例化          
    var map = new BMap.Map("allmap");         
    map.centerAndZoom(new BMap.Point(113.962196, 22.545144), 13);         
    map.enableScrollWheelZoom(); // 允许滚轮缩放         

    // 怎么走的选择         
    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), {  //小车图片         
        offset: new BMap.Size(0, -5),    //相当于CSS精灵         
        imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。         
    });         
    var p01 = new BMap.Point(113.962196, 22.545144);         
    var p02 = new BMap.Point(113.987268, 22.54884);         
    var p03 = new BMap.Point(113.976281, 22.53543);         
    var p04 = new BMap.Point(113.957956, 22.539636);         

    //生成轨迹线路         
    function run(p3, p2) {         
        p1 = arguments[0];         
        p2 = arguments[1];         
        // 生成路径         
        var walking2 = new BMap.WalkingRoute(map, {
            renderOptions: { map: map, enableDragging: true, autoViewport: true }
        });
        walking2.search(p1, p2);         

        var walking = new BMap.WalkingRoute(map);         
        walking.search(p1, p2);         
        walking.setSearchCompleteCallback(function () {         
            var pts = walking.getResults().getPlan(0).getRoute(0).getPath(); //得到一个数组         

            console.log(pts);         
            setTimeout(function () {         
                jumps(pts);         
            }, 1000);         
        });         
    }         

    // 可以根据轨迹线路跑起来的函数         
    function jumps(pts) {         
        var carMk = new BMap.Marker(pts[0], { icon: myIcon });         
        map.addOverlay(carMk);         
        var i = 0;         
        function resetMkPoint(i) {         
            carMk.setPosition(pts[i]);         
            if (i < pts.length) {         
                setTimeout(function () {         
                    i++;         
                    resetMkPoint(i);         
                }, 2);         
            } else {         
                return         
            }         
        }
        setTimeout(function () {         
            resetMkPoint(1);         
        }, 2)         
    }         

    //传入两个点，跑起来吧         
    run(p03, p02);

两点间很简单，但是这位同学说放学后我要先去食堂吃个饭，再去超市买瓶水，然后去朋友家找朋友，再一起去网吧…唉，唉，我说这位同学，你咋就这么复杂呢…………——#￥%（×（……&×%…………我–擦–前方高能！！！重点来啦。

    //前面的路线选择，轨迹线就不粘贴了，自己补一下
    // 运动轨迹封装
    function run(ar) {
        var arg = ar;
        function p(x, y) {
            var r = [];
            for (var h = 0; h < arguments.length; h++) {
                r.push(arguments[h]);
            }
            var p1 = r[0];
            var p2 = r[1];
            console.log('原始值', arg.indexOf(p1));

            var driving = new BMap.DrivingRoute(map);    //驾车实例
            driving.search(p1, p2);
            driving.setSearchCompleteCallback(function () {
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
                var carMk = new BMap.Marker(pts[0], { icon: myIcon });
                map.addOverlay(carMk);
                var i = 0;
                function resetMkPoint(i) {
                    carMk.setPosition(pts[i]);
                    var s = arg.indexOf(p1);
                    if (i < pts.length) {
                        setTimeout(function () {
                            i++;
                            resetMkPoint(i);
                        }, 20);
                    } else {
                        console.log('当前值', s);
                        if (s < arg.length - 1) {
                            s++;
                            carMk.hide();
                            p(arg[s], arg[s + 1]);
                            console.log('加过后的值', s, arg[s], arg);
                        }
                    }
                }
                setTimeout(function () {
                    resetMkPoint(5);
                }, 100)

            });
        }
        p(arg[0], arg[1]);
    }

    //调用，小菜一碟，放进去几个位置的坐标就好了
    run([学校，食堂，超市，朋友家，网吧]);

贴上未封装的动态轨迹来比较下吧，懒懒的小编已经不想回头再看了，太多了

    window.run = function () {
        var driving = new BMap.DrivingRoute(map);    //驾车实例
        driving.search(myP1, myP2);
        driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
            var paths = pts.length;    //获得有几个点

            var carMk = new BMap.Marker(pts[0], { icon: myIcon });
            map.addOverlay(carMk);
            i = 0;
            function resetMkPoint(i) {
                carMk.setPosition(pts[i]);
                if (i < paths) {
                    setTimeout(function () {
                        i++;
                        resetMkPoint(i);
                    }, 2);
                } else {
                    carMk.hide();
                    window.runs();
                }
            }
            setTimeout(function () {
                resetMkPoint(5);
            }, 100)

        });
    }
    window.runs = function () {
        var driving = new BMap.DrivingRoute(map);    //驾车实例
        driving.search(myP2, myP3);
        driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
            var paths = pts.length;    //获得有几个点

            var carMk = new BMap.Marker(pts[0], { icon: myIcon });
            map.addOverlay(carMk);
            i = 0;
            function resetMkPoint(i) {
                carMk.setPosition(pts[i]);
                if (i < paths) {
                    setTimeout(function () {
                        i++;
                        resetMkPoint(i);
                    }, 20);
                } else {
                    window.runss();
                }
            }
            setTimeout(function () {
                resetMkPoint(5);
            }, 100)

        });
    }

    window.runss = function () {
        var driving = new BMap.DrivingRoute(map);    //驾车实例
        driving.search(myP3, myP4);
        driving.setSearchCompleteCallback(function () {
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
            var paths = pts.length;    //获得有几个点

            var carMk = new BMap.Marker(pts[0], { icon: myIcon });
            map.addOverlay(carMk);
            i = 0;
            function resetMkPoint(i) {
                carMk.setPosition(pts[i]);
                if (i < paths) {
                    setTimeout(function () {
                        i++;
                        resetMkPoint(i);
                    }, 50);
                }
            }
            setTimeout(function () {
                resetMkPoint(5);
            }, 100)

        });
    }

    setTimeout(function () {
        run();
    }, 1500);

最后还是献上封装原理吧，方便各位大侠少虾们使用：
1. 写一个两点间动态轨迹的必包函数p()，
2. 通过父级函数run()给p()传递参数，这里是有讲究的，传参需要转换arguments参数
3. 在run();里面执行一次p(argument[0],arguments[1]);
4. 一次执行完才走出去一步，那就再来执行一次呗，判断第一次执行完了，就把参数的index加1，执行第二次，（详见示例中控制台打印的三组index数据）
5. 判断run()传回去的所有参数全部执行完毕，结束运动。
6. 自己动手实践下吧～～