这周周一到周三我都在整老师给的那个项目,成果是一点进长都没有!!!说说我遇到的脑残式问题:
因为周一到周三课余时间不是很多,然后到了周四我发现了问题所在这里我们一一解释
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> <a οnclick="stationinfo(\''
+ e.station.name
+ '\')">详情>></a>'
+ '</p>'
+ '<input type="button" class="btn btn-default button btn-info" value="设置起点" id="start" οnclick="set_start(\''
+ e.station.name
+ '\')">'
+ '<span> </span>'
+ '<input type="button" class="btn btn-default button btn-info" value="设置终点" id="end" οnclick="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();
end = station_name;
//更新终点文本框信息
end_station.value = end;
nav.setPoint('end', end);
subway.closeInfoWindow();
}
}