reactjs - map.getCenter 和 map.getBounds 不是 map.target.on ('click' ) 函数内的函数

Question

我正在创建一个使用传单 OpenStreetMap API 的应用程序，但遇到了问题。当我单击 map 时，我试图获取中心坐标，但收到错误:“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;

有人注意到我做错了什么吗，我希望收到你的来信。

Answer 1

使用whenReady属性时，需要使用map.target作为getCenter()的前缀，这与whenCreated等其他props的语法不同。我看到您已经有所了解，但我想在下面的代码片段中进行确认:

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