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

Question

我正在创建一个使用传单 OpenStreetMap API 的应用程序，但我运行遇到了问题。我试图在单击地图时获取中心坐标，但出现错误：'TypeError: map.getCenter is not a function'，'TypeError: map.getCenter is not a function' 也是如此。下面是我的代码。

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

你最好直接使用 whenCreated prop，returns 地图实例并有官方文档。 whenReady returns 地图实例如果你这样做 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())
        }
...
/>

Answer 2

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

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

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

map.getCenter and map.getBounds are not functions inside map.target.on('click') function

maps

openstreetmap

leaflet

reactjs

react-leaflet