如何使用 ReactJS 使用 CSS 设置地图容器的样式答案

【问题标题】：How to style a map container with CSS using ReactJS如何使用 ReactJS 使用 CSS 设置地图容器的样式
【发布时间】：2023-01-07 02:36:15
【问题描述】：

我的地图是使用 MapLibre GL 实现的，但问题与 Google Maps API 或 Mapbox GL 相同。

我的 NextJS 应用程序中有以下 ReactJS 组件：

import React, { useRef, useEffect } from "react";
import maplibregl from "maplibre-gl";
import map_style from "./style/style.json";

export default function Map() {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return; //stops map from intializing more than once
    map.current = new maplibregl.Map({
      container: mapContainer.current,
      style: map_style,
      center: [12, 26],
    });
  });

  return (
    <div className="map-canvas">
      <div
        ref={mapContainer}
        className="my-map"
        style={{ height: 600, width: 650 }}
      />
    </div>
  );
}

上面的代码渲染地图没有问题，但我想用 CSS 设置 className="my-map" 的样式。我需要根据屏幕尺寸等应用不同的样式。问题是，当我删除 style={{ height: 500, width: 500 }} 或更改其语法时，地图无法显示。

在这种情况下如何使用 CSS 设置样式？

【问题讨论】：

标签： css reactjs next.js mapbox

【解决方案1】：

地图库需要读取容器尺寸来计算内部视图。

只要你提供明确的大小，可能通过className，你应该没问题。

大多数映射库还提供一些 API 来请求重新读取容器尺寸，以便在容器显示或更改大小时（可能是为了响应）调整视图。对于 MapLibre GL JS，请参阅resize() map 方法：

根据其容器元素的尺寸调整地图的大小。

检查地图容器大小是否发生变化，如果发生变化则更新地图。必须在以编程方式调整地图容器的大小后或地图在最初使用 CSS 隐藏后显示时调用此方法。

【讨论】：