获取拖动反应传单的当前坐标

Question

我是react leaflet的新手。我创建了我的地图并成功添加了多边形。但是，当我在地图上拖动或缩放时，如何获取整个屏幕的当前坐标？我用的是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;

Answer 1

使用函数组件作为 MapContainer's 子组件。那里使用 useMapEvents 钩子监听 dragend 事件。 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>

Demo

获取拖动反应传单的当前坐标

Get current coordinates on dragging react leaflet

javascript

leaflet

reactjs

react-leaflet