如何使用 React 传单创建地图

Question

我如何使用传单创建地图，因为它显示了以下内容。

./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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
             />
           </LeafletMap>
        </div>
    )
}

export default Map

Answer 1

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
             />
           </MapContainer>
        </div>
...

另外，请阅读https://react-leaflet.js.org/docs/start-setup/ 上的设置文档，您会在其中找到一些有用的故障排除提示。