1. 程式人生 > >大二下學期第五周總結

大二下學期第五周總結

inpu 方法 為我 efault 驗證 定位 發現 執行 點綁定

這周周一到周三我都在整老師給的那個項目,成果是一點進長都沒有!!!說說我遇到的腦殘式問題:技術分享圖片

因為周一到周三課余時間不是很多,然後到了周四我發現了問題所在這裏我們一一解釋

session一直變化的原因是因為我創建的項目項目名是中文名,然而就是因為我用的是中文名 所以session會老是變化沒有辦法接收到驗證碼。

然後那些頁面問題就更加傻了,這個整個項目是已經創建好了的,只是把所有的文件都放到了一個文件夾下,缺的東西並不多,它只需要還原一個類似導航欄的頁面即可,然後連接好SQL server數據庫即可。

這個星期主要是寫了一個老師布置的web地鐵開發。

大概的界面在軟件工程課堂四 展示了現在說說它的具體實現,以及遇到的一些問題。

先創建了一個選擇文本,利用JavaScript語言調用百度地圖api查詢出所有建立了地鐵的城市以及城市代碼加入到選擇文本裏

//城市選擇框改變事件,用於城市地圖切換
$("#city").change(function() {
InitMap($("#city").val(), null);
});

//初始化城市選擇框
function InitSelect(list) {
for ( var key in list) {
var obj = document.getElementById("city");
var option = document.createElement("option");//創建option節點

option.innerText = list[key].name;
option.value = list[key].citycode;
obj.appendChild(option);
}
};

然後編寫一個根據選擇的城市初始化地鐵圖

並為這個地鐵圖裏的站點綁定一個點擊函數(用來顯示站點信息以及選擇設置為終點或者是起點,並為這個設置起點or終點綁定相應的函數)

在綁定函數這裏我遇到了困難,我一開始的想法是直接使用jQuery選擇器直接通過按鈕的id為其綁定函數,然後發現並不能,百度了以下百度說使用on()函數為通過JavaScript生成的html部件進行綁定,不過它需要通過父類的id來綁定。

然後我就直接用來一個最笨的方法對其進行綁定就是通過JavaScript生成html是把函數也給綁定了上去。這裏要特別註意這樣設計的傳參必須是要用單引號括起來哪怕你的參數是個變量(應該是如果是變量就要特別註意加‘‘);

function InitMap(citycode,center){
//加載地鐵圖
subway = new BMapSub.Subway(‘container‘, citycode);
var zoomControl = new BMapSub.ZoomControl({
anchor : BMAPSUB_ANCHOR_BOTTOM_RIGHT,
offset : new BMapSub.Size(10, 100)
});
subway.setCenter(center);
subway.addControl(zoomControl);
subway.setZoom(0.6);
drct = new BMapSub.Direction(subway, false); //創建Direction對象
detail = new BMapSub.DetailInfo(subway); //創建DetailInfo對象
nav = new BMapSub.Navigation(subway, true);

//點擊一個車站顯示信息和提供選擇
subway.addEventListener(‘tap‘,function(e) {
var infowindow = new BMapSub.InfoWindow(
‘<div id="bd-subwayInfo" style="width:230px;height:80px;">‘
+ ‘<div id="bd-subwayTitle">‘
+ ‘<p><span style="font-size:18px;">‘
+ e.station.name
+ ‘</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="stationinfo(\‘‘
+ e.station.name
+ ‘\‘)">詳情&gt;&gt;</a>‘
+ ‘</p>‘
+ ‘<input type="button" class="btn btn-default button btn-info" value="設置起點" id="start" onclick="set_start(\‘‘
+ e.station.name
+ ‘\‘)">‘
+ ‘<span>&nbsp;</span>‘
+ ‘<input type="button" class="btn btn-default button btn-info" value="設置終點" id="end" onclick="set_end(\‘‘
+ e.station.name + ‘\‘)">‘
+ ‘</div>‘
+ ‘</div>‘);
subway.openInfoWindow(infowindow, e.station.name);
subway.setCenter(e.station.name);
subway.setZoom(0.8);
});
}

對於站點設置為起點還是終點這個,我看文檔裏是用Navigation對象來實現的,然而我看了很久也嘗試了很久,然後百度發現百度上面沒有相關的信息也沒有Navigation的用法,也不知道如何設計站點為起點還是終點;為此我還去嘗試高德地圖的api,然後發現高德地鐵圖的api好像可以設置終點起點,但是因為不知道該如何遍歷高德地圖裏所有的城市節點編碼,我就放棄了。它的getCityList(callback)函數需要設計一個回調函數,百度過後對回調函數還是不怎麽了解,大致的一個了解就是用戶希望以這個回調函數的方式執行這個函數。很懵是吧,我也很懵。嘗試多次這個獲得當前開通地鐵線路的城市列表對象的函數未果,於是毅然決然的自己想別的方法去實現對站點設置起點和終點。最後還是用百度地鐵圖因為了解的比較久。

我通過設置函數讓其實現點擊選擇設置為起點或者是終點在地鐵圖上顯示終點和起點的圖標,並定位,並更新文本框裏的起點終點信息

//設置起點
function set_start(station_name) {
//將終點設置為起點的情況
if (end == station_name) {
start = station_name;
//更新起點框信息
start_station.value = start;
nav.setPoint(‘start‘, start);
subway.closeInfoWindow();
end = null;
}
//當已經設置了終點的情況
if (end != null) {
start = station_name;
start_station.value = start;
nav.setPoint(‘start‘, start);
subway.clearOverlays();
//初始化終點和起點文本框信息
start_station.value = "";
end_station.value = "";
drct.search(start, end);
start=null;
end=null;
subway.closeInfoWindow();
} else { //沒有設置終點的情況
start = station_name;
//更新起點框信息
start_station.value = start;
nav.setPoint(‘start‘, start);
subway.closeInfoWindow();
}
} //設置終點
function set_end(station_name) {
//將終點設置為起點的情況
if (start == station_name) {
end = station_name;
//更新終點文本框信息
end_station.value = end;
nav.setPoint(‘end‘, end);
subway.closeInfoWindow();
start = null;
}
//已經設置了起點的情況
if (start != null) {
end = station_name;
end_station.value = end;
nav.setPoint(‘end‘, end);
subway.clearOverlays();
//初始化終點和起點文本框信息
start_station.value = "";
end_station.value = "";
drct.search(start, end);
start=null;
end=null;
subway.closeInfoWindow(); } else { //沒有設置起點的情況
end = station_name;
//更新終點文本框信息
end_station.value = end;
nav.setPoint(‘end‘, end);
subway.closeInfoWindow();
}
}

大二下學期第五周總結