Leaflet React v3 中的 Geo Locate 组件 - 每次刷新时不需要的重复

Question

我目前在 React (v3) 中使用 Leaflet，您需要在其中添加组件才能在地图上呈现它们。这是我得到的不需要的结果输出（绿色圆圈是重复的，点击也不起作用）： Map Render Image

这会在每次地图交互时不断重复。我不确定如何修复它并假设它是问题所在的库，因为没有其他组件复制此行为。如果无法修复，欢迎使用替代方案——只要它与 leaflet-react v3 兼容。简而言之：- 防止在每个地图渲染上出现重复。在浏览器中使用权限定位用户（在第一次加载时，然后如果用户手动平移，单击按钮到 relocate/flyto）

import { useMap } from "react-leaflet";
import Locate from "leaflet.locatecontrol";
import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";
import * as L from "leaflet";

const UserLocate = () => {
  const map = useMap();

  var lc = L.control
    .locate({
      position: "topright",
      strings: {
        title: "Show me where I am, yo!",
      },
    })
    .addTo(map);
  return null;
};

export default UserLocate;

/============================================ ========/

import EsriLeafletGeoSearch from "react-esri-leaflet/plugins/EsriLeafletGeoSearch";
import {
  MapContainer,
  Marker,
  TileLayer,
  Popup,
  ZoomControl,
  LayersControl,
  useMapEvents,
  useMapEvent,
  useMap,
} from "react-leaflet";

    import { Container, Button, Form, Row, Nav } from "react-bootstrap";
    import "leaflet/dist/leaflet.css";
    import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css";
    import L from "leaflet";
    import { BiMapPin } from "react-icons/bi";
    import UserLocate from "./ProfilePage/UserLocate";


function GeneralMap() {
  const defaultZoom = 14;
        <MapContainer
          center={[48.856614, 2.3522219]}
          zoom={defaultZoom}
          style={{ height: 400, width: "100%" }}
        >
          <LayersControl>
            <BaseLayer checked name="Standard">
              <TileLayer
                attribution='"<a href=\"https://www.jawg.io\" target=\"_blank\">&copy; Jawg</a> - <a href=\"https://www.openstreetmap.org\" target=\"_blank\">&copy; OpenStreetMap</a>&nbsp;contributors"'
                url="https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token="
              />
            </BaseLayer>
            <BaseLayer name="Black and White">
              <TileLayer
                attribution='"<a href=\"https://www.jawg.io\" target=\"_blank\">&copy; Jawg</a> - <a href=\"https://www.openstreetmap.org\" target=\"_blank\">&copy; OpenStreetMap</a>&nbsp;contributors"'
                url="https://{s}.tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token="
              />
            </BaseLayer>
          </LayersControl>
             <EsriLeafletGeoSearch
            position="topleft"
            useMapBounds={false}
            eventHandlers={{
              requeststart: () => console.log("Started request..."),
              requestend: () => console.log("Ended request..."),
              results: (r) => console.log(r),
            }}
          />
          <UserLocate />
        </MapContainer>

  );
}

export default GeneralMap;

Answer 1

如果您需要运行编码一次，请将其放入 useEffect 中：

useEffect(() => {
  //Code to run once
}, []);

Leaflet React v3 中的 Geo Locate 组件 - 每次刷新时不需要的重复

Geo Locate component in Leaflet React v3 - unwanted duplication on each refresh

javascript

reactjs

leaflet

react-leaflet

react-leaflet-v3