> **本文回答**：内置水滴 SVG / setColor / scale / rotation —— 不写 HTML 也能做出漂亮标记。

## 一、默认水滴图标

```js
new vjmap.Marker()
  .setLngLat([lng, lat])
  .addTo(map);
```

SVG 水滴，高 41px，宽 27px；默认 `anchor: "center"` + `offset: [0, -14]` 使尖端对准坐标（传 offset 会覆盖该默认值）。

## 二、换颜色

```js
new vjmap.Marker({ color: "#f00" })  // 红色水滴
  .setLngLat([lng, lat])
  .addTo(map);

// 运行时
marker.setColor("#0f0");
```

默认颜色 `#3FB1CE`。

## 三、批量随机颜色

```js
const colors = ["#f00", "#0f0", "#00f", "#ff0", "#f0f", "#0ff"];
for (let i = 0; i < 100; i++) {
  new vjmap.Marker({ color: colors[i % colors.length] })
    .setLngLat(map.toLngLat(bounds.randomPoint()))
    .addTo(map);
}
```

## 四、缩放 scale

```js
new vjmap.Marker({ color: "#f00", scale: 2 })   // 两倍大
  .setLngLat([lng, lat]).addTo(map);
```

## 五、旋转

```js
const m = new vjmap.Marker({ color: "#f00", rotation: 45 })
  .setLngLat([lng, lat]);
m.addTo(map);

// 让 marker 旋转动画
let deg = 0;
function spin() {
  deg = (deg + 2) % 360;
  m.setRotation(deg);
  requestAnimationFrame(spin);
}
spin();
```

## 六、自定义 SVG

如果默认水滴不够，可以用内联 SVG 作为 `element`：

```js
const svg = document.createElement("div");
svg.innerHTML = `
  <svg width="32" height="32" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="12" fill="#f0a" stroke="#fff" stroke-width="3"/>
    <text x="16" y="21" font-size="14" fill="#fff" text-anchor="middle">1</text>
  </svg>
`;

new vjmap.Marker({ element: svg, anchor: "center" })
  .setLngLat([lng, lat]).addTo(map);
```

## 七、vjmap 提供的其它预设（SDK 扩展）

vjmap 扩展了几款带特效的 marker 类（DOM 模式）：

- `vjmap.BreathingApertureMarker`：呼吸光圈
- `vjmap.HaloRingMarker`：光环
- `vjmap.DiffusedApertureMarker`：扩散光圈
- `vjmap.FluorescenceMarker`：荧光
- `vjmap.RotatingApertureMarker` / `RotatingTextBorderMarker`：旋转光圈 / 旋转文字边框
- `vjmap.AnimateMarkerLayer`：批量动画 marker 图层

构造签名统一为 `(features | { lngLat, text? }, options?: AnimateMarkerLayerOption)`，生成 marker 用 `createMarker()`，运行期样式用 `setMarkersWidth` / `setMarkersColors` / `setDotSize`：

```js
const eff = new vjmap.HaloRingMarker(
  { lngLat: map.toLngLat([x, y]), text: "站点" },
  { /* AnimateMarkerLayerOption */ }
);
eff.setMarkersWidth(40);
eff.setMarkersColors(["#0af", "#fff"]);

const m = eff.createMarker({ draggable: false });   // createMarkerOptions extends MarkerOptions
m.addTo(map);

eff.setMarkersColors(["#f00", "#ff0"]);   // 动态改色
eff.setMarkersText("新文字");
eff.setMarkersWidth(60);
eff.setMarkersTextFontSize(14);
eff.setMarkersTextColor("#0f0");
```

## 八、CSS 图标（背景图片方式）

```css
#my-marker {
  width: 40px;
  height: 40px;
  background-image: url("/icons/pin.png");
  background-size: cover;
  cursor: pointer;
}
```

```js
const el = document.createElement("div");
el.id = "my-marker";
new vjmap.Marker({ element: el, anchor: "bottom" })
  .setLngLat([lng, lat]).addTo(map);
```

## 九、带角标 / 徽章

```js
const el = document.createElement("div");
el.innerHTML = `
  <div class="pin">
    <div class="badge">3</div>
  </div>
`;
el.querySelector(".pin").style.cssText = `
  width: 40px; height: 40px; background: #f00; border-radius: 50%; position: relative;
`;
el.querySelector(".badge").style.cssText = `
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  background: #fff; color: #f00; border-radius: 50%; text-align: center; line-height: 16px;
  font-size: 12px;
`;
new vjmap.Marker({ element: el, anchor: "center" })
  .setLngLat([lng, lat]).addTo(map);
```

## 十、常见坑

1. **`color` 不生效**：只在默认水滴有效；自定义 element 后要改 CSS。
2. **SVG marker 看起来模糊**：DOM 里直接写 SVG 时，不传 `width`/`height` 会按 content-box，必须显式指定。
3. **特效 Marker 性能**：几十个没问题，几百个会卡；大数量用 Symbol Layer。