怎样建设网站最好,网站建设英文文献目录,wordpress图片添加音乐,freeserver 免费服务器申请小组成员#xff1a;高达#xff0c;程超然 项目目的#xff1a;能算出地铁搭乘的最优路线并显示在地图上 个人任务#xff1a;调用队友写好的java代码#xff0c;将结果显示在网页上 新的知识#xff1a;百度地图API#xff0c;使用JQuery的AJAX异步提交 进度#xff…小组成员高达程超然 项目目的能算出地铁搭乘的最优路线并显示在地图上 个人任务调用队友写好的java代码将结果显示在网页上 新的知识百度地图API使用JQuery的AJAX异步提交 进度画出了部分地铁图用于测试实现了地铁线路的定位可以在网页上使用文字展示路线 尚未实现图像展示路线尚未实现图像的删除尚未实现站点的点击事件 二人组队总结 分工明确 两个人使用的地图不一样。我发现之前同学发在群里的图是错误的在地图上已经建成的地铁和图中的不一致但那时数据库里的数据已经输入完毕便没有改。但是我画图找不到地点画图时改成了正确的地铁图。 mysql的版本我原来使用5.7近期换成8.0但是mysql-connector没有换导致数据库连接失败。 我刚开始觉得我需要xy坐标来定位所以想让返回的参数是xy坐标数据库里也预留了相应的位置没有输入数据。后来发现有的站点之间的线并不是直线。于是更改为序号作为定位。数据库里尚未输入对应信息。 过程 悬浮框的实现不再赘述。 我从老师哪里了解到可以直接用百度现成的接口于是上网搜索百度地图。 经过各种教程查找我明白要在百度地图开放平台申请一个应用并获得密匙。 白名单设置用于约束访问的地址我直接设置为*。 接下来使用 script typetext/javascript srchttp://api.map.baidu.com/api?v2.0ak你的密匙/script 就可以调用百度地图的接口了。 非常棒的是百度地图提供了很多示例http://lbsyun.baidu.com/jsdemo.htm#subway0_0 照猫画虎地我调出了石家庄的地图。 1 var map new BMap.Map(allmap); // 创建Map实例2 map.centerAndZoom(new BMap.Point(114.6426,38.20145), 13); // 初始化地图,设置中心点坐标和地图级别3 //添加地图类型控件4 map.addControl(new BMap.MapTypeControl({5 mapTypes:[6 BMAP_NORMAL_MAP,7 BMAP_HYBRID_MAP8 ]})); 9 map.setCurrentCity(石家庄); // 设置地图显示的城市 此项是必须设置的
10 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 虽然百度地图提供了现成的地铁图。但是老师让我们设计的是存在于未来的规划图。共计6条目前建了两条百度地图上也显示的是这两条 所以自己画吧百度地图提供了点线圆等方法 坐标获取使用了百度地图的坐标拾取系统http://api.map.baidu.com/lbsapi/getpoint/index.html 画一个点并标注名字 1 function setPoint(x,y,name,direction)//创建站点2 {3 var px,py;4 var point new BMap.Point(x,y);//创建点5 var circle new BMap.Circle(point,200,{strokeColor:black, strokeWeight:5, strokeOpacity:1}); //创建圆//6 circle.setFillColor(#ffffff);7 map.addOverlay(circle); 8 //文字方向选择9 switch(direction)
10 {
11 case 1://上
12 {
13 px-20;
14 py-50;
15 break;
16 }
17 case 2://下
18 {
19 break;
20 }
21 case 3://左
22 {
23 px-30;
24 py-10;
25 break;
26 }
27 case 4://右
28 {
29 px30;
30 py-10;
31 break;
32 }
33 }
34
35 var opts {position : point,offset:new BMap.Size(px, py)}
36 var label new BMap.Label(name, opts); // 创建文本标注对象
37 label.setStyle({color : black,fontSize : 12px,height : 20px,lineHeight : 20px,fontFamily:微软雅黑});
38 map.addOverlay(label);
39 } 所有的点 1 setPoint(114.64192,38.189343,东洋,4);2 setPoint(114.628268,38.167745,东上泽,4);3 setPoint(114.62759,38.160134,天元湖,4);4 setPoint(114.627449,38.14953,园博园,4);5 setPoint(114.627305,38.138874,行政中心,4);6 setPoint(114.62137,38.129852,会展中心,4);7 setPoint(114.634152,38.096772,东庄,4);8 setPoint(114.634402,38.088129,西庄,4);9 setPoint(114.634787,38.075265,洨河大道,4);
10 setPoint(114.635236,38.065713,南村,4);
11 setPoint(114.635676,38.054882,石家庄东,4);
12 setPoint(114.62989,38.04387,火炬广场,4);
13 setPoint(114.614825,38.04399,留村,1);
14 setPoint(114.592682,38.050428,白佛,4);
15 setPoint(114.582999,38.050094,朝晖桥,1);
16 setPoint(114.568896,38.049525,谈固,1);
17 setPoint(114.552434,38.049006,北宋,1);
18 setPoint(114.539294,38.048844,体育场,1);
19 setPoint(114.528438,38.048592,博物院,1);
20 setPoint(114.518483,38.049043,北国商城,1);
21 setPoint(114.507972,38.049667,平安大街,1);
22 setPoint(114.493744,38.049809,解放广场,1);
23 setPoint(114.483772,38.049448,新百广场,1);
24 setPoint(114.472184,38.048965,烈士陵园,1);
25 setPoint(114.458637,38.048111,和平医院,1);
26 setPoint(114.44353,38.047209,长城桥,1);
27 setPoint(114.429246,38.046385,时光街,1);
28 setPoint(114.415825,38.045975,西王,1);
29 setPoint(114.388983,38.042902,上庄,4);
30 setPoint(114.386238,38.031524,上庄南,4); 画一条线 1 function setLine(x1,y1,x2,y2,color)//画出直线
2 {
3 var polyline new BMap.Polyline([
4 new BMap.Point(x1, y1),
5 new BMap.Point(x2, y2)
6 ], {strokeColor:color, strokeWeight:21, strokeOpacity:1});//创建
7 map.addOverlay(polyline);
8 } 所以的线 1 setLine(114.64192,38.189343,114.628268,38.167745,red);//东洋-东上泽2 setLine(114.628268,38.167745,114.62759,38.160134,red);//东上泽-天元湖3 setLine(114.62759,38.160134,114.627449,38.14953,red);//天元湖-园博园4 setLine(114.627449,38.14953,114.627305,38.138874,red);//园博园-行政中心5 setLine(114.627305,38.138874,114.62137,38.129852,red);//行政中心-会展中心6 setLine(114.62137,38.129852,114.634152,38.096772,red);//会展中心-东庄7 setLine(114.634152,38.096772,114.634402,38.088129,red);//东庄-西庄8 setLine(114.634402,38.088129,114.634787,38.075265,red);//西庄-洨河大道9 setLine(114.634787,38.075265,114.635236,38.065713,red);//洨河大道-南村
10 setLine(114.635236,38.065713,114.635676,38.054882,red);//南村-石家庄东
11 setLine(114.635676,38.054882,114.635984,38.044023,red);///石家庄东-
12 setLine(114.635984,38.044023,114.62989,38.04387,red);//-火炬广场
13 setLine(114.62989,38.04387,114.614825,38.04399,red);//火炬广场-留村
14 setLine(114.614825,38.04399,114.5976,38.043412,red);//留村-
15 setLine(114.5976,38.043412,114.592682,38.050428,red);//-白佛
16 setLine(114.592682,38.050428,114.582999,38.050094,red);//白佛-朝晖桥
17 setLine(114.582999,38.050094,114.568896,38.049525,red);//朝晖桥-谈固
18 setLine(114.568896,38.049525,114.552434,38.049006,red);//谈固-北宋
19 setLine(114.552434,38.049006,114.539294,38.048844,red);//北宋-体育场
20 setLine(114.539294,38.048844,114.528438,38.048592,red);//体育场-博物院
21 setLine(114.528438,38.048592,114.518483,38.049043,red);//博物院-北国商城
22 setLine(114.518483,38.049043,114.507972,38.049667,red);//北国商城-平安大街
23 setLine(114.507972,38.049667,114.493744,38.049809,red);//平安大街-解放广场
24 setLine(114.493744,38.049809,114.483772,38.049448,red);//解放广场-新百广场
25 setLine(114.483772,38.049448,114.472184,38.048965,red);//新百广场-烈士陵园
26 setLine(114.472184,38.048965,114.458637,38.048111,red);//烈士陵园-和平医院
27 setLine(114.458637,38.048111,114.44353,38.047209,red);//和平医院-长城桥
28 setLine(114.44353,38.047209,114.429246,38.046385,red);//长城桥-时光街
29 setLine(114.429246,38.046385,114.415825,38.045975,red);//时光街-西王
30 setLine(114.415825,38.045975,114.388983,38.042902,red);//西王-上庄
31 setLine(114.388983,38.042902,114.386238,38.031524,red);//上庄-上庄南 如何实现标注某一段路线呢 首先得明确每一段路线但是如上所述有的线是弯的不能简单地用两个坐标表示。 所以我想到了使用一个switch 比如但就一条线来说假如要标识序号为3-5的点之间的线 从case 3开始执行画3-4的线到case 5判断5endNum(5)不画线break跳出 这样就执行了3-5之间的画线 但是经过测试我发现startNumdocument.getElementById(startNum).value;是一个String类型的变量没法使用switch 于是算法不变改写成if else语句 1 function drawALine(listNum,start,end,flag)//画出一段直线2 {3 if(flag0)4 {5 var astart;6 startend;7 enda;8 }9 //alert(start#end);10 if(listNum1)//地铁1号线11 {12 if(start0end0)13 {14 setLine(114.64192,38.189343,114.628268,38.167745,green);//东洋-东上泽15 setPoint(114.64192,38.189343,东洋,4);16 setPoint(114.628268,38.167745,东上泽,4);17 }18 if(start1end1)19 {20 setLine(114.628268,38.167745,114.62759,38.160134,green);//东上泽-天元湖21 setPoint(114.628268,38.167745,东上泽,4);22 setPoint(114.62759,38.160134,天元湖,4);23 }24 if(start2end2)25 {26 setLine(114.62759,38.160134,114.627449,38.14953,green);//天元湖-园博园27 setPoint(114.62759,38.160134,天元湖,4);28 setPoint(114.627449,38.14953,园博园,4);29 }30 if(start3end3)31 {32 setLine(114.627449,38.14953,114.627305,38.138874,green);//园博园-行政中心33 setPoint(114.627449,38.14953,园博园,4);34 setPoint(114.627305,38.138874,行政中心,4);35 }36 if(start4end4)37 {38 setLine(114.627305,38.138874,114.62137,38.129852,green);//行政中心-会展中心39 setPoint(114.627305,38.138874,行政中心,4);40 setPoint(114.62137,38.129852,会展中心,4);41 }42 if(start5end5)43 {44 45 setLine(114.62137,38.129852,114.634152,38.096772,green);//会展中心-东庄46 setPoint(114.62137,38.129852,会展中心,4);47 setPoint(114.634152,38.096772,东庄,4);48 }49 if(start6end6)50 {51 setLine(114.634152,38.096772,114.634402,38.088129,green);//东庄-西庄52 setPoint(114.634152,38.096772,东庄,4);53 setPoint(114.634402,38.088129,西庄,4);54 }55 if(start7end7)56 {57 setLine(114.634402,38.088129,114.634787,38.075265,green);//西庄-洨河大道58 setPoint(114.634402,38.088129,西庄,4);59 setPoint(114.634787,38.075265,洨河大道,4);60 }61 if(start8end8)62 {63 setLine(114.634787,38.075265,114.635236,38.065713,green);//洨河大道-南村64 setPoint(114.634787,38.075265,洨河大道,4);65 setPoint(114.635236,38.065713,南村,4);66 }67 if(start9end9)68 {69 setLine(114.635236,38.065713,114.635676,38.054882,green);//南村-石家庄东70 setPoint(114.635236,38.065713,南村,4);71 setPoint(114.635676,38.054882,石家庄东,4);72 }73 if(start10end10)74 {75 setLine(114.635676,38.054882,114.635984,38.044023,green);///石家庄东-76 setLine(114.635984,38.044023,114.62989,38.04387,green);//-火炬广场77 setPoint(114.635676,38.054882,石家庄东,4);78 setPoint(114.62989,38.04387,火炬广场,4);79 }80 if(start11end11)81 {82 setLine(114.62989,38.04387,114.614825,38.04399,green);//火炬广场-留村83 setPoint(114.62989,38.04387,火炬广场,4);84 setPoint(114.614825,38.04399,留村,1);85 }86 if(start12end12)87 {88 setLine(114.614825,38.04399,114.5976,38.043412,green);//留村-89 setLine(114.5976,38.043412,114.592682,38.050428,green);//-白佛90 setPoint(114.614825,38.04399,留村,1);91 setPoint(114.592682,38.050428,白佛,4);92 }93 if(start13end13)94 {95 setLine(114.592682,38.050428,114.582999,38.050094,green);//白佛-朝晖桥96 setPoint(114.592682,38.050428,白佛,4);97 setPoint(114.582999,38.050094,朝晖桥,1);98 }99 if(start14end14)
100 {
101
102 setLine(114.582999,38.050094,114.568896,38.049525,green);//朝晖桥-谈固
103 setPoint(114.582999,38.050094,朝晖桥,1);
104 setPoint(114.568896,38.049525,谈固,1);
105 }
106 if(start15end15)
107 {
108 setLine(114.568896,38.049525,114.552434,38.049006,green);//谈固-北宋
109 setPoint(114.568896,38.049525,谈固,1);
110 setPoint(114.552434,38.049006,北宋,1);
111 }
112 if(start16end16)
113 {
114 setLine(114.552434,38.049006,114.539294,38.048844,green);//北宋-体育场
115 setPoint(114.552434,38.049006,北宋,1);
116 setPoint(114.539294,38.048844,体育场,1);
117 }
118 if(start17end17)
119 {
120 setLine(114.539294,38.048844,114.528438,38.048592,green);//体育场-博物院
121 setPoint(114.539294,38.048844,体育场,1);
122 setPoint(114.528438,38.048592,博物院,1);
123 }
124 if(start18end18)
125 {
126 setLine(114.528438,38.048592,114.518483,38.049043,green);//博物院-北国商城
127 setPoint(114.528438,38.048592,博物院,1);
128 setPoint(114.518483,38.049043,北国商城,1);
129 }
130 if(start19end19)
131 {
132 setLine(114.518483,38.049043,114.507972,38.049667,green);//北国商城-平安大街
133 setPoint(114.518483,38.049043,北国商城,1);
134 setPoint(114.507972,38.049667,平安大街,1);
135 }
136 if(start20end20)
137 {
138 setLine(114.507972,38.049667,114.493744,38.049809,green);//平安大街-解放广场
139 setPoint(114.507972,38.049667,平安大街,1);
140 setPoint(114.493744,38.049809,解放广场,1);
141 }
142 if(start21end21)
143 {
144 setLine(114.493744,38.049809,114.483772,38.049448,green);//解放广场-新百广场
145 setPoint(114.493744,38.049809,解放广场,1);
146 setPoint(114.483772,38.049448,新百广场,1);
147 }
148 if(start22end22)
149 {
150 setLine(114.483772,38.049448,114.472184,38.048965,green);//新百广场-烈士陵园
151 setPoint(114.483772,38.049448,新百广场,1);
152 setPoint(114.472184,38.048965,烈士陵园,1);
153 }
154 if(start23end23)
155 {
156
157 setLine(114.472184,38.048965,114.458637,38.048111,green);//烈士陵园-和平医院
158 setPoint(114.472184,38.048965,烈士陵园,1);
159 setPoint(114.458637,38.048111,和平医院,1);
160 }
161 if(start24end24)
162 {
163 setLine(114.458637,38.048111,114.44353,38.047209,green);//和平医院-长城桥
164 setPoint(114.458637,38.048111,和平医院,1);
165 setPoint(114.44353,38.047209,长城桥,1);
166 }
167 if(start25end25)
168 {
169 setLine(114.44353,38.047209,114.429246,38.046385,green);//长城桥-时光街
170 setPoint(114.44353,38.047209,长城桥,1);
171 setPoint(114.429246,38.046385,时光街,1);
172 }
173 if(start26end26)
174 {
175 setLine(114.429246,38.046385,114.415825,38.045975,green);//时光街-西王
176 setPoint(114.429246,38.046385,时光街,1);
177 setPoint(114.415825,38.045975,西王,1);
178 }
179 if(start27end27)
180 {
181 setLine(114.415825,38.045975,114.388983,38.042902,green);//西王-上庄
182 setPoint(114.415825,38.045975,西王,1);
183 setPoint(114.388983,38.042902,上庄,4);
184 }
185 if(start28end28)
186 {
187 setLine(114.388983,38.042902,114.386238,38.031524,green);//上庄-上庄南
188 setPoint(114.388983,38.042902,上庄,4);
189 setPoint(114.386238,38.031524,上庄南,4);
190 }
191 }
192 } View Code 虽然繁琐但是这是我想出的最好的办法了 输入序号标识线路 但是目前java计算的结果仅仅是名字的序列并不包含线路名和序号。所以并未实现相互的连接。 点击右侧悬浮框可定位到相应的地铁线路 function list_1()//一号线
{dingWei(114.634402,38.088129);
}
function dingWei(x,y)//定位
{var new_point new BMap.Point(x,y);map.panTo(new_point);
} 使用ajax再不切换页面的情况下访问servlet获取输出 script
$(document).ready(function(){$([idselect]).click(function(){$.ajax({type: POST,url: ../SubwayServlet?startName$([idstartName]).val()endName$([idendName]).val(),dataType: text,success: function(data){alert(您的路线为\ndata);},error: function(){alert(ERROR);}});});});
/script 目前结果使用alert弹出框来显示 转载于:https://www.cnblogs.com/CCRNRT/p/10652440.html
