网站简介

这个网站是一个地图室内展示工具的示例页面。它使用了高德地图的API,以便在网页上实现地图室内导航的效果。该页面提供了一个带有楼层控制功能的室内地图展示，用户可以通过鼠标点击或者移动来切换不同的楼层，并查看各楼层的标注信息。

页面结构

该网站主要包括以下几个主要元素：

  1. <div class="amap-indoor-map">: 用于承载室内地图的容器。
  2. <div class="label-canvas">: 包含楼层标注的画布。
  3. <div class="highlight-image-con">: 包含高亮图像的容器。
  4. <div class="amap-indoormap-floorbar-control">: 楼层控制组件，包括选择楼层按钮和面板盒子。
  5. <div class="select-dock">: 选择楼层按钮的容器。

CSS 样式

该网站采用了一些CSS样式来美化页面和实现交互效果。下面是其中一些关键样式：

  1. position:absolute;: 将各个元素定位到相对于父元素的位置。
  2. top:0; left:0;: 将元素定位到页面左上角。
  3. pointer-events:none;: 使元素不响应鼠标事件，只显示背景图片而不影响交互效果。
  4. border:1px solid #ccc;: 设置边框样式。
  5. padding:0 2px;: 设置内边距，为组件提供一定的空间。
  6. line-height:1.3em;: 设置行高，使文本垂直居中显示。
  7. overflow:hidden;: 防止内容溢出容器。
  8. background-color:rgba(255,255,255,.9);: 设置背景颜色，增加可视性。

JavaScript 代码

该网站还包含了一些JavaScript代码来实现地图的加载、楼层切换等功能。以下是一些重要的代码片段：

  1. 在HTML文件中引入高德地图的API库和相关依赖文件。
  2. 使用JavaScript初始化地图实例，并将其绑定到.amap-indoor-map容器上。
  3. 根据传入的参数设置地图的中心点位置和缩放级别等配置项。
  4. 监听楼层控制组件的相关事件，如选择楼层等操作，并根据用户的选择更新地图视图。
  5. 利用高德地图提供的API接口获取各个楼层的标注信息，并将其渲染到画布上。
  6. 实现楼层切换动画效果，通过修改画布上的图像或文字来实现平滑过渡。
  7. 添加其他交互功能，例如右键菜单、拖动模式等，提高用户体验性。