提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

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

JAVA 模块
2023-02-26 09:48:13 时间

校园论坛（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页面设置地图显示的中心点为佛大江湾校区的具体经纬度坐标，同时中心点实现自定义内容的提示牌功能。提示牌设置有学校图标以及校训。

代码

<script>
    // TODO 创建地图,设定地图的中心点和级别
    var map = new AMap.Map('myamap', {
        resizeEnable: false,
        zoom:18,
        center: [113.097749, 23.024117]             // 江湾校区
    });
    // TODO 信息窗体的创建与设定
    var infowindow = new AMap.InfoWindow({
        content: '<h3>高德地图</h3><div>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</div>',
        offset: new AMap.Pixel(0, -30),
        size:new AMap.Size(230,0)
    });

    // TODO 点标记的创建与添加
    var marker = new AMap.Marker({
        position:[113.097749, 23.024117],
        map:map
    });
    var info = [];
    info.push("<div class=\"amp-clearfix\">" +
        "<img class=\"amp-logo\" src=\"images/logo.png\" style=\"width: 70px; height: 60px\">" +
         "<span style=\"font-size:27px\"><b>佛大校训</b></span>" +
        "</div>");
    info.push("<div style=\"padding:0px 0px 0px 4px; font-size: 20px\"><b>明德博学 自强有为</b></div>");
    info.push("<div><div><img src=\"http://webapi.amap.com/images/autonavi.png\"/></dvi>");

    infoWindow = new AMap.InfoWindow({
        content: info.join("<br/>"),
        // content: ' ',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(300, 0)
    });
    infoWindow.open(map, map.getCenter());
</script>

如下图所示：

3.2 增加附近的交通信息

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

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

北门交通信息图

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

如下图所示：

东南门交通信息图

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

如下图所示：

中门交通信息图

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

如下图所示：

4. 总结

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

5、项目代码

  • GitHub
  • Gitee

相关文章