MapboxGL 奇怪的边框不会消失

Question

我有一个带有 MapboxGL 组件的 React 应用程序。我无法删除地图周围的灰色边框（见下图）。

我试过Map.css，如下所示

.map-container {
  height: 100vh;
}

.sidebar {
  background-color: rgba(35, 55, 75, 0.9);
  color: #ffffff;
  padding: 6px 12px;
  font-family: monospace;
  z-index: 1;
  position: absolute;
  top: 20;
  left: 20;
  margin: 12px;
  border-radius: 4px;
}

.mapboxgl-canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

但我不确定为什么在将所有内容都设置为 0 后边框仍然存在。

我认为这是由于每个 Mapbox 需要导入 API import 'mapbox-gl/dist/mapbox-gl.css';

Answer 1

对于未来的读者，我需要将 width: 100vw; 添加到 css 文件中的 .map-container 部分。我的愚蠢错误！

MapboxGL 奇怪的边框不会消失

MapboxGL weird border won't go away

css

maps

mapbox

mapbox-gl

mapbox-gl-js