Question

我正在尝试使用库react-leaflet做一个简单的Web应用程序。

我有以下代码：

inputStream = new FileInputStream(source.properpath);

但是，TileLayer始终以随机顺序显示。我已经阅读了很多代码，其中import React from 'react'; import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; class LeafletMap extends React.Component { constructor() { super(); this.state = { lat: 51.505, lng: -0.09, zoom: 13, }; } render() { const position = [this.state.lat, this.state.lng]; return ( <Map center={position} zoom={this.state.zoom}> <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' /> <Marker position={position}> <Popup> <span>A pretty CSS3 popup. <br/> Easily customizable.</span> </Popup> </Marker> </Map> ); } } export default LeafletMap;必须与ComponentDidMount()一起使用，但我看到的渲染与库相比完全不同。

你知道我该怎么办？

问候！

Answer 1

它无效的唯一原因是我们需要在index.html中添加以下代码：

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
<style type="text/css">
    .leaflet-container {
        height: 400px;
    }
</style>

就是这样。

TileLayer以不同的顺序显示（使用React-Leaflet库）

1 个答案: