複製出以下代碼至xxx.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.3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<input type="button" value="開啓測距" οnclick="myDis.open();" />
<input type="button" value="關閉測距" οnclick="myDis.close()" />
<div id="results" style="font-size:13px;margin-top:10px;"></div>
</body>
</html>
<script type="text/javascript">
//map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
//map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));//地圖|衛星|三維 控件
//map.setCurrentCity("濟南");
//百度map API http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&3_0#3&0
var map = new BMap.Map("container"); // 創建Map實例
var point = new BMap.Point(117.025, 36.666); // 創建點座標
var myDis = new BMapLib.DistanceTool(map); //測距插件
map.centerAndZoom(point,13); // 初始化地圖,設置中心點座標和地圖級別。
map.enableScrollWheelZoom(); // 啓用滾輪放大縮小。
map.enableKeyboard(); // 啓用鍵盤操作。
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} // 添加平移縮放控件(個性化)
map.addControl(new BMap.NavigationControl(opts));// 添加平移縮放控件(個性化)
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地圖|混合 控件
//=======================================
var contextMenu = new BMap.ContextMenu();//創建右鍵對象
var txtMenuItem = [
{ text:'折線測距',callback:function(){myDis.open()}},
{ text:'在此添加標註',
callback:function(p){
var marker = new BMap.Marker(p), px = map.pointToPixel(p);
map.addOverlay(marker);
}
}
];
for(var i=0; i < txtMenuItem.length; i++){
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==1 || i==3) {
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
//===================開始 結束 測距 start===================
var transit = new BMap.DrivingRoute(map, {
renderOptions: {map: map,panel: "results", autoViewport: true},
onMarkersSet: function(pois){
var start = pois[0].marker, end = pois[1].marker;
start.enableDragging();//開啓起點拖拽功能
end.enableDragging();//開啓終點拖拽功能
start.addEventListener("dragend",function(e){
map.clearOverlays();
transit.search(e.point,end.getPosition());
});
end.addEventListener("dragend",function(e){
map.clearOverlays();
transit.search(start.getPosition(),e.point);
});
}
});
transit.search("泉城廣場","洪家樓");
//===================開始 結束 測距 end ===================
//默認紅色標註
//var marker = new BMap.Marker(new BMap.Point(116.987, 36.666)); // 創建標註
//map.addOverlay(marker); // 將標註添加到地圖中
//var myPushpin = new BMap.PushpinTool(map); // 創建標註工具實例
//myPushpin.addEventListener("markend", function(e){ // 監聽事件，提示標註點座標信息
// alert("您標註的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);//獲取座標
// alert("您標註的位置："+e.point.lng+","+e.point.lat);//另一種獲取座標
//});
//myPushpin.open();
//var myP1 = new BMap.Point(117.025, 36.666); //起點
//var myP2 = new BMap.Point(117, 36.666); //終點
//var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //駕車實例
//driving2.search(myP1, myP2); //顯示一條公交線路
//創建小狐狸
//var pt = new BMap.Point(116.991, 36.666);
//var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/fox.gif", new BMap.Size(300,157));
//var marker = new BMap.Marker(pt,{icon:myIcon}); // 創建標註
//map.addOverlay(marker); // 將標註添加到地圖中
//讓小狐狸說話（創建信息窗口）
//var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看見我啦！我可不常出現哦！</p>");
//marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});
//marker.enableDragging(true); // 設置標註可拖拽
</script>