Блог

Мне нужно сосредоточиться на маркере на основе динамических результатов поиска.
Насколько я понял из других обсуждений, мне нужно использовать panTo функцию.
Я попробовал, и это работает частично. Вот пример кода и ссылка codesandbox
Note: Укажите свой ключ Google Maps в .env файле для тестирования codesandbox.

Map.js

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

const containerStyle = {
  width: "100%",
  height: "500px"
};

const center = { lat: 45.4211, lng: -75.6903 };
const Maps = ({ filteredPark }) => {
  const key = process.env.REACT_APP_GOOGLE_KEY; //test with your key please

  if (!key) {
    throw new Error("Google token is not set");
  }

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

  const panTo = React.useCallback(({ lat, lng }) => {
    mapRef?.current?.panTo({ lat, lng });
    mapRef?.current?.setZoom(18);
  }, []);

  useEffect(() => {
    filteredPark.map((a) => {
      const lat = a.coordinates[1];
      const lng = a.coordinates[0];
      return panTo({ lat, lng });
    });
  }, [filteredPark, panTo]);

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <LoadScript googleMapsApiKey={key}>
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={6}
          onLoad={onMapLoad}
        >
          {filteredPark amp;amp;
            filteredPark.map((park) => (
              <Marker
                key={park.PARK_ID}
                position={{
                  lat: park.coordinates[1],
                  lng: park.coordinates[0]
                }}
              />
            ))}
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default React.memo(Maps);
 

пользовательский компонент поиска

 import { useMemo } from "react";
import * as parkData from "./data/skateboard-parks.json";

const useParkFIlter = (DESCRIPT_1) => {
  const gridRows = parkData.features.map((park) => park.properties);

  const filteredParks = useMemo(() => {
    return (
      gridRows amp;amp;
      gridRows.filter((dispo) =>
        dispo.DESCRIPT_1.toLowerCase().includes(DESCRIPT_1.toLowerCase())
      )
    );
  }, [DESCRIPT_1, gridRows]);

  return [filteredParks];
};

export default useParkFIlter;

 

Любая помощь будет оценена.

Я внес изменения в ваш код. Если это не сработает, дайте мне знать.

  import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
        import React, { useEffect } from "react";
    
    const containerStyle = {
      width: "100%",
      height: "500px"
    };
    
    const center = { lat: 45.4211, lng: -75.6903 };
    const Maps = ({ filteredPark }) => {
      const key = process.env.REACT_APP_GOOGLE_KEY; //test with your key please
    
      if (!key) {
        throw new Error("Google token is not set");
      }
    
      //const mapRef = React.useRef();
      const [mapInstance, setMapInstance] = useState(null);
      const[zoom, setZoom] = useState(6);
      const onMapLoad = React.useCallback((map) => {
      //mapRef.current = map;
      setMapInstance(map);
      }, []);
    
      //const panTo = React.useCallback(({ lat, lng }) => {
        //mapRef?.current?.panTo({ lat, lng });
        //mapRef?.current?.setZoom(18);
      //}, []);
  

      useEffect(()=>{
           if(mapInstance){
               mapInstance.panTo({ lat, lng });
               setZoom(18);
           }
      },[mapInstance]);
    
      useEffect(() => {
        filteredPark.map((a) => {
          const lat = a.coordinates[1];
          const lng = a.coordinates[0];
          return panTo({ lat, lng });
        });
      }, [filteredPark, panTo]);
    
      return (
        <div style={{ width: "100%", height: "100%" }}>
          <LoadScript googleMapsApiKey={key}>
            <GoogleMap
              mapContainerStyle={containerStyle}
              center={center}
              //zoom={6}
              zoom={zoom}
              onLoad={onMapLoad}
            >
              {filteredPark amp;amp;
                filteredPark.map((park) => (
                  <Marker
                    key={park.PARK_ID}
                    position={{
                      lat: park.coordinates[1],
                      lng: park.coordinates[0]
                    }}
                  />
                ))}
            </GoogleMap>
          </LoadScript>
        </div>
      );
    };
    
    export default React.memo(Maps);