Карта Mapbox отображает 2 карты вместо 1 - PullRequest
Новая
       7

Карта Mapbox отображает 2 карты вместо 1

0 голосов
/ 06 февраля 2020

Я новичок в reactjs и mapbox, и у меня есть проблема, карта, которую я применяю, отображается дважды после того, как я уменьшу ее. pi c: https://imgur.com/T8OEPwb

и как мне сделать макет, подобный этому pi c https://imgur.com/iKAnsKF

компонент ленты новостей 

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
    root: {
      display: "flex"
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
      opacity: 0.7
    },
    drawerPaper: {
      width: drawerWidth
    },
  }));

  export default function Newsfeed(){
    const classes = useStyles();
      return(
          <>
            <Drawer
            className={classes.drawer}
            variant="permanent"
             classes={{
                paper: classes.drawerPaper
            }}
            anchor="right"
            >
                <Divider />
                <List>{mainListItems}</List>
                <Divider />
                <List>{secondaryListItems}</List>
            </Drawer>         
          </>
      )
  }

панель инструментов: 

export default function Dashboard(){
  return(
    <>
    <div>
      <Appbar />
      <Map />
      <Newsfeed />     
    </div>

    </>
  );
}

Функция экспорта компонента карты по умолчанию Map () {// Вызов API 

  //set the default lat lon
  const [viewport, setViewport] = useState({
    latitude: 3.0858333333333334,
    longitude: 101.58666666666666,
    zoom: 12,
    bearing: 0,
    pitch: 0
  });

const [fleetDetail, setFleetDetail] = useState(null)

  return (
    <div>
      <MapGL
        {...viewport}
        width="1000px"
        height="1000px"
        mapStyle="mapbox://styles/mapbox/dark-v10"
        onViewportChange={setViewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      >

      </MapGL>
    </div>
  );
}

Большое спасибо!

...