react-leaflet 获取当前 latlng onClick答案

【问题标题】：react-leaflet get current latlng onClickreact-leaflet 获取当前 latlng onClick
【发布时间】：2019-06-27 10:25:10
【问题描述】：

如果有人可以帮助我，我会很高兴... 我已经在我的反应项目上安装了 react-leaflet 并且地图组件已成功加载，当我点击地图时我需要获取当前纬度并在弹出窗口中显示它但我不知道如何:(

请……请……帮帮我……

这是我的代码

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;

【问题讨论】：

标签： reactjs leaflet react-leaflet

【解决方案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 状态用于保持标记位置
Map.onClick 事件处理程序的event.latLng 属性返回鼠标事件位置

Here is a demo供您参考

【讨论】：

截至 2021 年 5 月，这不起作用，我想这是因为我使用的是 v3。你如何在 v3 中做到这一点？

【解决方案2】：

你是怎么做到的？

这将是开始：

使用 LeafletMap 组件中的点击（参见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);
}

从这里开始，您可以使用您正在寻找的信息创建标记/弹出窗口。

附加提示：请确保您的代码在您的帖子中正确包装..

【讨论】：