问加载反应传单时出错
EN

Stack Overflow用户

提问于 2020-12-26 19:10:29

回答 3查看 750关注 0票数 1

我正在尝试加载传单地图，但它给了我一个错误：

Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

我试图再次安装react传单，并尝试在我的leaflet/dist/leaflet.css文件中导入App.js，但它仍然显示了错误。这是代码

Map.js

import { Map as LeafletMap, TileLayer } from "react-leaflet";
import "./Map.css";

function Maps({ center, zoom }) {
  return (
    <div className="map">
      <LeafletMap center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </LeafletMap>
    </div>
  );
}

export default Maps;

App.js

import './App.css'
import Maps from './Maps'
import 'leaflet/dist/leaflet.css'

function App() {
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796})
  const [mapZoom, setMapZoom] = useState(3)

return (
    <div className="app">
        <Maps
            center= {mapCenter}
            zoom= {mapZoom}
         />
    </div>
  )
}

export default App;

leaflet

react-leaflet

javascript

reactjs

跨境电商上云解决方案

轻量应用服务器助力卖家与独立站拓展跨境电商业务

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-12-26 22:04:23

也许你没有使用正确版本的反应-传单(你的不出口地图)。请看我的工作示例：https://codesandbox.io/s/react-leaflet-forked-mg8x4?file=/src/index.js。我用了1.3.4

票数 1

Stack Overflow用户

发布于 2020-12-27 04:05:41

你的地图没有尺寸，也许问题就出在那里

   <Map
       style={{ height: "100%", width: "100%" }}
       center={position}
       zoom={zoom}
   >

票数 0

Stack Overflow用户

发布于 2020-12-28 16:00:12

您导入的组件不正确。如果您使用的是react-传单2.x.x，您需要导入Map，如下例所示。如果您使用react传单3.0.5，有几个变化。我做了一个例子，最后的反应传单在这个CodeSandBox。

Map.js

import { Map, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "./Map.css";

function Maps({ center, zoom }) {
  return (
    <div className="map">
      <Map center={center} zoom={zoom}
      {/* Give your map a size */}
      style={{ height: "100%", width: "100%" }}
        >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </Map>
    </div>
  );
}

export default Maps;

App.js

import './App.css'
import Maps from './Maps'

function App() {
  const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796})
  const [mapZoom, setMapZoom] = useState(3)

return (
    <div className="app">
        <Maps
            center= {mapCenter}
            zoom= {mapZoom}
         />
    </div>
  )
}

export default App;