Reactjs map.getCenter和map.getBounds不是map.target.on（'；单击'；）函数中的函数

我正在创建一个应用程序，该应用程序使用了OpenStreetMapAPI传单，但我遇到了一个问题。我试图在单击地图时获取中心坐标，但得到的错误是：“TypeError:map.getCenter不是函数”，同样的错误是“TypeError:map.getCenter不是函数”。下面是我的代码

import React, {Component} from 'react';
import L from 'leaflet';
import './App.css';
import leafGreen from './assets/leaf-green.png';
import leafRed from './assets/leaf-red.png';
import leafShadow from './assets/leaf-shadow.png';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

class App extends Component {
  constructor() {
    super();
    this.state = {
      markers: [[51.505, -0.09]]
    };
  }

  greenIcon = L.icon({
    iconUrl: leafGreen,
    shadowUrl: leafShadow,
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76]
  });

  render() {
    return (
      <MapContainer 
        className="map"
        zoom={13} 
        center = {[51.505, -0.09]}
        whenReady={(map) => {
          console.log(map.getCenter())
          // var bounds = map.getBounds()
          // console.log(bounds.getCenter())
          map.target.on("click", function (e) {
            const { lat, lng } = e.latlng;
            var marker = L.marker([lat, lng], {icon: L.icon({
              iconUrl: leafRed,
              shadowUrl: leafShadow,
              iconSize:     [38, 95], // size of the icon
              shadowSize:   [50, 64], // size of the shadow
              iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
              shadowAnchor: [4, 62],  // the same for the shadow
              popupAnchor:  [-3, -76]
            })} ).addTo(map.target);
            marker.bindPopup("New one")
          });
        }}
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        ></TileLayer>
        {this.state.markers.map((position, idx) => 
          <Marker key={`marker-${idx}`} icon={this.greenIcon} position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
        )}
      </MapContainer>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“传单”进口L；
导入“/App.css”；
从“./assets/leaf green.png”导入叶绿；
从“/assets/leaf red.png”导入叶红；
从“./assets/leaf shadow.png”导入叶影；
从“react传单”导入{MapContainer、TileLayer、Marker、Popup}；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
标记：[[51.505，-0.09]]
};
}
绿色图标=L.icon({
叶绿，
shadowUrl:leafShadow，
图标大小：[38,95]，//图标的大小
阴影大小：[50，64]，//阴影的大小
iconAnchor:[22，94]，//对应于标记位置的图标点
shadowAnchor:[4，62]，//对阴影也一样
popupAnchor:[-3，-76]
});
render（）{
返回(
{
console.log（map.getCenter（））
//var bounds=map.getBounds（）
//console.log（bounds.getCenter（））
map.target.on（“单击”，函数（e）{
常数{lat，lng}=e.latlng；
var marker=L.marker（[lat，lng]，{icon:L.icon({
叶状的，
shadowUrl:leafShadow，
图标大小：[38,95]，//图标的大小
阴影大小：[50，64]，//阴影的大小
iconAnchor:[22，94]，//对应于标记位置的图标点
shadowAnchor:[4，62]，//对阴影也一样
popupAnchor:[-3，-76]
})}）.addTo（map.target）；
marker.bindpoop（“新的”）
});
}}
>
{this.state.markers.map（（位置，idx）=>
一个漂亮的CSS3弹出窗口。
可轻松定制。
)}
);
}
}
导出默认应用程序；

---

有没有人注意到我做得不对，我希望能听到你的声音。

你最好在创建时使用

道具，它直接返回地图实例，并有正式的文档记录
whenReady
返回映射实例（如果您执行了
map.target
），但尽管它可以工作，但没有正式记录。因此，如果您不使用map.target直接访问map方法，您将得到一个错误，因为此时map实例未定义。几行之后您就已经在使用它了（map.target）。查看有关文档的更多信息

 <MapContainer 
        className="map"
        zoom={13} 
        center = {[51.505, -0.09]}
        whenCreated={(map) => {
          console.log(map.getCenter())
        }
...
/>

{
console.log（map.getCenter（））
}
...
/>
使用whenReady属性时，需要使用map.target作为getCenter（）的前缀，这与whenCreated等其他道具的语法不同。我看到您已经有点明白了，但我想在下面的代码片段中确认一下：

whenReady={(map) => {
          map.target.on("drag", function (e) {
            console.log(map.target.getCenter())
}

我们尝试在whenReady中使用map.target.getCenter（），这就是我们现在想要实现的目标