我正在尝试使用库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()一起使用，但我看到的渲染与库相比完全不同。
你知道我该怎么办？
问候！
答案 0 :(得分：4)
它无效的唯一原因是我们需要在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>
就是这样。