使用传单在地图上设置标记

Question

我想单击我的地图并设置一个带有圆圈的标记。它显示了地图，但我无法设置标记。

console.log

没有显示任何内容。看来我的

handleMapClick

功能不起作用。

import React, { useState } from "react";
import { MapContainer, TileLayer, Marker, Circle } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const DynamicMap = () => {
  const [markerPosition, setMarkerPosition] = useState(null);
  const [circleCenter, setCircleCenter] = useState(null);
  const [circleRadius, setCircleRadius] = useState(10000); // Default radius in meters

  const handleMapClick = (e) => {
    const { lat, lng } = e.latlng;
    console.log("Clicked at:", lat, lng);
    setMarkerPosition([lat, lng]);
    setCircleCenter([lat, lng]);
  };

  return (
    <div>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={10}
        style={{ width: "100%", height: "500px" }}
        onClick={handleMapClick}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        />
        {markerPosition && <Marker position={markerPosition} />}
        {circleCenter && <Circle center={circleCenter} radius={circleRadius} />}
      </MapContainer>
      <div>
        <input
          type="range"
          min="10000"
          max="200000"
          step="1000"
          value={circleRadius}
          onChange={(e) => setCircleRadius(e.target.value)}
        />
        <p>Circle Radius: {circleRadius} meters</p>
      </div>
      <div id="map"></div>
    </div>
  );
};

export default DynamicMap;

Answer 1

不幸的是，React Leaflet 不支持直接在

onClick

组件上设置

<MapContainer>

属性。

相反，您应该创建一个自定义的“地图内容组件”作为

<MapContainer>

的子级，它可以使用

useMapEvent

钩子：

function MapContent() {
  const [markerPosition, setMarkerPosition] = useState(null);
  
  const map = useMapEvent("click", (e) => {
    const { lat, lng } = e.latlng;
    console.log("Clicked at:", lat, lng);
    setMarkerPosition([lat, lng]);
  });

  return (
    <>
      {markerPosition && <Marker position={markerPosition} />}
    </>
  );
}

function DynamicMap() {
  return (
    <MapContainer>
      <MapContent />
    </MapContainer>
  );
}