React google maps/api：如何根据搜索结果通过缩放关注标记位置？

Question

我需要关注基于动态搜索结果的标记。
据我从其他讨论中了解到，我需要使用panTo 函数。
我试了一下，它部分工作。 这是代码示例和codesandbox link
Note: 在.env 文件中提供您的 Google 地图密钥以测试代码框。

地图.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 &&
            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 &&
      gridRows.filter((dispo) =>
        dispo.DESCRIPT_1.toLowerCase().includes(DESCRIPT_1.toLowerCase())
      )
    );
  }, [DESCRIPT_1, gridRows]);

  return [filteredParks];
};

export default useParkFIlter;

我们将不胜感激。

Answer 1

我已对您的代码进行了更改。如果它不起作用，请告诉我。

 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 &&
                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);