时间戳

首页 > 解决方案 > 没有类组件的 React 中的 Mapbox

javascript - 没有类组件的 React 中的 Mapbox

问题描述

我正在尝试将 MapBox-GL 与 React 一起使用。我试图避免使用包装器。

我已经使用类组件成功创建了地图，但想将其转换为仅使用函数来利用钩子。在函数中显示地图效果很好：

const map = () => {
    new mapboxgl.Map({
    container: 'mapContainer',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [7.32, 60.44],
    zoom: 6,
    })
};
const Map = () => {
    const style = {
        position: 'absolute',
        top: 0,
        bottom: 0,
        width: '100%',
        height: '100vh'
    };
    useEffect(()=>{
        map();

    });


    return (
        <Row type="flex" gutter="50">
            <Col xs={{ span: 18 }}>
                <div style={style} id="mapContainer" />
            </Col>
        </Row>
    );
}

但是，我想添加控制器并使用地图进行操作。我通常在 ComponentDidMount() 中执行此操作。

例如，我尝试添加map.addControl(geocoder);到 useEffect 以及 Map 函数之外。我只收到错误：

TypeError：map.addControl 不是函数

标签： javascriptreactjsmapbox-gl-jsmapbox-gl

解决方案

与之对应的componentDidMount是useEffect零输入。

map.addControl(geocoder)假设它map是一个实例，Map它是一个函数并且它不返回一个值。

它应该是：

const getMap = () => {
    return new mapboxgl.Map({ ... })
};

const Map = () => {
    useEffect(()=>{
        const map = getMap();
        map.addControl(geocoder);
    }, []);
    ...
};

推荐阅读