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

代码

<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>

如下图所示：
在这里插入图片描述