百度地图标点,信息框,绘画工具,轨迹回放。

 1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>百度离线版2.0DEMO</title>
  6 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak="></script><!-- 这里的ak自己去百度获取-->
  7 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>  
  8     <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
  9     <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />  
 10     <!--加载检索信息窗口-->  
 11     <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>  
 12     <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />  
 13 <link rel="stylesheet" type="text/css" href="css/bmap.css"/>
 14 </head>
 15 <body>
 16 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
 17 <input type="button" id="btn" name="btn" value="加点" onclick="addPoint()" />
 18 <input type="button" id="btn" name="btn" value="移除事件" onclick="removeEvent()" />
 19 <div id="result"></div>
 20     <button id="run">开始</button>
 21     <button id="stop">停止</button>
 22     <button id="pause">暂停</button>
 23     <button id="hide">隐藏信息窗口</button>
 24     <button id="show">展示信息窗口</button>
 25 </body>
 26 </html>
 27 <script type="text/javascript">
 28 var arrPois=[new BMap.Point(116.403984,39.914004) ];//一个数组,用来存放路书的坐标点
 29 var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP});      //设置卫星图为底图
 30 var point = new BMap.Point(111.404, 40.915);    // 创建点坐标
 31 map.centerAndZoom(point,5);                     // 初始化地图,设置中心点坐标和地图级别。
 32 
 33 //map.addControl(new BMap.MapTypeControl());
 34 map.addControl(new BMap.NavigationControl());
 35 map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
 36 map.enableKeyboard();                         // 启用键盘操作。  
 37 //map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
 38 
 39 //
 40 function savePoint(){//鼠标示例  鼠标点击拾取坐标点
 41 alert(document.getElementById("test").value);
 42 infoWindow.close();
 43 infoWindow=[];
 44 }
 45 function del(arg){//点击时 地图上添加的点错误时删除
 46 for(var i=0;i<arr.length;i++){
 47 if(arr[i].k==arg){
 48 map.removeOverlay(arr[i].marker);
 49 break;
 50 }
 51 }
 52 }
 53 function addPoint(){//往地图上加点
 54 map.addEventListener('click', clickEvent);
 55 }
 56 function removeEvent(){//移除click事件 
 57 map.removeEventListener('click', clickEvent);
 58 infoWindow.close();
 59 infoWindowEdit.close();
 60 }
 61 var k=0;//用来区别marker
 62 var infoWindow; // 将消息框添加到地图中
 63 var infoWindowEdit;
 64 var arr=new Array();//存放添加的点  方便删除
 65 var clickEvent=function(e){
 66 var lat=e.point.lat;
 67 var lng=e.point.lng;
 68 var point  = new BMap.Point(lng, lat);
 69 var marker = new BMap.Marker(point);  // 创建标注
 70 arrPois.push(new BMap.Point(lng,lat));//往路书的坐标点数组添加数据
 71 map.addOverlay(marker);
 72 arr.push({"lat":lat,"lng":lng,"point":point,"marker":marker,"k":++k});      
 73        var html = [];
 74        html.push("<div class=\"detailCarTip\" style='width:350px;height:100px'  >");
 75        html.push("<div style='font-size:14px;font-weight:bold;width:350px;'>" + "(" + "车辆信息title" + ")</div>");  //车辆信息
 76        html.push("<div style='border-bottom:1px solid #ff0000;style='width:350px;height:100px'></div>");     // 红线
 77        html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:350px;height:100px' ");
 78        html.push("<tr>");
 79        html.push("<td><label>"+ "位置:" +"</label><input type='text' id='test' name='test' /></td>");
 80        html.push("<td><input type='button' id='test' name='test' value='保存' onclick='savePoint()' /></td><td><input type='button' id='test' name='test' value='删除' onclick=\'del("+k+")\' /></td></td><td><input type='button' id='test' name='test' value='完成' onclick='removeEvent()' /></td>"
 81         );
 82        html.push("</tr>");
 83        html.push("</table>");
 84        html.push("</div>");
 85        infoWindow = new BMap.InfoWindow(html.join(""), {enableMessage: false,enableCloseOnClick:false});  // 创建信息窗口对象
 86        marker.openInfoWindow(infoWindow); //开启信息窗口
 87 
 88 
 89 
 90 
 91        marker.addEventListener("click", function (e) { //点击时才打开消息框 
 92         var newLat=lat;
 93         var newLng=lng;
 94         var m;
 95         for(var i=0;i<arr.length;i++){
 96         if(arr[i].lat==newLat && arr[i].lng==newLng){
 97         m=arr[i].k;
 98         }
 99         }
100         var val=newLat+"---"+newLng;
101        var html = [];
102        html.push("<div class=\"detailCarTip\" style='width:350px;height:100px'  >");
103        html.push("<div style='font-size:14px;font-weight:bold;width:350px;'>" + "(" + "车辆信息title" + ")</div>");  //车辆信息
104        html.push("<div style='border-bottom:1px solid #ff0000;style='width:350px;height:100px'></div>");     // 红线
105        html.push("<table cellpadding=\"0\" cellspacing=\"0\" style='width:350px;height:100px' ");
106        html.push("<tr>");
107        html.push("<td><label>"+ "位置:" +"</label><input type='text' id='test' name='test' value="+"\""+val+"\""+"/></td>");//判断是否同一个marker
108        html.push("<td><input type='button' id='test' name='test' value='保存' onclick='savePoint()' /></td><td><input type='button' id='test' name='test' value='删除' onclick=\'del("+m+")\' /></td></td><td><input type='button' id='test' name='test' value='完成' onclick='removeEvent()' /></td>"
109         );
110        html.push("</tr>");
111        html.push("</table>");
112        html.push("</div>");
113        infoWindowEdit = new BMap.InfoWindow(html.join(""), {enableMessage: false,enableCloseOnClick:false});  // 创建信息窗口对象
114         marker.openInfoWindow(infoWindowEdit); //开启信息窗口
115        });
116 
117 }
118 
119 //新增方法  先创建 infow 这样才能在调用map.openInfoWindow(infoWindow,point);时  默认添加图标就是打开info窗口的
120 
121
148 //开启绘画功能
149     var circle = new BMap.Circle(point,1000);
150     circle.setFillColor("#A6CBA1"); //填充颜色
151     circle.setStrokeColor("#A6CBA1"); //边线颜色
152     map.addOverlay(circle);            //增加圆
153     
154 var drawingManager = new BMapLib.DrawingManager(map, {
155                     isOpen: false, //是否开启绘制模式
156                     enableDrawingTool: true, //是否显示工具栏
157                     enableCalculate: false,
158                     drawingToolOptions: {
159                         anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
160                         offset: new BMap.Size(5, 5), //偏离值
161                      drawingModes : [BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE],
162                       drawingTypes : [
163                                    // BMAP_DRAWING_MARKER,  
164                                     BMAP_DRAWING_CIRCLE,//圆的样式
165                                     BMAP_DRAWING_POLYLINE,
166                                     BMAP_DRAWING_POLYGON,
167                                     BMAP_DRAWING_RECTANGLE //矩形的样式
168                             ]
169                     },
170                 });
171 
172 
173 //路书,轨迹回放
174 var lushu;
175     // 实例化一个驾车导航用来生成路线
176   //  var drv = new BMap.DrivingRoute('北京', {
177    //     onSearchComplete: function(res) {
178     //        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
179               //  var plan = res.getPlan(0);
180                // var arrPois =[];
181 //                for(var j=0;j<plan.getNumRoutes();j++){
182                  //   var route = plan.getRoute(j);
183                  //   arrPois= arrPois.concat(route.getPath());
184                // }
185       
186             //    map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
187                 map.setViewport(arrPois);
188                    marker=new BMap.Marker(arrPois[0],{
189                       icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
190                    });
191       var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
192       label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
193                 marker.setLabel(label);
194                  
195       map.addOverlay(marker);
196      BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
197             var pointsArr=[initPos,targetPos];  //点数组
198             var me = this,
199                 //当前的帧数
200                 currentCount = 0,
201                 //步长,米/秒
202                 timer = 10,
203                 step = this._opts.speed / (1000 / timer),
204                 //初始坐标
205                 init_pos = this._projection.lngLatToPoint(initPos),
206                 //获取结束点的(x,y)坐标
207                 target_pos = this._projection.lngLatToPoint(targetPos),
208                 //总的步长
209                 count = Math.round(me._getDistance(init_pos, target_pos) / step);
210                  //显示折线 syj201607191107
211             this._map.addOverlay(new BMap.Polyline(pointsArr, { 
212                 strokeColor : "#111", 
213                 strokeWeight : 5, 
214                 strokeOpacity : 0.5 
215             })); // 画线 
216             //如果小于1直接移动到下一点
217             if (count < 1) {
218                 me._moveNext(++me.i);
219                 return;
220             }
221             me._intervalFlag = setInterval(function() {
222             //两点之间当前帧数大于总帧数的时候,则说明已经完成移动
223                 if (currentCount >= count) {
224                     clearInterval(me._intervalFlag);
225                     //移动的点已经超过总的长度
226                     if(me.i > me._path.length){
227                         return;
228                     }
229                     //运行下一个点
230                     me._moveNext(++me.i);
231                 }else {
232                         currentCount++;
233                         var x = effect(init_pos.x, target_pos.x, currentCount, count),
234                             y = effect(init_pos.y, target_pos.y, currentCount, count),
235                             pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
236                         //设置marker
237                         if(currentCount == 1){
238                             var proPos = null;
239                             if(me.i - 1 >= 0){
240                                 proPos = me._path[me.i - 1];
241                             }
242                             if(me._opts.enableRotation == true){
243                                  me.setRotation(proPos,initPos,targetPos);
244                             }
245                             if(me._opts.autoView){
246                                 if(!me._map.getBounds().containsPoint(pos)){
247                                     me._map.setCenter(pos);
248                                 }  
249                             }
250                         }
251                         //正在移动
252                         me._marker.setPosition(pos);
253                         //设置自定义overlay的位置
254                         me._setInfoWin(pos);  
255                     }
256             },timer);
257         };
258                 lushu = new BMapLib.LuShu(map,arrPois,{
259                 defaultContent:"粤A30780",//"从天安门到百度大厦"
260                 autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
261                 icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
262                 speed: 100,
263                 enableRotation:true,//是否设置marker随着道路的走向进行旋转
264                    landmarkPois:[
265                    {lng:116.306954,lat:40.05718,html:'加油站',pauseTime:2}
266                   ]
267                     
268                 }); 
269          
270       marker.addEventListener("click",function(){
271         marker.enableMassClear();   //设置后可以隐藏改点的覆盖物
272         marker.hide();
273         lushu.start();
274         //map.clearOverlays();  //清除所有覆盖物
275       });
276             //}
277 //        }
278   //  });
279     //drv.search('天安门', '百度大厦');
280      // lushu.start();
281      // lushu.pause();
282     //绑定事件
283     $("run").onclick = function(){
284       marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
285       marker.hide();
286       lushu.start();
287      // map.clearOverlays();    //清除所有覆盖物
288     }
289     $("stop").onclick = function(){
290         lushu.stop();
291     }
292     $("pause").onclick = function(){
293         lushu.pause();
294     }
295     $("hide").onclick = function(){
296         lushu.hideInfoWindow();
297     }
298     $("show").onclick = function(){
299         lushu.showInfoWindow();
300     }
301     function $(element){
302         return document.getElementById(element);
303     }
304 
305 </script>
posted @ 2019-08-28 15:30  聽丶  阅读(447)  评论(0编辑  收藏  举报