如何解决Mapbox Map彼此呈现
我正在使用react-semantic-ui标签来使用Mapbox购买地图。我有四个选项卡A,B,C和D。加载页面后,我看到地图运行正常。但是,当我单击选项卡B时,该地图将呈现在前一张地图的顶部,同时显示两张地图。如何确保一次只渲染一张地图?
const Map = props => {
const { tabName,mapID,layer } = props;
const { mapboxgl } = window;
const mapContainerRef = useRef(null);
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainerRef.current,style: `{mapID}`,});
},[mapID]);
return (
<div id="map" className="map-container" ref={mapContainerRef} />
)};
这是我的标签页的样子:
const panes = [
{
menuItem: 'A',render: () => (
<Tab.Pane>
<div>
<Map
tabName="A"
mapID="AAA"
layer="aaa"
/>
</div>
<Table states={A} total={Total} tabName="A" />
</Tab.Pane>
),},{
menuItem: 'B',render: () => (
<Tab.Pane>
<div>
<Map
tabName="B"
mapID="BBB"
layer="bbb"
/>
</div>
<Table states={B} total={Total} tabName="B" />
</Tab.Pane>
),}];
const Tabs = () => {
return (
<Tab panes={panes} />
)
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。