为什么我得到的 'Map' 不是从 'react-leaflet' 导出的？

Question

为什么我得到：

./src/components/mapComponent/MapView.jsx
Attempted import error: 'Map' is not exported from 'react-leaflet'.

我正在组件中导入这个：

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

这让我感到困惑，因为所有代码看起来都是正确的....

Answer 1

试试 MapContainer component。

The MapContainer component is responsible for creating the Leaflet Map instance and providing it to its child components, using a React Context.

When creating a MapContainer element, its props are used as options to create the Map instance.

现在您必须导入 MapContainer。

import { MapContainer, TileLayer, Marker } from 'react-leaflet';

<MapContainer
  className="markercluster-map"
  center={[51.0, 19.0]}
  zoom={4}
  maxZoom={18}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />
</MapContainer>

Answer 2

将 Map 更改为 MapContainer。

import { MapContainer, TileLayer } from "react-leaflet";

Answer 3

你应该使用 import {MapContainer} from "react-leaflet" 而不是 Map 并且在这样做之前通过

安装 react-leaflet 和 leaflet

$ npm i leaflet react-leaflet

希望这能解决您的问题

Answer 4

这个问题出现在较新的版本中尝试使用 "react-leaflet": "^2.8.0","leaflet": "^1.7.1" 它会解决

Answer 5

这个问题出现在旧版本尝试使用“react-leaflet”：“^3.2.1”，“leaflet”：“^1.7.1”，如果你使用的是react 17，它会解决和上 .

https://codesandbox.io/s/cluster-mapping-leaflet-9bkes

import { TileLayer, Tooltip, Marker, MapContainer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import MarkerClusterGroup from "react-leaflet-markercluster";
import { customMarker } from "./constants";
import L from "leaflet";

const Cluster = () => {
  let data = {
    minLat: -6.1751,
    maxLat: 55.7558,
    minLong: 37.6173,
    maxLong: 139.6917
  };

  const centerLat = (data.minLat + data.maxLat) / 2;
  var distanceLat = data.maxLat - data.minLat;
  var bufferLat = distanceLat * 0.05;
  const centerLong = (data.minLong + data.maxLong) / 2;
  var distanceLong = data.maxLong - data.minLong;
  var bufferLong = distanceLong * 0.05;
  const zoom = 4;
  const cities = [
    { position: [22.583261, 88.412796], text: "A" },
    { position: [22.58289, 88.41366], text: "B" }
  ];
  return (
    <MapContainer
      style={{ height: "480px", width: "100%" }}
      zoom={zoom}
      center={[centerLat, centerLong]}
      bounds={[
        [data.minLat - bufferLat, data.minLong - bufferLong],
        [data.maxLat + bufferLat, data.maxLong + bufferLong]
      ]}
      scrollWheelZoom={true}
    >
      <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <MarkerClusterGroup>
        {cities?.map((mark, i) => (
          <Marker
            style={{ color: "red" }}
            key={i}
            position={mark?.position}
            icon={customMarker}
          >
            <Tooltip direction="top" offset={[10, 0]}>
              <span style={{ fontSize: 14, fontWeight: "bold" }}>
                {mark?.text}
              </span>
            </Tooltip>
          </Marker>
        ))}
      </MarkerClusterGroup>
    </MapContainer>
  );
};

export default Cluster;

export const customMarker = new L.Icon({
  iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

为什么我得到的 'Map' 不是从 'react-leaflet' 导出的？

Why I am getting 'Map' is not exported from 'react-leaflet'?

reactjs

react-leaflet