1625-5 王子昂 总结《2017年4月26日》 【连续第207天总结】
A. 百度地图API和JavaScript 100%
B. 我也不知道怎么就写起了JS……明明没有学过TAT
为了减少与QT的通讯来降低复杂度，在JS的API中尽量完成所有调用
经过一下午的练习和晚上的需求确认，完成了以下功能：
地图空白处右键新增航点
在轨迹上右键可以新增额外航点
拖拽航点
刚开始按照弧线（我也不知道为什么一眼就看上了弧线，明明直线才对）API完成了右键新增端点、拖拽自动连线
想想没法得到端点坐标值来发送，没有意义嘛
于是重头构建，使用折线+标记数组（作为端点）构成航线轨迹，每次修改清除前一次痕迹，然后重新将所有标记依次连接
但是这样的折线是一整根，无法单独操作。在确认到有中间新增端点的需求以后，无奈推倒重来。
使用每两个标记之间搭建一根折线的方式构成。整个程序由抽象的points，实例标记markers、实例折线lines三个数组搭建而成，在新增点的时候由鼠标坐标生成point，然后转换为marker，再与前一个marker相连画出line。
中间新增端点的逻辑则为记录坐标生成point，由指定轨迹得到索引n，然后将n以后的所有对象后移一位，腾出空间放置新点point。然后同理，由point-marker-line的顺序生成。注意：修改后虽然之后的点位置不变，但顺序全部不同，因此必须clear所有Overlays（放置物）重新画出。否则在移动的时候会由于索引不同而产生重影或缺点。
得到记录坐标的方法则由Polyline的事件mousedown得到。另外为了增加可视性，由Polyline的两个事件mouseover和mouseout，再加上setstrokeColor()方法改变颜色，使得鼠标能否点击到折线更加清晰（虽然还是很麻烦就是了）
右键删除航点跟中间新增航点的函数基本相同，甚至更加简单。将三个数组前移，然后将被删除的点的后端轨迹重新计算生成。然后清除、全盘重绘即可。
在添加右键菜单的时候出了点岔子：不知道为什么，marker的右键菜单总是只有第一个marker能正常显示，其他的全部无法调用。百度后发现，是闭包函数的相关问题。我理解为右键菜单被生成后指定为第一个marker的，之后生成的添加的右键菜单也仍然是第一个marker的，因此无法正常弹出。解决方法为使用bind+函数绑定方法。
代码为：
var removeMarker = function(e,ee,marker){
n=markers.indexOf(marker);
del_point(n);
}
...
marker=new BMap.Marker(points[points.length-1]);
var markerMenu=new BMap.ContextMenu(); //覆盖物右键
markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
marker.addContextMenu(markerMenu);注意bind方法是在Item以内的，这个地方参数给错了就无法正常生成菜单，我在这卡了好久_(:з」∠)_看错一个括号全部做完还是挺有成就感的。然而同时也有挺大的挫败感，由于没有JavaScript的编译器，只能直接通过浏览器来显示页面。因此当出现错误的时候，错误指令将会直接跳过，没有任何错误信息。调试只能通过alert()来看哪里异常。这导致了很多无谓的时间浪费，例如少了分号、函数名写错等等。
反正终于做完啦=。=剩下的都交给加勉小伙伴来接收了哦也
附上代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script src="./qwebchannel.js"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=Kh8PB0QGGdXldxYqKObHDtbfEf8eF9SG"></script> <script src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> <script > // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(119.433, 32.193), 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("镇江"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 var points=[]; var markers=[]; var lines=[]; var line = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建线对象 //map.addOverlay(line); //添加到地图中 //line.enableEditing(); //开启编辑功能 //创建右键菜单 var mapMenu=new BMap.ContextMenu(); //地图右键 map.addEventListener("mousedown",function(e){ if(event.button==2) { x=e.point.lng; y=e.point.lat; } }); mapMenu.addItem(new BMap.MenuItem('添加航点',function(e){ newPosition=new BMap.Point(x,y); points.push(newPosition); new_point(); //refresh(); })); map.addContextMenu(mapMenu); var removeMarker = function(e,ee,marker){ n=markers.indexOf(marker); del_point(n); } function new_point() { marker=new BMap.Marker(points[points.length-1]); var markerMenu=new BMap.ContextMenu(); //覆盖物右键 markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker))); marker.addContextMenu(markerMenu); //右键菜单绑定 marker.addEventListener("dragend", function(e){ n=markers.indexOf(e.target); if(n==0) { points[n]=new BMap.Point(e.point.lng,e.point.lat); map.removeOverlay(lines[1]); draw_line(0); map.addOverlay(lines[1]); } else { points[n]=new BMap.Point(e.point.lng,e.point.lat); map.removeOverlay(lines[n]); draw_line(n-1); map.addOverlay(lines[n]); if(n!=lines.length-1)//第二条线 { map.removeOverlay(lines[n+1]); draw_line(n); map.addOverlay(lines[n+1]); } } }) marker.enableDragging(); line=new BMap.Polyline([points[points.length-2],points[points.length-1]],{strokeColor:"blue", strokeWeight:5, strokeOpacity:0.8});//新线 line.addEventListener("mouseover",function(e){e.target.setStrokeColor("red");}) line.addEventListener("mouseout",function(e){e.target.setStrokeColor("blue");}) line.addEventListener("mousedown",function(e){ if(event.button==2){ //新建中间航点 n=lines.indexOf(e.target); point=new BMap.Point(e.point.lng,e.point.lat); change_point(n,point); } }) markers.push(marker); lines.push(line); lines[0]=new BMap.Polyline([0,0],{strokeOpacity:0}); map.addOverlay(marker); map.addOverlay(line); } function change_point(n,point) { map.clearOverlays(); lines.push(lines[lines.length-1]); markers.push(markers[markers.length-1]); points.push(points[points.length-1]); for(var i=lines.length-1;i>n;i--) { lines[i]=lines[i-1]; markers[i]=markers[i-1]; points[i]=points[i-1]; } points[n]=point; marker=new BMap.Marker(point); //marker.addContextMenu(markerMenu); markers[n]=marker; marker.addEventListener("dragend", function(e){ n=markers.indexOf(e.target); points[n]=new BMap.Point(e.point.lng,e.point.lat); map.removeOverlay(lines[n]); draw_line(n-1); map.addOverlay(lines[n]); if(n!=lines.length-1)//第二条线 { map.removeOverlay(lines[n+1]); draw_line(n); map.addOverlay(lines[n+1]); } }) marker.enableDragging(); draw_line(n-1); draw_line(n); for(var i=1;i<lines.length;i++) { map.addOverlay(markers[i]); map.addOverlay(lines[i]); } map.addOverlay(markers[0]); } function del_point(n) { map.clearOverlays(); for(var i=n;i<lines.length-1;i++) { if(i!=0)lines[i]=lines[i+1]; markers[i]=markers[i+1]; points[i]=points[i+1] } lines.length--; markers.length--; points.length--; draw_line(n-1); for(var i=1;i<lines.length;i++) { map.addOverlay(markers[i]); map.addOverlay(lines[i]); } map.addOverlay(markers[0]); } function draw_line(n) { lines[n+1]=new BMap.Polyline([points[n],points[n+1]],{strokeColor:"blue", strokeWeight:5, strokeOpacity:0.8}); lines[n+1].addEventListener("mouseover",function(e){e.target.setStrokeColor("red");}) lines[n+1].addEventListener("mouseout",function(e){e.target.setStrokeColor("blue");}) lines[n+1].addEventListener("mousedown",function(e){ if(event.button==2){ //新建中间航点 n=lines.indexOf(e.target); point=new BMap.Point(e.point.lng,e.point.lat); change_point(n,point); } }) } //消息函数 function send(n,x,y)//n为修改点的个数，若为新增点则在n前加0。x和y分别为该点的当前坐标 { sendMessage(n,x,y); } function recv(x,y)//新增点的x和y的坐标 { newPosition=new BMap.Point(x,y); points.push(newPosition); new_point(); } function change_order(n,b)//n为修改点的索引，b为0时提前（上升），b为1时推后（下降）,b为-1时删除该点 { if(b==1) { //下降 if(n!=markers.length-1) { line=lines[n]; marker=markers[n]; point=points[n]; lines[n]=lines[n+1]; markers[n]=markers[n+1]; points[n]=points[n+1]; lines[n+1]=line; markers[n+1]=marker; points[n+1]=point; } } elseif(b==0) { //上升 if(n!=0) { line=lines[n]; marker=markers[n]; point=points[n]; if(n!=1)lines[n]=lines[n-1]; markers[n]=markers[n-1]; points[n]=points[n-1]; if(n!=1)lines[n-1]=line; markers[n-1]=marker; points[n-1]=point; } } else { del_point(n); } } window.onload = function() { //new QWebChannel(qt.webChannelTransport, function(channel) {; // make dialog object accessible globally //content = channel.objects.content; //把对象赋值到JS中 //content.receiveText("s"); //c++中调用类中的函数一样 // } alert("sss"); } </script> </body> </html>
C. 明日计划
汇编语言
3860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
