> **本文回答**：Marker 主题总览 —— 创建 / 参数 / 内置图标 / 自定义 DOM / 锚点 / 缩放行为 / 动画 / 拖拽 / 事件 / 聚合 / 与 Popup 联动 / 性能。

# Marker 主题

Marker 是基于 DOM 的点标注，`<div>` 形式浮在地图之上。**优点**：可随意写 HTML、CSS、Vue/React 组件；**缺点**：数量多时性能差（>500 个就要考虑 Symbol 图层）。

## 子项索引

| 文件 | 主题 |
|---|---|
| [create](create.md) | 创建 Marker：new / setLngLat / addTo / remove |
| [options](options.md) | MarkerOptions 完整参数（17 个） |
| [builtin-icons](builtin-icons.md) | 默认水滴 SVG / 修改颜色 / 批量预设 |
| [custom-dom](custom-dom.md) | 自定义 DOM：纯图标 / 图+文 / Vue/React 复合 |
| [anchor-offset](anchor-offset.md) | 锚点与偏移的数学关系（缩放不飘移） |
| [zoom-behavior](zoom-behavior.md) | minZoom / maxZoom / scaleMaxZoom / removeWhenNoInMapView |
| [animation](animation.md) | setAnimation / CSS 光圈呼吸旋转荧光 |
| [drag](drag.md) | draggable / dragstart / drag / dragend |
| [events](events.md) | click / hover / autoAdd / autoRemove / contextmenu |
| [cluster](cluster.md) | Marker 聚合：noOverlap / Symbol 版 / Marker 版 |
| [with-popup](with-popup.md) | setPopup / togglePopup / getPopup |
| [performance-tips](performance-tips.md) | 何时改用 Symbol；大数量时建议 |

## 最小示例

```js
const marker = new vjmap.Marker({ color: "#f00" })
  .setLngLat(map.toLngLat([725.32, 18969.19]));
marker.addTo(map);   // addTo 返回 undefined，勿接链尾

marker.getElement().addEventListener("click", () => {
  alert("点击了 Marker");
});
```

## 主题级 Top 3 陷阱

1. **经纬度 vs CAD 坐标**：`setLngLat` 只接受经纬度；CAD 坐标要先 `map.toLngLat([x, y])`。
2. **缩放时位置飘**：自定义 DOM 时，默认 `anchor: "center"` 会让图标中心锚在点上；底端对齐需要 `anchor: "bottom"` 或 `offset: [0, -h/2]`（y 向下为正，负值上移）。详见 [anchor-offset](anchor-offset.md)。
3. **组件销毁时 Marker 残留**：Vue/React 卸载时必须 `marker.remove()`，否则会在下次初始化时累积。