唯杰地图 logo唯杰地图
VJMAP
EN

styling

vjmap/references/popup/styling.md 4.4 KB135 行
原文

本文回答：自定义 Popup 样式 —— className / CSS 选择器 / maxWidth / 深色主题。

关于 CSS 类名：vjmap Popup 在 DOM 上使用 vjmapgis-popup-* 系列 CSS 类名。后面所有 CSS 选择器都是这套真实类名，不要改写，否则选不中。

一、Popup 的 DOM 结构

<div class="vjmapgis-popup vjmapgis-popup-anchor-bottom">
  <div class="vjmapgis-popup-tip"></div>             <!-- 尖尖 -->
  <div class="vjmapgis-popup-content">               <!-- 正文 -->
    你的 setHTML 内容
    <button class="vjmapgis-popup-close-button">×</button>   <!-- 关闭按钮是 content 的子元素 -->
  </div>
</div>

按 anchor 不同，根节点的 class 还有 vjmapgis-popup-anchor-top / bottom / left / ...。

二、全局改样式

.vjmapgis-popup-content {
  background: #2b2f33;
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.vjmapgis-popup-anchor-bottom .vjmapgis-popup-tip { border-top-color: #2b2f33; }
.vjmapgis-popup-anchor-top    .vjmapgis-popup-tip { border-bottom-color: #2b2f33; }
.vjmapgis-popup-anchor-left   .vjmapgis-popup-tip { border-right-color: #2b2f33; }
.vjmapgis-popup-anchor-right  .vjmapgis-popup-tip { border-left-color: #2b2f33; }

⚠️ 自动选 anchor 时还会出现 bottom-left / bottom-right / top-left / top-right 四个角向，它们各有独立 CSS 规则，只写上面 4 条角向时尖尖仍是白色。用属性选择器一次覆盖（anchor-left 不会误匹配 anchor-bottom-left）：

[class*="vjmapgis-popup-anchor-bottom"] .vjmapgis-popup-tip { border-top-color: #2b2f33; }
[class*="vjmapgis-popup-anchor-top"]    .vjmapgis-popup-tip { border-bottom-color: #2b2f33; }
.vjmapgis-popup-anchor-left  .vjmapgis-popup-tip { border-right-color: #2b2f33; }
.vjmapgis-popup-anchor-right .vjmapgis-popup-tip { border-left-color: #2b2f33; }

三、按类名作用域化

new vjmap.Popup({ className: "dark-popup" });

.dark-popup .vjmapgis-popup-content {
  background: #000; color: #fff;
}
.dark-popup[class*="vjmapgis-popup-anchor-bottom"] .vjmapgis-popup-tip { border-top-color: #000; }   /* 含 bottom-left/right */

注意：className 加在 root 节点（有 vjmapgis-popup 的），子内容选择器要带上。

四、去掉尖尖

.no-tip .vjmapgis-popup-tip { display: none; }
.no-tip .vjmapgis-popup-content { margin: 0; }

new vjmap.Popup({ className: "no-tip" });

五、圆角 + 阴影 + 大尺寸

.card-popup .vjmapgis-popup-content {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 16px;
  min-width: 240px;
}

六、maxWidth

new vjmap.Popup({ maxWidth: "320px" });

// 运行时
popup.setMaxWidth("none");    // 不限，按内容自动

七、关闭按钮样式

.vjmapgis-popup-close-button {
  font-size: 18px;
  padding: 4px 8px;
  color: #999;
}
.vjmapgis-popup-close-button:hover { color: #f00; }

八、动态切换类

popup.addClassName("highlight");
popup.removeClassName("highlight");
popup.toggleClassName("selected");

九、pointer-events 控制

想让 popup 不拦鼠标事件（transparent）——内置 CSS 中根节点 .vjmapgis-popup 本就是 pointer-events:none，拦截鼠标的是 .vjmapgis-popup-content（pointer-events:auto），所以要写在 content 上（写在根节点上无效）：

.transparent-popup .vjmapgis-popup-content { pointer-events: none; }

十、圆角带渐变背景

.grad-popup .vjmapgis-popup-content {
  background: linear-gradient(135deg, #0af, #09f);
  color: #fff; border-radius: 10px;
}
.grad-popup[class*="vjmapgis-popup-anchor-bottom"] .vjmapgis-popup-tip {
  border-top-color: #09f;
}

十一、常见坑

  1. 选择器优先级不够 → vjmap Popup 默认样式使用 .vjmapgis-popup-content 类名，你写 .my .vjmapgis-popup-content 才能覆盖。
  2. 尖尖和正文颜色不一致 → tip 是 border，需要按 anchor 方向分别设（含 4 个角向，见 §二）。
  3. 圆角截断内容 → 给 content 加 overflow: hidden。
  4. Popup 超出地图容器 → vjmap 没有 autoPan（Leaflet 概念），超出会被裁；手动 map.easeTo。