reactjs - 使用 React 限制地图上的点击次数

Question

我正在使用 Google Maps API，我想限制地图上标记的数量（限制：10）。我在 API 文档中找不到与它相关的任何内容，也找不到任何类似的来源来解决我的问题。

这是我的代码：

import React from "react";
import {
  GoogleMap,
  useLoadScript,
  Marker,
} from "@react-google-maps/api";

const mapContainerStyle = {
  height: "50vh",
  width: "100vw",
};
const options = {
  zoomControl: false,
  scrollwheel: false,
  draggable: false
};
const center = {
  lat: 34.155834,
  lng: -119.202789,
};

export default function App() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "AIzaSyCpaQDSgGTCetTR0uz42RyV80cByaGaYLs",
  });
  const [markers, setMarkers] = React.useState([]);

  const onMapClick =
    React.useCallback((e) => {

      setMarkers((current) =>
        [
          ...current,
          {
            lat: e.latLng.lat(),
            lng: e.latLng.lng(),
          },

        ]);
    }, []);

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  if (loadError) return "Error";
  if (!isLoaded) return "Loading...";

  return (
    <div>

      <GoogleMap
        id="map"
        mapContainerStyle={mapContainerStyle}
        zoom={14}
        center={center}
        options={options}
        onClick={onMapClick}
        onLoad={onMapLoad}
      >
        {markers.map((marker) => (
          <Marker
            key={`${marker.lat}-${marker.lng}`}
            position={{ lat: marker.lat, lng: marker.lng }}
            onClick={() => {
              console.log("clicked")
            }}

          />
        ))}
      </GoogleMap>
    </div>
  );
}

如何将点击次数设置为最多 10 次？

标签： reactjs

Answer 1

你可以做这样的事情。您可能还想在返回current执行一些其他更新之前调用另一个函数，以提醒用户他们在标记上已被最大化。

const onMapClick = React.useCallback((e) => {
  setMarkers((current) => {
    if (current.length < 10) {
      return [
        ...current,
        {
          lat: e.latLng.lat(),
          lng: e.latLng.lng()
        }
      ];
    } else {
      return current;
    };
  });
}, []);