加载反应传单时出错
加载反应传单时出错
提问于 2020-12-27 03:10:29
我正在尝试加载传单地图，但它给了我一个错误：
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='© <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;回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-27 06:04:23
也许你没有使用正确版本的反应-传单(你的不出口地图)。请看我的工作示例：https://codesandbox.io/s/react-leaflet-forked-mg8x4?file=/src/index.js。我用了1.3.4
Stack Overflow用户
发布于 2020-12-27 12:05:41
你的地图没有尺寸，也许问题就出在那里
<Map
style={{ height: "100%", width: "100%" }}
center={position}
zoom={zoom}
>Stack Overflow用户
发布于 2020-12-29 00: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='© <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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65462572
复制相关文章
相似问题
腾讯云开发者
