| 4 | 结对开发地铁 | 1.开发一套石家庄地铁线路查询系统。 2.功能设计 （1）数据库设计：将石家庄地铁线路图的各个线路，各个站点，换乘信息等用数据库的形式保存起来，应该保存的信息有 {线路号，线路的各个站名，车站的换乘信息}。 （2）站点查询：用户可以输入任一一条线路或输入出发地和目的地信息，可以查询到相关内容。 例如输入出发地：石家庄铁道大学 目的地 博物院 返回经历的站名的个数，和路径，如果有换乘，请列出换乘的线路
| 撰写一篇博客要求讲述的设计思想，源程序代码、运行结果截图、编程总结分析，并按照PSP0级的要求记录开发过程中的时间记录日志。
| 截止时间周三4月1日（20:00）之前发布。 |
My partner:李泽宇，真的太棒了
以下是我们上周四时对铁路查询系统的设计思路
****************************************************************************************************************************************************************************************************
********************************************************************************************************************************************************************************************************************
然后我们的主要代码实现为：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>石家庄地铁</title> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 7 <script src="//wow.techbrood.com/libs/three.r73.js"></script> 8 <script type="text/javascript" 9 src="https://api.map.baidu.com/api?type=subway&v=1.0&ak=SyGLbsO2V2hESPek1gB11yxcgUIlDVGI"></script> 10 <!-- Bootstrap --> 11 <link 12 href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 13 rel="stylesheet"> 14 <!-- font-awesome --> 15 <link rel="stylesheet" 16 href="../vendor/font-awesome-4.7.0/css/font-awesome.min.css"> 17 <style type="text/css"> 18 #container { 19 height: 90%; 20 width:100%; 21 } 22 23 #bd-subwayTitle { 24 text-align: center; 25 } 26 27 #form { 28 width: 14%; 29 height: 35%; 30 top: 107px; 31 left: 15px; 32 position: absolute; 33 z-index: 9999; 34 background-color: rgb(55, 152, 203); 35 border-radius: 8px; 36 } 37 38 #head { 39 height: 10%; 40 width: 100%; 41 /* position: absolute; */ 42 /* z-index: 9999; */ 43 background-color: rgb(55, 152, 203); 44 } 45 </style> 46 </head> 47 <body> 48 <div style="width: 100%; height: 100%"> 49 50 <!-- 标题栏 --> 51 <div id="head" > 52 <label class=" col-lg-4" 53 style="color: white; vertical-align: text-bottom; font-size: 60px; font-family: serif; text-align: center;"><i 54 class="fa fa-ravelry fa-1x" aria-hidden="true"></i><span 55 style="font-size: 50px;">艾妮地铁网</span>|<span 56 style="font-size: 15px; letter-spacing: 1px;">Web测试版</span></label> 57 <div class="col-lg-offset-5 col-lg-3"> 58 <label style="color: white; margin-top: 50px; font-size: 15px; letter-spacing: 4px;"> 59 <a href="" style="color: white;">首页</a> | <a href="" 60 style="color: white;">信息公开</a> | <a href="" 61 style="color: white;">联系我们</a> | <a href="" 62 style="color: white;">关于我们</a> 63 </label> 64 </div> 65 </div> 66 67 <!-- 查询栏 --> 68 <div id="form" class="form-horizontal"> 69 <!-- 城市地铁图设置 --> 70 <div class="form-group" style="margin-top: 28px;"> 71 <label class="col-lg-2 control-label col-lg-offset-1 " 72 style="color: white; font-size: 19px;"><i 73 class="fa fa-home " aria-hidden="true"> city: </i></label> 74 <div class="col-lg-7 col-lg-offset-1"> 75 <select id="city" class="form-control" style="border-radius: 8px;"> 76 </select> 77 </div> 78 </div> 79 80 <!-- 路线查询 --> 81 <div class="form-group" style="margin-top: 35px;"> 82 <label class="col-lg-offset-1 col-lg-6" style="color: white;"> 83 <i class="fa fa-subway fa-lg" aria-hidden="true"> <span 84 style="font-size: 20px;">路线查询</span></i> 85 </label> 86 </div> 87 88 <!-- 输入起点站 --> 89 <div class="form-group"> 90 <label class="col-lg-4 control-label " 91 style="font-size: 15px; color: white; font-family: serif; letter-spacing: 1px;">起点站:</label> 92 <div class="col-lg-7"> 93 <input type="text" class="form-control" id="start_station" 94 style="border-radius: 8px;" placeholder="请输入起点站" /> 95 </div> 96 </div> 97 <!-- 输入终点站 --> 98 <div class="form-group"> 99 <label class="col-lg-4 control-label " 100 style="font-size: 15px; color: white; font-family: serif; letter-spacing: 1px;">终点站:</label> 101 <div class="col-lg-7"> 102 <input type="text" class="form-control" id="end_station" 103 style="border-radius: 8px;" placeholder="请设置终点站" /> 104 </div> 105 </div> 106 <!-- 查询按钮 --> 107 <div class="form-group" style="margin-top: 35px;"> 108 <div class="col-lg-6 col-lg-offset-3"> 109 <button type="button" class="btn btn-white col-lg-12" 110 style="border-radius: 8px;" id="go">查询</button> 111 </div> 112 </div> 113 </div> 114 <!-- 地铁图容器 --> 115 <div id="container"></div> 116 </div> 117 118 119 120 121 <script type="text/javascript"> 122 /* *globals BMapSub 123 * 地铁图API的命名空间是BMapSub，BMapSub.Subway类表示地铁图，通过new操作符可以创建一个地铁图实例。 124 其中，第一个参数为地铁图容器的id；第二个参数为地铁图城市的citycode。 BMapSub.SubwayCitiesList中存储了城市名和citycode的对照关系。 125 可以查询到某个城市的citycode。 126 */ 127 var start = null, end = null; //用来储存起始点和终点 128 var end_station = document.getElementById("end_station"); 129 var start_station = document.getElementById("start_station"); 130 var list = BMapSub.SubwayCitiesList; 131 var nav; 132 var drct; 133 var detail; 134 var subway; //定义一个地铁对象 135 136 $(function() { 137 InitSelect(list);//初始化城市选择框 138 InitMap(131, '车公庄'); 139 }); 140 141 //城市选择框改变事件，用于城市地图切换 142 $("#city").change(function() { 143 InitMap($("#city").val(), null); 144 }); 145 146 //初始化城市选择框 147 function InitSelect(list) { 148 for ( var key in list) { 149 var obj = document.getElementById("city"); 150 var option = document.createElement("option");//创建option节点 151 option.innerText = list[key].name; 152 option.value = list[key].citycode; 153 obj.appendChild(option); 154 } 155 }; 156 157 //查看站点的详细信息 158 function stationinfo(station_name) { 159 detail.search(station_name); 160 } 161 162 //设置起点 163 function set_start(station_name) { 164 //将终点设置为起点的情况 165 if (end == station_name) { 166 start = station_name; 167 //更新起点框信息 168 start_station.value = start; 169 end_station.value=""; 170 nav.setPoint('start', start); 171 subway.closeInfoWindow(); 172 end = null; 173 } 174 //当已经设置了终点的情况 175 if (end != null) { 176 start = station_name; 177 start_station.value = start; 178 nav.setPoint('start', start); 179 subway.clearOverlays(); 180 drct.search(start, end); 181 //初始化终点和起点文本框信息 182 start_station.value = ""; 183 end_station.value = ""; 184 start = null; 185 end = null; 186 } else { //没有设置终点的情况 187 start = station_name; 188 //更新起点框信息 189 start_station.value = start; 190 nav.setPoint('start', start); 191 subway.closeInfoWindow(); 192 } 193 } 194 195 //设置终点 196 function set_end(station_name) { 197 //将终点设置为起点的情况 198 if (start == station_name) { 199 end = station_name; 200 //更新终点文本框信息 201 end_station.value = end; 202 start_station.value=""; 203 nav.setPoint('end', end); 204 subway.closeInfoWindow(); 205 start = null; 206 } 207 //已经设置了起点的情况 208 if (start != null) { 209 end = station_name; 210 end_station.value = end; 211 nav.setPoint('end', end); 212 subway.clearOverlays(); 213 //初始化终点和起点文本框信息 214 drct.search(start, end); 215 start = null; 216 end = null; 217 start_station.value = ""; 218 end_station.value = ""; 219 } else { //没有设置起点的情况 220 end = station_name; 221 //更新终点文本框信息 222 end_station.value = end; 223 nav.setPoint('end', end); 224 subway.closeInfoWindow(); 225 } 226 } 227 228 function InitMap(citycode, center) { 229 //加载地铁图 230 subway = new BMapSub.Subway('container', citycode); 231 var zoomControl = new BMapSub.ZoomControl({ 232 anchor : BMAPSUB_ANCHOR_BOTTOM_RIGHT, 233 offset : new BMapSub.Size(10, 100) 234 }); 235 subway.setCenter(center); 236 subway.addControl(zoomControl); 237 subway.setZoom(0.8); 238 drct = new BMapSub.Direction(subway, false); //创建Direction对象 239 detail = new BMapSub.DetailInfo(subway); //创建DetailInfo对象 240 nav = new BMapSub.Navigation(subway, true); 241 242 //点击一个车站显示信息和提供选择 243 subway 244 .addEventListener( 245 'tap', 246 function(e) { 247 var infowindow = new BMapSub.InfoWindow( 248 '<div id="bd-subwayInfo" style="width:230px;height:80px;">' 249 + '<div id="bd-subwayTitle">' 250 + '<p><span style="font-size:18px;">' 251 + e.station.name 252 + '</span> <a οnclick="stationinfo(\'' 253 + e.station.name 254 + '\')">详情>></a>' 255 + '</p>' 256 + '<input type="button" class="btn btn-default button btn-info" value="设置起点" id="start" οnclick="set_start(\'' 257 + e.station.name 258 + '\')">' 259 + '<span> </span>' 260 + '<input type="button" class="btn btn-default button btn-info" value="设置终点" id="end" οnclick="set_end(\'' 261 + e.station.name + '\')">' 262 + '</div>' + '</div>'); 263 subway.openInfoWindow(infowindow, 264 e.station.name); 265 subway.setCenter(e.station.name); 266 subway.setZoom(0.8); 267 }); 268 subway.addEventListener('directioncomplete', function() { 269 alert('呵呵哒'); 270 }); 271 272 } 273 274 $("#go").click(function() { 275 start = start_station.value; 276 end = end_station.value; 277 if (start == null || start == "") { 278 alert("请设置起点站"); 279 } else if (end == null || end == "") { 280 alert("请设置终点站"); 281 } else { 282 drct.search(start, end); 283 start_station.value = ""; 284 end_station.value = ""; 285 start = null; 286 end = null; 287 } 288 289 }); 290 </script> 291 </body> 292 </html>
扫一扫
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
