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 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 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>
