Javascript 如何在我的页面上重新对齐此传单地图？_Javascript_Html_Css_Reactjs_Leaflet

Javascript 如何在我的页面上重新对齐此传单地图？

javascript html css reactjs leaflet

Javascript 如何在我的页面上重新对齐此传单地图？,javascript,html,css,reactjs,leaflet,Javascript,Html,Css,Reactjs,Leaflet,我使用传单地图在地图上显示用户给定的位置。但是，当我加载地图并将其置于用户标记的中心时，它不在地图的中心，而是在左上角。有关更多详细信息，请参阅此视频：这是我的代码和地图的css import React, { Component } from 'react' import L from 'leaflet' export class VolontariusMap extends Component { componentDidMount() { this.map = L.map

我使用传单地图在地图上显示用户给定的位置。但是，当我加载地图并将其置于用户标记的中心时，它不在地图的中心，而是在左上角。有关更多详细信息，请参阅此视频：

这是我的代码和地图的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: '&copy; <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

它的

L.latLng（lat，lon）

，而不是

new L.latLng（lat，lon）

@StackSlave同样的事情还在发生…@StackSlave这两个结构在功能上是相同的。你可以尝试替换

this.map.panTo（new L.latLng（lat，lon））与this.map.setView（[lat，lon]）看起来像丢失的无效化。看到和
<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;
}