24124

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

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>

来源:博客园

作者:聽丶

链接:https://www.cnblogs.com/xu1115/p/11424353.html

Recommend