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

Question

我正在创建一个使用传单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,
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(的语法不同。我看到你已经有点想好了，但我想在下面的代码片段中确认一下：

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

Answer 2

您最好使用whenCreated道具，它直接返回映射实例并正式记录。如果执行map.target，whenReady将返回映射实例，但尽管它有效，但没有正式记录。因此，如果您在不使用map.target的情况下直接访问map方法，您将得到一个错误，因为此时map实例是未定义的。几行后您已经在使用它了(map.target(。请查看此处了解有关文档的更多信息。

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