IT技术 - 为什么我得到的“地图”不是从“react传单”中导出的？ - 吾爱随笔录

为什么我得到的“地图”不是从“react传单”中导出的？

IT技术 reactjs react-leaflet

2021-05-19 13:14:23

为什么我得到：

./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";

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

4个回答

尝试使用MapContainer 组件。

MapContainer 组件负责使用 React Context 创建 Leaflet Map 实例并将其提供给其子组件。

创建 MapContainer 元素时，其 props 用作创建 Map 实例的选项。

现在您必须导入 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>

更改Map为MapContainer。

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

您应该使用import {MapContainer} from "react-leaflet"而不是 Map 并在此之前安装 react-leaflet 和传单

$ npm i leaflet react-leaflet

希望这能解决您的问题

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

其它你可能感兴趣的问题