我试图使用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不是函数
与componentDidMount
相对应的是useEffect
,输入为零。
map.addControl(geocoder)
假设map
是Map
的一个实例,而它是一个函数并且它不返回值。
它应该是:
const getMap = () => {
return new mapboxgl.Map({ ... })
};
const Map = () => {
useEffect(()=>{
const map = getMap();
map.addControl(geocoder);
}, []);
...
};