react-leaflet 獲取當前 latlng onClick

Question

如果有人能幫助我，我會很高興...我已經在我的 React 項目上安裝了 react-leaflet，並且 map 組件已成功加載，我需要獲取當前的 latlng 並在單擊 map 時在彈出窗口中顯示它但我不知道該怎么做:(

請...請...幫助我...

這是我的代碼

import React from 'react'
import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';

class Mapp extends React.Component {
    componentDidMount() {

    }

    render() {
        return (
            <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}
            >
                <TileLayer
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />
                <Marker position={[35.755229,51.304470]}
                draggable={true}
                >
                    <Popup >
                        Popup for any custom information.
                    </Popup>

                </Marker>
            </LeafletMap>
        );
    }
}

export default Mapp;

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事件處理函數返回的鼠標事件位置

這是一個演示供您參考

Answer 2

如果你使用 react-leaflet 版本 3.x，這將不起作用。 在這種情況下，在您添加到 map 的虛擬組件中使用 useMapEvents 掛鈎。例如，如果您想要控制台記錄被點擊的 position：

const LocationFinderDummy = () => {
    const map = useMapEvents({
        click(e) {
            console.log(e.latlng);
        },
    });
    return null;
};

然后使用map中的LocationFinderDummy如下：

<MapContainer
    center={[0, 0]}
    zoom={6}>
    <LocationFinderDummy />
</MapContainer>

Answer 3

您嘗試達到什么目的？

這將是開始：

使用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);
}

從這里開始，您可以使用所需的信息創建標記/彈出窗口。

其他提示：請確保您的代碼正確包裝在帖子中。