【JavaWeb】石家莊地鐵搭乘系統——第一版（功能尚未完善）
阿新 • • 發佈：2019-04-04
用兩個 set 代碼 直線 star 失敗 \n 直接 fun 
小組成員：高達，程超然
項目目的：能算出地鐵搭乘的最優路線並顯示在地圖上
個人任務：調用隊友寫好的java代碼，將結果顯示在網頁上
新的知識：百度地圖API，使用JQuery的AJAX異步提交
進度：畫出了部分地鐵圖用於測試，實現了地鐵線路的定位，可以在網頁上使用文字展示路線
尚未實現圖像展示路線，尚未實現圖像的刪除，尚未實現站點的點擊事件
二人組隊總結：
分工明確
兩個人使用的地圖不一樣。我發現之前同學發在群裏的圖是錯誤的，在地圖上已經建成的地鐵和圖中的不一致，但那時數據庫裏的數據已經輸入完畢，便沒有改。但是我畫圖找不到地點，畫圖時改成了正確的地鐵圖。
mysql的版本我原來使用5.7，近期換成8.0但是mysql-connector沒有換，導致數據庫連接失敗。
我剛開始覺得我需要x，y坐標來定位，所以想讓返回的參數是x，y坐標，數據庫裏也預留了相應的位置（沒有輸入數據）。後來發現有的站點之間的線並不是直線。於是更改為序號作為定位。數據庫裏尚未輸入對應信息。
過程：
懸浮框的實現不再贅述。
我從老師哪裏了解到可以直接用百度現成的接口，於是上網搜索百度地圖。
經過各種教程，查找，我明白要在百度地圖開放平臺申請一個應用，並獲得密匙。
白名單設置用於約束訪問的地址，我直接設置為*。
接下來使用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙"></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_MAP 8 ]})); 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 px=30; 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判斷5>=endNum(5)，不畫線break跳出
這樣就執行了3-5之間的畫線
但是經過測試我發現startNum=document.getElementById("startNum").value;是一個String類型的變量沒法使用switch
於是算法不變，改寫成if else語句
1 function drawALine(listNum,start,end,flag)//畫出一段直線 2 { 3 if(flag==0) 4 { 5 var a=start; 6 start=end; 7 end=a; 8 } 9 //alert(start+"#"+end); 10 if(listNum==1)//地鐵1號線 11 { 12 if(start<=0&&end>0) 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(start<=1&&end>1) 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(start<=2&&end>2) 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(start<=3&&end>3) 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(start<=4&&end>4) 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(start<=5&&end>5) 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(start<=6&&end>6) 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(start<=7&&end>7) 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(start<=8&&end>8) 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(start<=9&&end>9) 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(start<=10&&end>10) 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(start<=11&&end>11) 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(start<=12&&end>12) 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(start<=13&&end>13) 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(start<=14&&end>14) 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(start<=15&&end>15) 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(start<=16&&end>16) 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(start<=17&&end>17) 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(start<=18&&end>18) 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(start<=19&&end>19) 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(start<=20&&end>20) 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(start<=21&&end>21) 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(start<=22&&end>22) 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(start<=23&&end>23) 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(start<=24&&end>24) 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(start<=25&&end>25) 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(start<=26&&end>26) 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(start<=27&&end>27) 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(start<=28&&end>28) 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(){ $("[id=select]").click(function(){ $.ajax({ type: "POST", url: "../SubwayServlet?startName="+$("[id=startName]").val()+"&endName="+$("[id=endName]").val(), dataType: "text", success: function(data){ alert("您的路線為：\n"+data); }, error: function(){ alert("ERROR"); } }); }); }); </script>
目前結果使用alert彈出框來顯示：
【JavaWeb】石家莊地鐵搭乘系統——第一版（功能尚未完善）