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

如何解决map.getCenter 和 map.getBounds 不是 map.target.on('click') 函数内的函数

我正在创建一个使用传单 OpenStreetMap API 的应用程序，但我遇到了一个问题。我试图在单击地图时获取中心坐标，但出现错误：“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,// size of the icon
              shadowSize:   [50,// size of the shadow
              iconAnchor:   [22,// point of the icon which will correspond to marker's location
              shadowAnchor: [4,// 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;

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

解决方法

您最好使用 whenCreated 属性，它直接返回地图实例并有官方文档。 whenReady 如果您执行 map.target 则返回地图实例，但尽管它有效，但并未正式记录在案。因此，如果您不使用 map.target 直接访问 map 方法，您将收到错误，因为此时 map 实例未定义。几行之后您已经在使用它（map.target）。有关文档的更多信息，请查看 here。

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

,

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

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