[英]Bug display with react leaflet
I start with react and I want to use a module that is called "react-leaflet" to make a map map. 我从react开始,我想使用一个称为“ react-leaflet”的模块制作地图。 But the problem is that I have a display bug with my map in the end on my page.
但是问题是我的地图的末尾显示了一个显示错误。 Can you help me please ?
你能帮我吗 ?
Component Map: 组件图:
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>
);
}
}
Page to display Map: 显示地图的页面:
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>
);
}
}
Bug display: https://imgur.com/ojNDL3Z 错误显示: https : //imgur.com/ojNDL3Z
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.