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

 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>

猜你喜欢

转载自www.cnblogs.com/xu1115/p/11424353.html