Amap_Indoor_Map网站简介

Amap_Indoor_Map是一个基于高德地图的室内图服务,提供了丰富的室内地图展示功能。该网站通过HTML和CSS技术构建,实现了包括标签绘制、图片高亮、楼层栏控制等功能,为用户提供了便捷的室内导航体验。

页面结构

  • .amap-indoor-map:包含整个室内地图的容器。
  • .label-canvas:用于绘制地图上的标签。
  • .highlight-image-con:包含高亮显示的图片元素。
  • .amap-indoormap-floorbar-control:楼层栏控件容器。
  • .panel-box:楼层栏控件的背景框。
  • .select-dock:选择楼层的弹窗区域。

CSS样式

.amap-indoor-map {
position: relative;
}

.label-canvas {
position: absolute;
top: 0;
left: 0;
}

.highlight-image-con * {
pointer-events: none;
}

.amap-indoormap-floorbar-control {
position: absolute;
margin: auto 0;
bottom: 165px;
right: 12px;
width: 35px;
text-align: center;
line-height: 1.3em;
overflow: hidden;
padding: 0 2px;
}

.amap-indoormap-floorbar-control .panel-box {
background-color: rgba(255,255,255,.9);
border-radius: 3px;
border: 1px solid #ccc;
}