我从react开始,我想使用一个称为“ react-leaflet”的模块制作地图。 但是问题是我的地图的末尾显示了一个显示错误。 你能帮我吗?
组件图:
import './Map.css';
import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
export default class MapLeaflet extends Component {
constructor(props) {
super(props);
this.state = {
lat: 51.505,
lng: -0.09,
zoom: 13
}
}
render() {
const position = [this.state.lat, this.state.lng];
console.log("dqdsqdq");
return(
<div id="map">
<Map center={position} zoom={13}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
/>
<Marker position={position}>
<Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
</Marker>
</Map>
</div>
);
}
}
显示地图的页面:
import './Apies.css';
import React, { Component } from 'react';
import MapLeaflet from '../../components/Map/Map.js';
export default class Apies extends Component {
render() {
return (
<section className="Apies">
<main className="main">
<h2>Map</h2>
<MapLeaflet/>
</main>
</section>
);
}
}
答案 0 :(得分:0)
需要在您的index.js中导入leaflet.css并指定地图容器的高度。
index.js:
import "leaflet/dist/leaflet.css";
MapLeaflet:
...
<Map style={{ height: "100vh" }} center={position} zoom={13}>