如何解决React Leaflet:无法加载源地图
即使我显然设置了以下所有文档,我的传单地图也无法显示。我在控制台中收到的唯一消息是:
- 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='© <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或我当前忽略的其他内容。
任何建议将不胜感激。
解决方法
应遵循以下步骤
安装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='© <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>
);
}
工作演示
,“ React开发人员工具” Chrome扩展程序似乎有问题-请参见answer。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。