校园论坛(Java)—— 校园周边模块

news2024/9/20 22:36:19

校园论坛(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>

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

3.2 增加附近的交通信息

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

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

北门交通信息图

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

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

东南门交通信息图

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

如下图所示:

在这里插入图片描述

中门交通信息图

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

如下图所示:

在这里插入图片描述

4. 总结

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

5、项目代码

  • GitHub
  • Gitee

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/64664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue v-model收集表单数据

Vue v-model收集表单数据1 单行文本2 多行文本3 复选框4 单选按钮5 选择器6 修饰符1 单行文本 对于输入框input&#xff0c;直接使用v-model绑定属性即可&#xff0c;该属性需要在data中定义。用法如下&#xff1a; <input v-model"content">var vm new Vue…

力扣 394. 字符串解码

题目 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是有效的&#xff1b;输入字符串中没有额外的空格&#x…

快速上手Django(六) -Django之Django drf 序列化器Serializer类

文章目录快速上手Django(六) -Django之Django drf 序列化器Serializer类1. 背景2. 使用思路3. 代码demo4. 【重要】序列化类 ModelSerializer5. DRF序列化器to_representation()和to_internal_value()方法to_representation如何使用示例&#xff1a;例如处理返回的日期格式二、…

Habor私有仓库

Harbor简介   Harbor是一个用于存储和分发Docker镜像的企业级Registry的服务器镜像仓库&#xff0c;通过添加一些企业必需的功能特性&#xff0c;例如安全、标识和管理等&#xff0c;扩展了开源Docker Distribution。作为一个企业级私有Registry服务器&#xff0c;Harbor提供…

Python基础知识进阶之正则表达式

一.match re.match 是从字符串的起始位置匹配一个模式&#xff0c; 匹配成功 re.match 方法返回一个匹配的对象&#xff0c;否则返回 None。 re.match(pattern, string, flags0) pattern&#xff1a; 匹配的正则表达式。 string&#xff1a; 要匹配的字符串。 flags&…

LeetCode刷题复盘笔记—一文搞懂完全背包之322. 零钱兑换问题(动态规划系列第十四篇)

今日主要总结一下动态规划完全背包的一道题目&#xff0c;322. 零钱兑换 题目&#xff1a;322. 零钱兑换 Leetcode题目地址 题目描述&#xff1a; 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返…

MATLAB绘制伪彩图和切片轮廓线图

n6%定义轮数 r(0:n)/n;%定义轮的半径 thetapi*(-n:n)/n;%定义轮的扇区角 Xr*cos(theta); Yr*sin(theta);%定义网格顶点 Cr*cos(2*theta);%定义色图 pcolor(X,Y,C)%绘制伪彩图axis equal tight[x y z v]flow;%打开水流数据 hcontourslice(x,y,z,v,[1:9],[],[0],linspace(-8,2,10…

【面试题】http协议

1. http状态码 1xx&#xff1a;服务器收到请求&#xff0c;但是没有返回结果。2xx&#xff1a;请求成功。200成功。3xx&#xff1a;重定向。301永久重定向&#xff0c;302临时重定向&#xff0c;304资源未被修改。4xx&#xff1a;客户端错误。404资源未找到&#xff0c;403没有…

[附源码]计算机毕业设计基于Springboot药品仓库及预警管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

引擎入门 | Unity UI简介–第2部分(4)

本期我们继续为大家进行Unity UI简介&#xff08;第二部分&#xff09;的后续教程 本篇内容 6.添加设置对话框 7.设置对话框的背景图像 8.添加标签 文章末尾可免费获取教程源代码 本篇本篇Unity UI简介&#xff08;第二部分&#xff09;篇幅较长&#xff0c;分为八篇&…

Xylan-Alkyne木聚糖-炔基|炔基-PEG-木聚糖

Xylan-Alkyne木聚糖-炔基|炔基-PEG-木聚糖 中文名称&#xff1a;木聚糖-炔基 英文名称&#xff1a;Xylan-Alkyne 别称&#xff1a;炔基修饰木聚糖&#xff0c;炔基-木聚糖 还可以提供PEG接枝修饰木聚糖&#xff0c;Xylan-PEG-Alkyne 木聚糖-聚乙二醇-炔基&#xff0c;炔基-…

​创业15年,50岁回到农村过上退休的生活,上班和创业是两难的选择。

我是老马&#xff0c;现在在农村老家生活1个月。 15年前&#xff0c;大学毕业三年后&#xff0c;在县城里搞到一份稳定的工作&#xff0c;朝九晚五&#xff0c;不慌不忙&#xff0c;结婚生子&#xff0c;后来又这样安安稳稳的过了10年&#xff0c;攒了一些钱&#xff0c;但生活…

【HTML学生作业网页】基于HTML+CSS+JavaScript仿南京师范大学泰州学院(11页)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

llvm-ir之核心类设计

llvm-ir之核心类设计引言1 逻辑关系2 class Module3 class IRBuilder4 class Instruction5 class Constant引言 llvm IR是llvm对代码的一种中间表示。它来源AST(抽象语法树)&#xff0c;是llvm代码优化的主要对象。 1 逻辑关系 IR的很多组成元素都是以Value为基类。llvm并没有…

【web3空投】SINSO 主网公测空投

Web3.0 基础设施简化去中心化的热数据缓存和数据治理 文章目录1. SINSO Token介绍2. SINSO 主网公测空投2.1 时间2.2 奖励2.3 参与方式2.3.1 第一步(必须完成)2.3.2 第二步(成为矿工)2.3.3 第三步(成为节点担保人)2.3.4 第四步&#xff1a;公开测试反馈表3. 注意事项4. 成为矿工…

这几个方法让你实现EXCEL文件翻译成中文

在日常的工作中&#xff0c;如果遇到需要将EXCEL翻译成其它语言的的时候&#xff0c;我们该怎么办呢&#xff1f;一行一行的复制查找&#xff0c;然后再粘贴回表格中吗&#xff1f;这样操作的话&#xff0c;不仅浪费时间和精力&#xff0c;而且效率还非常的低。那有什么方法可以…

Java项目:SSM图书馆图书管理系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 读者角色包含以下功能&#xff1a; 读者登录,图书查询,借阅图书,借阅管理,修改密码,借阅记录等功能。 管理员角色包含以下功能&#xff1a; 管理…

Android 系统启动到App 界面完整详解~

通过本篇文章&#xff0c;你将了解到&#xff1a; Android 系统启动流程概览ServiceManager 进程作用Zygote 进程创建与fork子进程system_server 进程作用App 与 system_server 交互Activity 与 View的展示全流程图 1. Android 系统启动流程概览 init 是用户空间的第一个进程&a…

ARM基础(1):Cortex-M3寄存器

Cortex-M3处理器的寄存器包括R0~R15和一些特殊的寄存器。其中R0到R12是通用寄存器&#xff0c;但是一些16位的Thumb指令只能访问R0到R7(低寄存器)&#xff0c;而32位的Thumb-2指令则可以访问所有这些寄存器。特殊寄存器只能通过特殊访问指令访问。 所有的寄存器如下图所示&…

Java安全--篇四-Java原生反序列化

Java原生序列化和反序列化 看理论&#xff1a; 序列化和反序列化的详解_tree_ifconfig的博客-CSDN博客_序列化和反序列化 java序列化与反序列化全讲解_mocas_wang的博客-CSDN博客_java反序列化 java 序列化和反序列化 - xbwang520 - 博客园 序列化和反序列化的简单图解&am…