获取点击位置经纬度

Posted 2023-02-23

【中文标题】获取点击位置经纬度

【英文标题】：Get clicked location latitude and longitude

【发布时间】：2021-04-03 21:47:56

【问题描述】：

我有这个 React 代码：

import React,  Component  from 'react';
import  MapContainer, TileLayer, Marker, Popup  from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './Map.css';
import L from 'leaflet';
import  geolocated  from 'react-geolocated';

class Map extends Component 
    render() 
        const DEFAULT_LATITUDE = 32.313268;
        const DEFAULT_LONGITUDE = 35.022895;
        const latitude = this.props.coords ? this.props.coords.latitude : DEFAULT_LATITUDE;
        const longitude = this.props.coords ? this.props.coords.longitude : DEFAULT_LONGITUDE;

        return (
            <MapContainer className="leaflet-map" center=[latitude, longitude] zoom=17 scrollWheelZoom=true>
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://s.tile.openstreetmap.org/z/x/y.png"
                />
                <Marker position=[latitude, longitude]>
                    <Popup>
                        Here you are ^_^
                            </Popup>
                </Marker>
            </MapContainer>
        );
    


export default Map;

如何添加事件以获取点击地图时位置的纬度和经度？ 在传单文档中有类似的内容：

map.on('click', function(e) 
    alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
);

但是如何使用 ReactJS 做到这一点？

【参考方案1】：

首先使用 MapContainer 上的 whenCreated 属性获取地图实例

<MapContainer
  className="leaflet-map"
  center=[latitude, longitude]
  zoom=17
  scrollWheelZoom=true
  style= height: "100vh" 
  whenCreated=(map) => this.setState( map )
 >

第二次在componentDidUpdate上使用它，当它被定义为监听地图点击事件时

componentDidUpdate(prevProps, prevState) 
    const  map  = this.state;
    if (prevState.map !== map && map) 
      map.on("click", function (e) 
        alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng);
      );
    
  

Demo