container

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

一、必须条件

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

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

两种稳妥写法二选一：

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

/* 写法 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

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

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

React

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

四、响应式 resize

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

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

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

五、常见坑对照