> **本文回答**：地图容器必须满足的宽高与 `position` 要求、`createUI` 对容器定位的影响、resize 处理。

## 一、必须条件

`vjmap.Map({ container: "map", ... })` 在挂载时会立刻读取容器的计算样式。容器 **必须在挂载之前**就具备：

1. **可见的宽高**（大于 0）。高度 / 宽度为 0 的容器会出现「一闪就没了」、「只剩深色背景」、「fitMapBounds 后定位错乱」等问题。
2. **合适的 `position`**。后续 `createUI()` 会把工具栏、属性面板以 `position: absolute` 覆盖到容器内，如果容器自身是 `static` 定位，内部绝对定位元素会逃出容器。

两种稳妥写法二选一：

```css
/* 写法 A：撑满视口（最稳妥，推荐给 demo / 全屏应用） */
#map { width: 100vw; height: 100vh; }
```

```css
/* 写法 B：绝对定位贴到定位祖先的四个边 */
.page-wrap { position: relative; }   /* 祖先必须是 relative / absolute / fixed */
#map { position: absolute; inset: 0; }
```

## 二、createUI 对 position 的影响

`mapcadLayer.createUI()` 会把 UI 层以 `position:absolute` 覆盖在地图容器里。从 v0.1 起：

- 只有当容器计算样式 `position === "static"` 时，SDK 才会**临时**给它打一个 `position:relative`，并在 `dispose()` 时精确还原。
- 已有的 `absolute` / `fixed` / `relative` / `sticky` 会被完整保留，不会被覆盖。

**红线**：不要把容器放在用 `display: flex / grid` 的父元素里，却又给子项加 `flex: 1` 但没给它 `min-height: 0`，否则容器高度会塌成 0。

## 三、Vue / React 模板的正确写法

### Vue 3

```vue
<template>
  <div id="map-container" />
</template>

<style scoped>
#map-container {
  position: absolute;   /* 或 relative + 显式 height */
  inset: 0;
  background: #022b4f;  /* 与底图主题色一致，避免首屏闪白 */
}
</style>
```

### React

```jsx
function MapView() {
  return <div id="map" style={{ position: "absolute", inset: 0 }} />;
}
```

## 四、响应式 resize

浏览器缩放、侧边栏收展等情况容器大小会变，必须主动调用 `map.resize()`：

```js
const ro = new ResizeObserver(() => map.resize());
ro.observe(document.getElementById("map"));
// 组件卸载时：ro.disconnect();
```

若不 resize，瓦片会出现绘制不全或空白带。

## 五、常见坑对照

| 现象 | 原因 | 修法 |
|---|---|---|
| 首屏完全黑 / 只剩深色背景 | 容器高度为 0 | 给容器设置显式 `height` 或 `position:absolute + inset:0` |
| 工具栏飘到容器外 | 容器 `static`，但还有别的 `absolute` 后代 | 预先把容器设 `position:relative` |
| 拉动 DevTools 之后瓦片缺一块 | 没监听 `resize` | `ResizeObserver` + `map.resize()` |
| Vue 组件进出切换后容器一闪即消 | 离开时没 `map.remove()` | 看 [dispose.md](dispose.md) |