

fosuhobby.jsp:校园周边(交通信息)的功能touristFosuhobby.jsp:游客模式下,同样拥有使用佛大周边的功能校园周边这一模块,具体来说是使用
高德地图API,引入了高德地图,并将地图中心显示点设置为校园地理位置,同时给出佛大江湾校区北门、东南门、中门附近的交通信息。
游客模式、普通用户以及管理员三种模式下,均具有校园周边模块的功能
引用高德地图API
引入高德地图API,在fosuhobby.jsp页面设置地图显示的中心点为佛大江湾校区的具体经纬度坐标,同时中心点实现自定义内容的提示牌功能。提示牌设置有学校图标以及校训。
代码
如下图所示:

交通信息是通过三个按钮来实现的,使用document.getElementById()方法以及对应的函数来呈现交通信息.
按钮的布局需要自定义css实现,同时为了按钮之间紧密结合,即解决button之间的空隙问题,我们需要设置font-size: 0px;
北门交通信息图
北门只展示所有经过「科技学院北门站」的公交信息
如下图所示:
东南门交通信息图
东南门只展示所有经过「佛山科学技术学院站」的公交信息
如下图所示:

中门交通信息图
中门只展示佛山市的现有地铁信息
如下图所示:

校园周边模块只是简单展示出校园周边的公交和地铁信息,总体来说,设计很简单。
下一篇:Vue学习笔记