React Leaflet：加载源地图失败

Question

即使我显然设置了以下所有文档，我的传单地图仍无法显示。我在控制台中收到的唯一消息是：

DevTools 加载 SourceMap 失败：无法加载 chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

根据文档我的组件：

import React from 'react';
import { Grid } from '@material-ui/core';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const MapContent = props => {
  return (
    <Grid component="section" className="tkr-map__content leaflet-container" height="100vh" width="100%" item={true} sm={12} md={10}>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </Grid>
  );
};

export default MapContent;

我不确定此时是否取决于我的本地服务器、Material UI、webpack 或其他我目前忽略的东西。

如有任何建议，我们将不胜感激。

Answer 1

应遵循以下步骤
安装 yarn add leaflet react-leaflet

将 css file 添加到 index.js 如下所示
import "leaflet/dist/leaflet.css";

并添加 height 很重要。height: "400px"
示例代码

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

export default function App() {
  return (
    <div>
      <MapContainer
        style={{ height: "400px" }}
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

工作演示

Answer 2

这似乎是“React Developer Tools”Chrome 扩展的问题 - 请参阅此 answer。

React Leaflet：加载源地图失败

React Leaflet: Failed to load sourcemap

reactjs

react-leaflet