校园论坛（Java）—— 校园周边模块

文章目录

• 校园论坛（Java）—— 校园周边模块
• • 1、写在前面
  • 2、系统结构设计
  • • 2.1 各个页面之间的调用关系
    • 2.2 校园周边页面设计
  • 3、校园周边模块设计
  • • 3.1 校园周边主界面的实现
    • 3.2 增加附近的交通信息
  • 4. 总结
  • 5、项目代码

1、写在前面

• Windows版本：Windows10
• JDK版本：Java8
• MySQL版本：MySQL5.7
• Tomcat版本：Tomcat9.0
• IDE：IntelliJ IDEA Ultimate2020.2.3
• 可视化工具：Echarts

2、系统结构设计

2.1 各个页面之间的调用关系

2.2 校园周边页面设计

• fosuhobby.jsp：校园周边（交通信息）的功能
• touristFosuhobby.jsp：游客模式下，同样拥有使用佛大周边的功能

3、校园周边模块设计

校园周边这一模块，具体来说是使用高德地图API，引入了高德地图，并将地图中心显示点设置为校园地理位置，同时给出佛大江湾校区北门、东南门、中门附近的交通信息。

游客模式、普通用户以及管理员三种模式下，均具有校园周边模块的功能

3.1 校园周边主界面的实现

引用高德地图API

引入高德地图API，在fosuhobby.jsp页面设置地图显示的中心点为佛大江湾校区的具体经纬度坐标，同时中心点实现自定义内容的提示牌功能。提示牌设置有学校图标以及校训。

代码

如下图所示：

3.2 增加附近的交通信息

交通信息是通过三个按钮来实现的，使用document.getElementById()方法以及对应的函数来呈现交通信息.

按钮的布局需要自定义css实现，同时为了按钮之间紧密结合，即解决button之间的空隙问题，我们需要设置font-size: 0px;

北门交通信息图

北门只展示所有经过「科技学院北门站」的公交信息

如下图所示：

东南门交通信息图

东南门只展示所有经过「佛山科学技术学院站」的公交信息

如下图所示：

中门交通信息图

中门只展示佛山市的现有地铁信息

如下图所示：

4. 总结

校园周边模块只是简单展示出校园周边的公交和地铁信息，总体来说，设计很简单。

5、项目代码

• GitHub
• Gitee