<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全插件</title> <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=yzmcuroeXsnCGNAjnAtvUp9Xh8eXcrTm&services=&t=20180823194355"></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="開啟測距" onclick="myDis.open();" /> <input type="button" value="關閉測距" onclick="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>
效果
