百度地圖API使用第一彈     ——動態軌跡運動封裝

你還在為冗雜的百度地圖API看著看著就想睡覺而犯愁嗎？
你還在不會使用百度地圖生成動態軌跡而犯愁嗎？
你還在為百度地圖預設的路線不符合自己的軌跡而犯愁嗎？
別愁了，向下看，–> 此法為你節約時間，願你能把更多時間留給生活

一步步來：

1. 高手第一步都是 –> 度娘關鍵詞：bmap，進入第一條,這裡你可以找到bmap的所有API；
   ps： 我是菜鳥，我不走這一步@@_ ，直接進入下一步：
2. 開啟IDE，新建HTML類文件，弄個div接收地圖，

3. 問題出來了，地圖哪兒來的？”*.js”這樣的檔案能生成地圖嗎？先寫個標籤試試吧： <script type="text/javascript" src="這裡放什麼呢？向下看"></script>

4. 點選連結：生成百度地圖開發者金鑰，一路瘋狂點選配置，直到配置完，給你金鑰了回來繼續。

5. 沒錯，就是它：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的金鑰"></script>
6. var map = new BMap.Map("allmap");生成地圖就是這麼簡單
7. 或許，你可以加上：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. 自己動手實踐下吧～～

demo地址：