如何运行并展示前端界面

• 在vscode中下载 live server 插件，从html文件中右键打开live server
• 或直接点击html文件在浏览器中打开

实现思路与方法选择

楼外导航

• 使用百度地图api进行导航与路线标记
• 问题：不能准确识别小路因此出现绕路现象
• 改进：在楼外使用了Dijkstra算法
• 解决：最好最简洁的方法是通过自定义路径，不仅可以选择最优的小路，还可以选择穿过教学楼内部走廊进行规划，符合实际，可以达到最优的路径选择

楼内导航

• 由于b楼的复杂性与特殊性：

1.由于南楼是倾斜的因此不同位置的楼梯的上升层数与教室所标注层数没有直接关系

2.楼层教室号并不连续（可能有工作间、天台、办公室、厕所等相隔），并且北楼四层的教室号甚至不是普通的递增递减的顺序

3.南楼北楼有通道连接，并且单独的南北楼的教室均可抽象为一维排序

4.整个楼层在不同位置有多个出入口

• 我们进行楼内导航的原则：

1.减少回头路：上完楼梯尽量不往下走

2.合理选择出入口：选择正确的出入口是最快最方便到达指定教室的最关键一点

• 得出方法： 综上分析，适用b楼内部进行导航的最简单最精准的方法是打表

• 注意： 我们只实现了针对海棠七八九号楼的路径规划，因此对于出入口的选择做了限制，请看“出口定义”

出口定义

• 选取如下十二个北口作为出入口：

1 2 ｜ 3 ｜ 4 ｜ 5 6 7 ｜ 8 ｜9 10 （从东到西：序号增大）

11:大平台

12:小楼梯

出入口图片在iamges文件夹中，同时选择教室时也将进行入口展示

• 关键建筑物与出口的对应关系：

螺旋楼梯6:exit9

螺旋楼梯5:exit7

螺旋楼梯4:exit5

螺旋楼梯3:exit4

螺旋楼梯2:exit2

螺旋楼梯1:exit1

• 注意：

1.由于只针对海棠七八九号楼进行路径规划，我们只考虑北边进入，使用北边楼梯

2.北楼只从小楼梯进入

3.南楼有十一个口进入

b楼内建筑描述

通过实际考察调研记录我们得出：

• 南楼 | 排列（从东到西：序号增大） | |----------------------------------------------------------------------------------| | 天台1 螺旋楼梯5 701 天台2 703 螺旋楼梯6 706 707 | | 天台3 螺旋楼梯3 601 螺旋楼梯4 天台4 602 603 螺旋楼梯5 605 606 608 609 螺旋楼梯6 612 613 | | 501 螺旋楼梯1 天台 螺旋楼梯2 502 503 螺旋楼梯3 506 507 509 螺旋楼梯4 510 511 螺旋楼梯5 513 五层通道1 514 516 517 螺旋楼梯6 520 521 | | 401 螺旋楼梯1 403 406 螺旋楼梯2 407 408 螺旋楼梯3 411 五层通道2 412 螺旋楼梯4 414 415 416 螺旋楼梯5 418 大平台(北口11) 419 421 422 螺旋楼梯6 425 北口10 426 | | 301 螺旋楼梯1 303 306 螺旋楼梯2 307 308 螺旋楼梯3 311 312 四层通道2 螺旋楼梯4 314 四层通道1 315 316 螺旋楼梯5 318 北口7 一楼走廊2 北口8 320 螺旋楼梯6 北口9 北口10 | | 201 螺旋楼梯1 203 206 螺旋楼梯2 207 208 螺旋楼梯3(北口4) 211 一楼走廊1 螺旋楼梯4(北口5) 216 217 北口6 | | 101 螺旋楼梯1(北口1) 105 螺旋楼梯2(北口2) 106 北口3 |

• 北楼 | 排列（从东到西：） | |----------------------------------------------------------------------------------| |538 五层通道2 537 小楼梯 532 529 528 五层通道1| |442 443 小楼梯 四层通道2 437 四层通道1 434 433 大平台(北口11)|

页面展示