Javascript 获取拖动传单上的当前坐标

我是react传单的新手。我成功创建了地图并添加了多边形。但是，当我在地图上拖动或缩放时，如何获得整个屏幕的当前坐标？我使用openstreetmap的地图。非常感谢您的支持。 我的代码：

class App extends Component {
  componentDidMount()
  {
    //console.log(polygonData);
    navigator.geolocation.getCurrentPosition(function(position) { //mdn geolocation
      console.log(position)
    });
  }

  onEachContry = (feature, layer) =>{
    const contryName = feature.properties.NAME_1;
    //console.log(feature.properties.NAME_1);
    layer.bindPopup(contryName);

    if(contryName == "An Giang")
    {
      layer.options.fillColor = "yellow";
    }

    layer.on({
      /*mouseover: (event) => {
        console.log(event);
      }*/
    }
    )
  }

  countryStyle = {
    fillColor: "red",
    fillOpacity: 0.5,
    color: "black",
    weight: 2
  
  }

  render() {
    return (
        <MapContainer center={[10.7743, 106.6669]} zoom={6} >
          <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <GeoJSON
          style = {this.countryStyle}
          data={polygonData.features}
          onEachFeature={this.onEachContry}
          
          />
        </MapContainer>
    );
    }
}

/*<Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        */

export default App;

类应用程序扩展组件{
componentDidMount（）
{
//控制台日志（Polygonda）；
navigator.geolocation.getCurrentPosition（函数（位置）{//mdn geolocation
控制台日志（位置）
});
}
onEachContry=（功能，图层）=>{
const controlyname=feature.properties.NAME_1；
//console.log（feature.properties.NAME_1）；
layer.bindPopup（contryName）；
如果（合同名称=“安江”）
{
layer.options.fillColor=“黄色”；
}
分层({
/*鼠标悬停：（事件）=>{
console.log（事件）；
}*/
}
)
}
乡村风格={
填充颜色：“红色”，
填充不透明度：0.5，
颜色：“黑色”，
体重：2
}
render（）{
返回(
);
}
}
/*
一个漂亮的CSS3弹出窗口
易于定制。
*/
导出默认应用程序；

将函数组件用作

MapContainer的子函数。这里使用
useMapEvents
hook监听
dragend
event
e.target.getBounds
提供您所需的一切，如
getSouth（）
，
getWest（）
，
getEast（）
等方法

 function MyComponent() {
        const map = useMapEvents({
          dragend: (e) => {
            console.log("mapCenter", e.target.getCenter());
            console.log("map bounds", e.target.getBounds());
          }
        });
        return null;
      }

然后

<MapContainer
     ...><MyComponent/>
</MapContainer>