如何解决如何使用反应传单创建地图
我在做时如何使用传单创建地图显示以下内容。
./src/Map.js
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
这是我的代码:
import React from 'react';
import './Map.css';
import { Map as LeafletMap,TileLayer } from 'react-leaflet';
function Map() {
return (
<div className="map">
<LeafletMap>
<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 Map
解决方法
react-leaflet
导出一个 MapContainer
组件。因此,请更改您的导入并稍微更改您的代码。
import { MapContainer,TileLayer } from 'react-leaflet';
...
return (
<div className="map">
<MapContainer>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
</MapContainer>
</div>
...
此外,请阅读 https://react-leaflet.js.org/docs/start-setup/ 上的设置文档,您会在其中找到一些有用的故障排除技巧。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。