点击地图获取经纬度

Question

我正在使用 React Leaflet 做一个小应用程序，我想在每次点击某个地方时在地图上添加一个标记，

我不知道该怎么做，我在下面尝试了一些东西，但是控制台日志没有 return 东西，

function App() {
  const [position, setPosition] = useState([48.8534, 2.3488]);
  const [markers, setMarkers] = useState([]);

  function addMarker(e) {
    console.log("e", e);
    const newMarker = e;
    setMarkers([...markers, newMarker]);
  }

  return (
    <div className="App" style={{ width: "100%", height: "100vh" }}>
      <MapContainer
        center={position}
        zoom={6}
        scrollWheelZoom={true}
        style={{ width: "100%", height: "100vh" }}
        onClick={addMarker}
      >
        <MyComponent />
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {markers &&
          markers.map((marker, index) => {
            <Marker key={`marker-${index}`} position={marker}>
              <Popup>
                <span>Popup</span>
              </Popup>
            </Marker>;
          })}
      </MapContainer>
    </div>
  );
}

export default App;

Answer 1

react-leaflet 刚刚更新到版本 3，不再支持像 onClick 这样的内联事件。您需要使用 useMapEvents 挂钩。示例 here.

import { MapContainer, useMapEvents } from 'react-leaflet'

function AddMarkerToClick() {

  const [markers, setMarkers] = useState([]);

  const map = useMapEvents({
    click(e) {
      const newMarker = e.latlng
      setMarkers([...markers, newMarker]);
    },
  })

  return (
    <>
      {markers.map(marker => 
        <Marker position={marker}>
          <Popup>Marker is at {marker}</Popup>
        </Marker>
      )}
    </>
  )
}

function App() {

  return (

    <div className="App" style={{ width: "100%", height: "100vh" }}>
      <MapContainer {...} > {/* omit onClick */}
        <AddMarkerToClick />
      </MapContainer>
    </div>

  );
}

export default App;

_{我还没有机会测试这个，但这应该会给你一个想法。}

Answer 2

从 'react'

导入 React，{ 备忘录，useEffect，useState}

从'react-leaflet'导入{地图，TileLayer} 导入 'leaflet/dist/leaflet.css' 从 './Markers'

导入标记

const 初始状态 = ({ 纬度：'18.4942031'， lng: '-69.8919176', 缩放：'13' })

export const MapView = memo(({dataMap, searchHistory}) => {

const [ properties, setProperties ] = useState(initialState)

const setPropertiesOnMap = () =>{
    setTimeout(function(){
        setProperties({
            lat: dataMap[0]?.latitude || '18.4942031',
            lng: dataMap[0]?.longitude || '-69.8919176',
            zoom: '18',
        })
    },500)
}

useEffect(() =>{
    if(dataMap.length === 1){
        setPropertiesOnMap()
    }else{
        setProperties(initialState)
    }
//eslint-disable-next-line
},[dataMap])

return (
    <Map center={{lat: properties.lat, lng: properties.lng}} zoom={properties.zoom} minZoom={8}>
        <TileLayer 
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        {dataMap[0] && <Markers dataMap={dataMap} searchHistory={searchHistory} />}
    </Map>
)

})

我也做过类似的，希望对你有帮助

点击地图获取经纬度

Get latitude and longitude on click on Map

leaflet

reactjs

react-leaflet