地图室内展示控制面板
这是一个用于展示地图室内控制面板的网站。该网站提供了一个基于高德地图的室内地图应用，用户可以通过拖动楼层来查看不同区域的详细信息。同时，还提供了一些控制面板，方便用户进行缩放和平移操作。
页面结构
amap-indoor-map:包含整个室内地图的容器。label-canvas:显示地图标签的画布。highlight-image-con:高亮显示的图像容器。amap-indoormap-floorbar-control:室内地图楼层栏控制面板容器。panel-box:楼层栏控制面板的背景框。select-dock:选择楼层的下拉框容器。
样式定义
.amap-indoor-map {
position: relative; /* 设置地图容器为相对定位 */
}
.label-canvas {
position: absolute; /* 设置标签画布为绝对定位 */
top: 0; /* 上边距为0 */
left: 0; /* 左边距为0 */
}
.highlight-image-con * {
pointer-events: none; /* 使高亮显示的图像不响应鼠标事件 */
}
.amap-indoormap-floorbar-control {
position: absolute; /* 设置楼层栏控制面板为绝对定位 */
margin: auto 0; /* 水平居中 */
bottom: 165px; /* 底部外边距为165px */
right: 12px; /* 右边距为12px */
width: 35px; /* 宽度为35px */
text-align: center; /* 文本居中 */
line-height: 1.3em; /* 行高为字体高度的1.3倍 */
overflow: hidden; /* 隐藏超出容器部分的内容 */
padding: 0 2px; /* 上下内边距均为2px */
}
.amap-indoormap-floorbar-control .panel-box {
background-color: rgba(255,255,255,.9); /* 背景颜色为白色，透明度为0.9 */
border-radius: 3px; /* 圆角大小为3px */
border: 1px solid #ccc; /* 边框宽度为1px,颜色为灰色 */
}
.amap-indoormap-floorbar-control .select-dock {
position: absolute; /* 设置选择楼层的下拉框为绝对定位 */
top: 0; /* 上边距为0 */
left: 0; /* 左边距为0 */
width: 100%; /* 全宽度 */
bottom: auto; /* 将下边距设为自动，使其与容器底部对齐 */
}
