Mapbox GL Js,动态改变地图容器大小,无法调整地图大小
2021-07-30
5479
我的地图实例位于可调整大小的容器中,当我更改大小时,我应该调用 map.resize()。我想知道是否有办法监听 mapbox 容器调整大小事件,以便它可以触发 map.resize()?您能建议如何操作吗?
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,
});
useEffect(() => {
const geoFeatures = //...getting data
const map = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://',
center: [settings.longitude, settings.latitude],
zoom: settings.zoom,
});
map.on('move', () => {...});
//setting map to state if we need to reference it later
setMap(map);
// Clean up on unmount
return () => map.remove();
}, []);
return (
<div className={classes.mapWrapper}>
<div ref={mapContainer} className={classes.map} />
</div>
);
}
1个回答
我最终添加了 resizeObserver "> resizeObserver 和debounce Map。 resize()
652232566
Konstantin Agapov
2021-08-11