Question

如果有人可以帮助我，我将非常高兴... 我已经在我的react项目上安装了react-leaflet并且成功加载了地图组件，我需要获取当前的latlng并在单击地图时将其显示在弹出窗口中，但我不知道如何：（

请...请...帮帮我...

这是我的代码

    Complex[][] temp = new Complex[nFrames][nChannels];
    Complex[][] tempConj = new Complex[nFrames][nChannels];

    X = new Array2DRowFieldMatrix[nFreqs];
    Xcopy = new Array2DRowFieldMatrix[nFreqs];
    Xconj = new Array2DRowFieldMatrix[nFreqs];
    Y = new Array2DRowFieldMatrix[nFreqs];
    for (int f = 0; f < nFreqs; f++) {
        for (int t = 0; t < this.nFrames; t++) {
            for (int c = 0; c < this.nChannels; c++) {
                temp[t][c] = STFTin[c][t][f];
                tempConj[t][c] = STFTin[c][t][f].conjugate();
                //STFTin is nChannels by nFrames by nFreq
        }
        X[f] = new Array2DRowFieldMatrix<>(temp);
        Xconj[f] = new Array2DRowFieldMatrix<>(tempConj);
        Xcopy[f] = (Array2DRowFieldMatrix<Complex>) X[f].copy();
        Y[f] = (Array2DRowFieldMatrix<Complex>) X[f].copy();
    }

Answer 1

下面是一个有关单击地图后如何在弹出窗口中显示制造商位置的示例：

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPos: null
    };
    this.handleClick = this.handleClick.bind(this);
  }


  handleClick(e){
    this.setState({ currentPos: e.latlng });
  }

  render() {
    return (
      <div>
        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
          <TileLayer
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          { this.state.currentPos && <Marker position={this.state.currentPos} draggable={true}>
            <Popup position={this.state.currentPos}>
              Current location: <pre>{JSON.stringify(this.state.currentPos, null, 2)}</pre>
            </Popup>
          </Marker>}
        </Map>
      </div>
    )
  }
}

说明：

currentPos状态用于保持标记位置

event.latLng

Map.onClick属性返回鼠标事件位置

Here is a demo供参考

Answer 2

您试图实现什么？

这将是开始：

使用LeafletMap组件中的click（请参阅https://leafletjs.com/reference-1.4.0.html#map-click）事件并调用您的函数，例如：

<LeafletMap
  center={[35.755229,51.304470]}
  zoom={16}
  maxZoom={20}
  attributionControl={true}
  zoomControl={true}
  doubleClickZoom={true}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
  onclick={this.handleClick}>
>
...
</LeafletMap>

在handleClick函数中，您将获得lat和lng的信息，如下所示：

handleClick = (e) => {
  const { lat, lng } = e.latlng;
  console.log(lat, lng);
}

从这里开始，您可以使用所需的信息来创建标记/弹出窗口。

其他提示：请确保您的代码正确包装在您的帖子中。

react-leaflet获取当前lantng onClick

2 个答案: