1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>百度地圖軌跡運動</title> 6 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR KEY"></script> 7 <style type="text/css"> 8 #allmap { 9 width: auto; 10 height: 600px; 11 border: 1px solid gray; 12 } 13 14 #user1 { 15 top: 80px; 16 } 17 18 #user2 { 19 top: 200px; 20 } 21 22 .user-list { 23 right: 25px; 24 position: fixed; 25 border: 1px solid #c0c0c0; 26 width: 180px; 27 height: 110px; 28 background: #fff; 29 border-radius: 10px; 30 filter: alpha(Opacity=80); 31 -moz-opacity: 0.8; 32 opacity: 0.8; 33 } 34 35 .user-list ul { 36 list-style-type: none; 37 padding-left: 10px; 38 } 39 40 .user-list ul li { 41 padding-bottom: 10px; 42 } 43 </style> 44 </head> 45 <body> 46 經度：<input id="lng" type="text" placeholder="輸入地圖經度"> 47 緯度：<input id="lat" type="text" placeholder="輸入地圖緯度" required=""> 48 <button id="addPoint" onclick="run();">添加軌跡</button><br /><br /> 49 <div id="allmap"></div> 50 <div id="user1" class="user-list"> 51 <ul> 52 <li>姓名：張三</li> 53 <li>職務：3</li> 54 <li>電話：13552307638</li> 55 </ul> 56 </div> 57 <div id="user2" class="user-list"> 58 <ul> 59 <li>姓名：李四</li> 60 <li>職務：3</li> 61 <li>電話：13552307638</li> 62 </ul> 63 </div> 64 <script type="text/javascript"> 65 //百度地圖API 66 var map = new BMap.Map("allmap"); 67 map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); 68 map.enableScrollWheelZoom(true); //啟動滾輪放大縮小 69 map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 70 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 71 map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件 72 73 var poinArr = new Array(); 74 75 poinArr[poinArr.length] = new BMap.Point(106.521436, 29.532288); //起點默認為重慶 76 77 //起點-重慶 106.521436, 29.532288 添加到文本框的幾點坐標點（測試）,注意坐標點需要有規律些喔！ 78 //終點-西安 108.983569, 34.285675 79 //終點-北京 116.404449, 39.920423 80 //終點-沈陽 123.432790, 41.808644 81 window.run = function () { 82 var log = document.getElementById("lng").value; //地圖經度 83 var lat = document.getElementById("lat").value; //地圖緯度 84 85 //根據用戶添加的點動態添加地圖軌跡 86 poinArr[poinArr.length] = new BMap.Point(log, lat); 87 map.clearOverlays(); //清除地圖上所有的覆蓋物 88 var driving = new BMap.DrivingRoute(map); //創建駕車實例 89 90 if (poinArr.length > 1) { 91 for (var i = 1; i < poinArr.length; i++) { 92 driving.search(poinArr[i - 1], poinArr[i]); 93 } 94 } 95 driving.setSearchCompleteCallback(function () { 96 var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組 97 var polyline = new BMap.Polyline(pts); 98 map.addOverlay(polyline); 99 var m1 = new BMap.Marker(poinArr[0]); 100 map.addOverlay(m1); //紅標記 101 lab1 = new BMap.Label("起點", { position: poinArr[0] }); 102 map.addOverlay(lab1); //標記起點 103 for (var i = 1; i < poinArr.length; i++) { 104 var m = new BMap.Marker(poinArr[i]); 105 map.addOverlay(m); 106 lab = new BMap.Label("終點", { position: poinArr[i] }); 107 map.addOverlay(lab); 108 } 109 setTimeout(function () { 110 map.setViewport(poinArr); //調整到最佳視野 111 }, 1000); 112 }); 113 } 114 </script> 115 </body> 116 </html>
