一、創建地圖
首先要告訴大家的是，API1.2版本取消密鑰，取消服務設置，大家可以采用更加簡短的方式引用API的JS啦~
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
大家跟我一起來創建一張簡單的地圖：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
然后為地圖加上一些合適的控件：
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
我手工找到的重慶、西安、北京三個城市的坐標點，使用坐標拾取工具（請點擊）可以輕松找到這三個經緯度。
當然，你也可以使用localsearch類的search方法。這個可以隨意。
找到坐標點之后，創建三個點對象。
var myP1 = new BMap.Point(106.521436,29.532288); //起點-重慶
var myP2 = new BMap.Point(108.983569,34.285675); //終點-西安
var myP3 = new BMap.Point(116.404449,39.920423); //終點-北京
二、創建一個駕車導航和兩個駕車搜索
好啦，現在來創建一個駕車導航吧~
這句話是不是很簡單？用這句話就可以創建駕車導航啦。
var driving = new BMap.DrivingRoute(map); //創建駕車實例
然后寫兩個搜索方法：
第一個是搜索從重慶到西安的，第二個是從西安到北京的。
driving.search(myP1, myP2); //第一個駕車搜索
driving.search(myP2, myP3); //第二個駕車搜索
三、自己繪制折線
接下來，我們在回調函數setSearchCompleteCallback中，把搜索完畢的路線繪制出來。
注意哦，這里是兩個搜索的路線都繪制出來了哦~~
就這么簡單的三句話，很簡單吧。
第一句、獲取數組
第二句、創建折線
第三句、添加折線覆蓋物
driving.setSearchCompleteCallback(function(){
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組
var polyline = new BMap.Polyline(pts);
map.addOverlay(polyline);
}
這個時候，整個駕車導航就是這個樣子滴，簡直充滿了喜感，像一條蚯蚓呢 O(∩_∩)O~
四、添加起點、終點、途經點marker
其實這個途經點，可以做成像百度地圖首頁的駕車導航那樣，有紅綠色的起點終點圖標。如下圖：
注意：這一點，大家隨意，大家想加marker（可以更換任意的icon圖片），或者想加label，甚至是別的什么覆蓋物，都是OK的。
API技術咨詢
請先下載百度HI聊天工具
JS版HI群:1357363
移動版HI群:1363111
但是呢，我還是喜歡紅色的標注啦，我還可以加上文字標注。
所以，我簡單地用紅色marker加label來表示了。如下圖。
添加marker和label的代碼如下：
var m1 = new BMap.Marker(myP1); //創建3個marker
var m2 = new BMap.Marker(myP2);
var m3 = new BMap.Marker(myP3);
map.addOverlay(m1);
map.addOverlay(m2);
map.addOverlay(m3);
var lab1 = new BMap.Label("起點",{position:myP1}); //創建3個label
var lab2 = new BMap.Label("途徑點",{position:myP2});
var lab3 = new BMap.Label("終點",{position:myP3});
map.addOverlay(lab1);
map.addOverlay(lab2);
map.addOverlay(lab3);
五、調整到最佳視野
個人認為setViewport是個非常有用的好東西。因為它可以把你的標注展示到一個最完美的視野內。
如果不加setViewport，你的地圖可能只會出現一半的有效視野，而不是完整的3個標注都有。如下圖：
代碼很簡單，先來看看類參考：
就是說，只要有點對象數組傳進去，系統就會幫你完成最佳視野的展示！！
map.setViewport([myP1,myP2,myP3]); //調整到最佳視野
小貼士：你可以做一個延時動畫，讓最佳視野的展示更漂亮！
另外，marker也是可以有動畫的，不要忽略了。詳見：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1#3&1
六、完整代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>駕車途經點</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<p><input type='button' value='開始' onclick='run();' /></p>
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
var myP1 = new BMap.Point(106.521436,29.532288); //起點-重慶
var myP2 = new BMap.Point(108.983569,34.285675); //終點-西安
var myP3 = new BMap.Point(116.404449,39.920423); //終點-北京
window.run = function (){
map.clearOverlays(); //清除地圖上所有的覆蓋物
var driving = new BMap.DrivingRoute(map); //創建駕車實例
driving.search(myP1, myP2); //第一個駕車搜索
driving.search(myP2, myP3); //第二個駕車搜索
driving.setSearchCompleteCallback(function(){
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組 var polyline = new BMap.Polyline(pts); map.addOverlay(polyline); var m1 = new BMap.Marker(myP1); //創建3個marker var m2 = new BMap.Marker(myP2); var m3 = new BMap.Marker(myP3); map.addOverlay(m1); map.addOverlay(m2); map.addOverlay(m3); var lab1 = new BMap.Label("起點",{position:myP1}); //創建3個label var lab2 = new BMap.Label("途徑點",{position:myP2}); var lab3 = new BMap.Label("終點",{position:myP3}); map.addOverlay(lab1); map.addOverlay(lab2); map.addOverlay(lab3); setTimeout(function(){ map.setViewport([myP1,myP2,myP3]); //調整到最佳視野 },1000); });}</script>