地图标注 CSS 精华指南353

地图标注是可视化地图数据的一种重要方式，它们可以提供有关特定地点或区域的重要信息。CSS（层叠样式表）广泛用于自定义地图标注的外观和样式，本文将深入探讨地图标注 CSS 的方方面面。

标注容器的样式

地图标注通常包含一个容器元素，该元素包含标注的标题、内容和任何其他元素。要设置容器的样式，可以使用以下 CSS 属性：* background-color：设置标注背景颜色。
* border：添加边框，指定其颜色、宽度和样式。
* border-radius：使标注容器具有圆角。
* padding：设置标注内容与容器边缘之间的内边距。
* margin：设置标注容器与周围元素之间的外边距。

标题和内容的样式

标注的标题和内容通常使用以下 CSS 属性进行样式化：* font-family：指定标题和内容使用的字体系列。
* font-size：设置标题和内容的字体大小。
* font-weight：指定标题和内容的字体粗细。
* color：设置标题和内容的文本颜色。
* text-align：对齐标题和内容的文本。

标注指针的样式

地图标注通常有一个指向地图上的位置的指针。可以使用以下 CSS 属性自定义指针样式：* position：指定指针相对于容器的位置。
* left：设置指针距容器左侧的距离。
* top：设置指针距容器顶部的距离。
* width：设置指针的宽度。
* height：设置指针的高度。
* transform：旋转或缩放指针。

悬停和选中状态

悬停和选中状态允许用户与地图标注交互。可以使用以下 CSS 伪类来定义这些状态：* :hover：当光标悬停在标注上时应用样式。
* :active：当标注被选中时应用样式。

示例

以下示例演示了如何使用 CSS 自定义地图标注：```css
/* 设置标注容器样式 */
.marker-container {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
}
/* 设置标题样式 */
.marker-title {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000;
text-align: center;
}
/* 设置内容样式 */
.marker-content {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
text-align: justify;
}
/* 设置指针样式 */
.marker-pointer {
position: absolute;
bottom: -10px;
left: 50%;
transform: translate(-50%, 0);
width: 20px;
height: 20px;
background-color: #f00;
}
/* 设置悬停状态样式 */
.marker-container:hover {
background-color: #ccc;
}
/* 设置选中状态样式 */
.marker-container:active {
background-color: #00f;
}
```