SPA React(18.2)应用程序:React-传单地图组件呈现没有错误，但完全离开屏幕的一侧。怎么移动？

Question

我正在使用react18创建一个应用程序。目标是添加一个组件“页面”，其中包括一个占屏幕50 %到70%的地图，并首先包含当前用户位置的标记(一旦完成并设置样式，就添加更多的标记)。

我已经创建了子嵌套组件，供父组件和页面路由使用：

组件/CurrentLocation/index.js：

import { useEffect, useState } from 'react';
import { MapContainer, TileLayer, useMap, Marker, Popup, Circle } from 'react-leaflet';
import tileLayer from '../TileLayer/index';

const center = [52.22977, 21.01178];

const Location = () => {
  const map = useMap();
  const [position, setPosition] = useState(null)

  useEffect(() => {
    map.locate({
      setView: true
    })
    map.on('locationfound', (event) => {
      setPosition(event.latlng)
    })
  }, [map])

  return position
    ? (
      <>
        <Circle center={center} weight={2} color={'red'} fillColor={'red'} fillOpacity={0.1} radius={500}></Circle>
        <Marker position={position}>
          <Popup>You are here</Popup>
        </Marker>
      </>
    )
    : null
}

const MapWrapper = () => {
  return (
    <MapContainer
      center={center}
      zoom={18}
      scrollWheelZoom={false}
    >
      <TileLayer {...tileLayer} />
      <Location />
    </MapContainer>
  )
}

export default MapWrapper;

MapWrapper导入到Locator/index.js

import React, { Component } from 'react';
import { Text, Box, ChakraProvider } from '@chakra-ui/react'
import Partners from '../Partners';
import MapWrapper from '../CurrentLocation';
import './style.css';


class Locator extends Component {

  render() {
    return (
      <div>

        <ChakraProvider>
          <Box display="flex" justifyContent="center">
            <Text>Select your store</Text>
          </Box>

          <Box bgColor='#628E90' border="3px solid white" minH='3500px' mt={3}>
            <Text>Test 2</Text>
            <Box className='map-box' border="3px solid white" display='inline-flex' ml={5}>
              <Text>Map SHOULD display here</Text>
              <MapWrapper />
            </Box>
            <Box display='flex' justifyContent='right'>
              // dynamically rendered list of stores with inventory
              <Partners />
            </Box>
          </Box>
        </ChakraProvider>

      </div>
    )
  }
}

export default Locator;

定位器被导入到/src/App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, } from 'react-router-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import './App.css';
import { ChakraProvider } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import NavMenu from './components/NavMenu/NavMenu';
import Home from './pages/Home';
import Login from './pages/Login';
import Signup from './pages/Signup';
import PartnerLogin from './pages/PartnerLogin';
import Education from './pages/Education/Education';
import PartnerInventory from './pages/PartnerInventory';
import Cart from './components/Cart/Cart.js';
import CustomerPage from './pages/CustomerPage';
import { StoreProvider } from './utils/GlobalState.js';
import Locator from './components/Locator/index'
import NoMatch from './components/NoMatch'

const httpLink = createHttpLink({
  uri: '/graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('id_token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    },
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});


function App() {
  document.title = 'Too Good To Waste';

  return (
    <ApolloProvider client={client}>
      <Router>
        <StoreProvider>
          <ChakraProvider>
            <Box minH='1500px' bgColor='#F5EFE6'>
              <header>
                <NavMenu />

                <Box display="flex" justifyContent="center">
                  <Link id="home" to="/" className="blk-let">TOO</Link>
                  <Link id="home" to="/" className="csv-let">Good</Link>
                  <Link id="home" to="/" className="blk-let">TO</Link>
                  <Link id="home" to="/" className="csv-let">Waste</Link>
                </Box>

                <Cart />
              </header>

              <main>
                <Routes>
                  <Route path="/" element={<Home />} />
                  <Route path="*" element={<NoMatch />} />
                  <Route path="/signup" element={<Signup />} />
                  <Route path="/login" element={<Login />} />
                  <Route path="/locator" element={<Locator />} />
                  <Route path="/partnerlogin" element={<PartnerLogin />} />
                  <Route path="/education" element={<Education />} />
                  <Route path="/customer" element={<CustomerPage />} />
                  <Route path="/partnerInventory" element={<PartnerInventory />} />
                </Routes>
              </main>
            </Box>
          </ChakraProvider>
        </StoreProvider>
      </Router>
    </ApolloProvider>
  );
}

export default App;

最后，App导入到/src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

供参考的依赖关系：

"dependencies": {
    "@apollo/client": "^3.7.1",
    "@chakra-ui/icons": "^2.0.11",
    "@chakra-ui/react": "^2.3.6",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dayjs": "^1.11.6",
    "framer-motion": "^7.6.1",
    "graphql": "^16.6.0",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "leaflet": "^1.9.2",
    "react": "^18.2.0",
    "react-animations": "^1.0.0",
    "react-awesome-reveal": "^4.1.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-icons": "^4.6.0",
    "react-leaflet": "^4.1.0",
    "react-responsive-carousel": "^3.2.21",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4"
  },

我以为它不是渲染，但后来意识到没有错误。在关闭开发工具控制台中的每个样式选项后，最后，一个小小的地图角从左上角突出。图中显示了从css链接导入的带有传单css的元素。我正在处理的项目值是：

style="transform: translate3d( 0px, 0px, 0px) scale(0.5);"

更改前0到60 by将世界地图的极小绘制移到右边，然后在第二点将100 by移动地图的呈现。

但是，它没有解决任何问题，因为map元素仍然标识为处于它启动的位置:启动和离开屏幕。更别提它的"+/-“之类的缩放工具了。我尝试了大量的css方式，这些方法通常会影响一些东西，但到目前为止，我所知道的任何一种方法都没有真正让它移动，更不用说在它应该填充的框中渲染了。

我将尝试加入翻译样式(尽管它不能解决“地图的家和中心存在于屏幕之外”的总体问题，但似乎至少应该有一个更好的方法！

Answer 1

从我的测试中，您需要设置MapContainer的高度。

<MapContainer
    center={center}
    zoom={18}
    scrollWheelZoom={false}
    style={{ height: 400, width: "100%", zIndex: 94 }}
>
    <TileLayer {...tileLayer} />
    <Location />
</MapContainer>