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

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

## 一、Popup 的 DOM 结构

```html
<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 / ...`。

## 二、全局改样式

```css
.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`）：

```css
[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; }
```

## 三、按类名作用域化

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

```css
.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 的），子内容选择器要带上。

## 四、去掉尖尖

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

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

## 五、圆角 + 阴影 + 大尺寸

```css
.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

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

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

## 七、关闭按钮样式

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

## 八、动态切换类

```js
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 上（写在根节点上无效）：

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

## 十、圆角带渐变背景

```css
.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`。