| 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>
?
轉載于:https://www.cnblogs.com/daisy99lijing/p/10652255.html
總結
以上是生活随笔為你收集整理的结对开发地铁的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
