如何监听Mapbox GL JS地图容器的尺寸变化事件并自动触发map.resize()？

嘿，这个需求我之前做React + Mapbox项目时也碰到过，最靠谱的方案是用**ResizeObserver**——这是浏览器原生API，专门用来监听DOM元素的尺寸变化，比监听全局window.resize事件精准得多，不会因为窗口其他区域变化就触发不必要的回调。

下面是针对你的组件的具体修改方案，我标注出了新增的关键代码：

import { useEffect, useState, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

export default function Map({ chartID, configuration, data }) {
  const classes = useStyles();
  const mapContainer = useRef(null);
  const [map, setMap] = useState(null);
  const [settings, setSettings] = useState({
    longitude: -73.935242,
    latitude: 40.73061,
    zoom: 9,
  });
  // 新增：保存ResizeObserver实例的ref，方便后续清理
  const resizeObserverRef = useRef(null);

  useEffect(() => {
    const geoFeatures = //...你的数据处理逻辑
    const mapInstance = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox://styles/mapbox/light-v10', // 这里补充了示例样式URL，你可以替换成自己的
      center: [settings.longitude, settings.latitude],
      zoom: settings.zoom,
    });

    mapInstance.on('move', () => {
      setSettings({
        longitude: mapInstance.getCenter().lng,
        latitude: mapInstance.getCenter().lat,
        zoom: mapInstance.getZoom(),
      });
    });

    // 新增：初始化ResizeObserver监听容器尺寸变化
    resizeObserverRef.current = new ResizeObserver(() => {
      // 确保map实例存在时才调用resize，避免报错
      if (mapInstance) {
        mapInstance.resize();
      }
    });
    // 开始监听地图容器元素
    resizeObserverRef.current.observe(mapContainer.current);

    setMap(mapInstance);

    // 清理函数：组件卸载时移除地图实例并断开Observer
    return () => {
      mapInstance.remove();
      if (resizeObserverRef.current) {
        resizeObserverRef.current.disconnect();
      }
    };
  }, []); // 空依赖数组确保只初始化一次地图和Observer

  return (
    <div className={classes.mapWrapper}>
      <div ref={mapContainer} className={classes.map} />
    </div>
  );
}

关键点说明： #

• ResizeObserver的优势：它只聚焦于目标容器的尺寸变化，不管是父容器调整、窗口缩放还是其他操作导致容器尺寸改变，都会精准触发回调，比全局resize事件更高效。
• 内存泄漏防护：组件卸载时必须调用disconnect()断开Observer，同时调用map.remove()清理Mapbox实例，避免残留的监听和实例占用内存。
• 安全调用：在回调里判断mapInstance是否存在，防止组件卸载后还触发回调导致报错。

如果你的项目需要兼容老旧浏览器（比如IE），可以引入resize-observer-polyfill包做兼容处理，现代浏览器都已经原生支持ResizeObserver了。

另外，如果你考虑过监听window.resize，也可以实现，但需要加防抖处理（比如用lodash.debounce）来避免频繁调用map.resize()影响性能，但这种方法会监听整个窗口的缩放，不如ResizeObserver精准。

内容的提问来源于stack exchange，提问作者Konstantin Agapov