# 地图与画布组件

## `<map>` / `<map-marker>`

完整文档见 SDK 的 `map.md`。

### map 核心属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| ref | Ref\<MapRef\> | - | 实例 ref |
| center | `{ longitude: number; latitude: number }` | - | 地图中心 |
| scale | number | 16 | 缩放级别（3-20） |
| minScale / maxScale | number | 3 / 20 | 缩放范围 |
| polyline | Polyline[] | [] | 路线数组 |
| polygons | Polygon[] | [] | 多边形数组 |
| circles | Circle[] | [] | 圆数组 |
| rotate | number | 0 | 旋转角度（度） |
| showScale | boolean | false | 显示比例尺 |
| enableScale | boolean | true | 允许缩放 |
| enableDrag | boolean | true | 允许拖动 |
| enableRotate | boolean | false | 允许旋转 |
| mapStyle | `'normal-light' \| 'normal-dark' \| 'simple-light' \| 'simple-dark'` | `'normal-light'` | 地图主题 |
| onClick | (e: { point: { latitude: number; longitude: number } }) => void | - | 点击地图 |
| onMapLoaded | () => void | - | 地图加载完成 |
| onRegionChange | (e) => void | - | 视野变化 |
| className | string | - | 样式类名 |
| style | CSSProperties | - | 内联样式 |

### MapRef 方法

| 方法 | 参数 | 说明 |
|------|------|------|
| setCenter | (center, scale?) | 设置中心点 |
| getCenter | () | 获取当前中心点 |
| getScale | () | 获取当前缩放级别 |
| setScale | (scale) | 设置缩放级别 |
| getBound | () | 获取可见区域边界 |
| setBound | (bounds) | 设置可见区域边界 |
| fitPoints | (points, padding?) | 视野适配点集，padding 顺序 `[left, right, top, bottom]` |
| setAnchor | (position) | 设置地图锚点 |

### map-marker 核心属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| position | `{ longitude: number; latitude: number }` | - | 坐标（必填） |
| children | ReactNode | - | 自定义标记点 UI（必填） |
| anchor | [number, number] | [0.5, 1] | 经纬度在图标上的锚点 |
| alpha | number | 1 | 透明度（0-1） |
| rotation | number | 0 | 旋转角度（0-360） |
| clickable | boolean | true | 是否可点击 |
| draggable | boolean | false | 是否可拖拽 |
| onClick | () => void | - | 点击回调 |

```tsx
import type { MapRef } from '@doubao-dev/framework/components';
import { useRef } from '@doubao-dev/framework';

const mapRef = useRef<MapRef>(null);

<map
  ref={mapRef}
  center={{ longitude: 116.397, latitude: 39.916 }}
  scale={15}
  style={{ width: '100%', height: '300px' }}
  onMapLoaded={() => mapRef.current?.fitPoints([
    { longitude: 116.39, latitude: 39.91 },
    { longitude: 116.40, latitude: 39.92 },
  ])}
>
  <map-marker position={{ longitude: 116.397, latitude: 39.916 }} onClick={() => console.log('clicked')}>
    <view style={{ width: '24px', height: '24px', background: '#FF3B30', borderRadius: '50%' }} />
  </map-marker>
</map>
```

---

## `<canvas>`

| 属性 | 类型 | 说明 |
|------|------|------|
| ref | Ref\<CanvasRef\> | 实例 ref，获取绘图上下文 |
| style | CSSProperties | 内联样式（设置宽高） |
| className | string | 样式类名 |
| onResize | (e: CanvasResizeEvent) => void | 尺寸变化回调 |

### CanvasRef 方法

通过 ref 获取实例后调用 `getContext('2d')` 获取 2D 绘图上下文，API 与 Web Canvas 基本一致。

```tsx
import type { CanvasRef } from '@doubao-dev/framework/components';
import { useRef, useEffect } from '@doubao-dev/framework';

const canvasRef = useRef<CanvasRef>(null);

useEffect(() => {
  const ctx = canvasRef.current?.getContext('2d');
  if (!ctx) return;
  ctx.fillStyle = '#FF3B30';
  ctx.fillRect(10, 10, 100, 100);
}, []);

<canvas ref={canvasRef} style={{ width: '300px', height: '300px' }} />
```