百度地图动态添加轨迹坐标点

  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>