react-leaflet
地图无法正确呈现。
使用带有标准react
组件的地图时会出现问题。
我的网站也使用react-bootstrap
。正如我所读到的,这可能会导致react-leaflet
呈现的一些潜在问题。
import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
const position = [37.335556, -122.009167];
class MapView extends React.Component {
render() {
return (
<div
style={{
height:"100%"
}}>
<Map center={position} zoom={13}>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
</Popup>
</Marker>
</Map>
</div>
);
}
}
module.exports = MapView;
答案 0 :(得分:4)
主要问题是没有导入CSS,并且没有设置Map组件的高度。
然后我使用react-leaflet-marker-layer
import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import MarkerLayer from 'react-leaflet-marker-layer';
const position = { lng: -122.673447, lat: 45.522558 };
const markers = [
{
position: { lng: -122.67344700000, lat: 45.522558100000 },
text: 'Voodoo Doughnut',
},
{
position: { lng: -122.67814460000, lat: 45.5225512000000 },
text: 'Bailey\'s Taproom',
},
{
position: { lng: -122.67535700000002, lat: 45.5192743000000 },
text: 'Barista'
},
{
position: { lng: -122.65596570000001, lat: 45.5199148000001 },
text: 'Base Camp Brewing'
}
];
class ExampleMarkerComponent extends React.Component {
render() {
const style = {
border: 'solid 1px lightblue',
backgroundColor: '#333333',
borderRadius: '50%',
marginTop: '-5px',
marginLeft: '-5px',
width: '10px',
height: '10px'
};
return (
<div style={Object.assign({}, this.props.style, style)}></div>
);
}
}
class MapView extends React.Component {
render() {
return (
<div
style={{
height:"700px"
}}>
<Map center={position} zoom={13}
style={{
height:"700px"
}}>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<MarkerLayer
markers={markers}
longitudeExtractor={m => m.position.lng}
latitudeExtractor={m => m.position.lat}
markerComponent={ExampleMarkerComponent} />
</Map>
</div>
);
}
}
module.exports = MapView;
答案 1 :(得分:4)
还将这些Leaflet的CSS和JS文件添加到您的项目中
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
同时为地图添加高度。这是强制性的。
简单JsFiddle 附:研究外部资源。
答案 2 :(得分:3)
首先,通过控制台安装:
> npm install leaflet
> npm install react-leaflet
在 index.js 中导入一个位于 node_modules 中的 css
//src/index.js
import 'leaflet/dist/leaflet.css'
所以,现在只需输入边距和高度:
////src/App.js
return (
<MapContainer center={position} zoom={3} scrollWheelZoom={false}
style={{ height:"`enter code here`400px",backgroundColor:"red",marginTop:"80px", marginBottom:'90px'
}} >
</MapContainer>
)
或
return (
<>
<Map style={{ width: "100%", height: "100vh" }} center={center} zoom={13}>
</Map>
</> )