Блог

Я хотел отобразить карту в react js для своего проекта. ПОЭТОМУ для этого я установил react-leaflet с помощью кода npm i react-leaflet , а также сделал npm i leaflet в терминале и ввел некоторый код для react leaflet. Код приведен ниже:

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

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

export default Map;
 

но проблема в том, что она показывает ошибку

Не удалось скомпилировать. /src/Map.js Ошибка при попытке импорта: « Map не экспортируется из « react-leaflet (импортируется как « LeafletMap ). Эта ошибка произошла во время сборки и не может быть устранена.

в чем проблема с моим кодом, пожалуйста, кто-нибудь может мне помочь?

Изменить:
import { Map as LeafletMap, TileLayer } from "react-leaflet";
Для:
import { MapContainer as LeafletMap, TileLayer } from "react-leaflet";