Я использую карту Leaflet для отображения на карте положения, заданного моим пользователем. Однако, когда я загружаю карту и центрирую ее на маркере пользователя, она находится не в центре моей карты, а в верхнем левом углу. Смотрите это видео для получения более подробной информации: https://imgur.com/a/2wTysTA
Вот мой код и css для карты.
import React, { Component } from 'react'
import L from 'leaflet'
export class VolontariusMap extends Component {
componentDidMount() {
this.map = L.map('mapid', {
center: [49.8419, 24.0315],
zoom: 16,
layers: [
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}),
]
})
}
componentWillReceiveProps(nextProps) {
var lon = nextProps.lon;
var lat = nextProps.lat;
if(lon != this.props.lon && lat != this.props.lat) {
this.map.panTo(new L.LatLng(lat, lon));
L.marker([lat, lon]).addTo(this.map);
this.map.invalidateSize();
}
}
render() {
return (
""
)
}
}
export default VolontariusMap
<div id="mapid"></div>
<VolontariusMap lon={this.state.offer.lon} lat={this.state.offer.lat} />
<!DOCTYPE html>
<html>
<head>
<title>Volontarius</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script src="https://kit.fontawesome.com/ba635d3828.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>
#mapid {
height: 400px;
}