React with Google Maps Api，如何重新居中地图

Question

我正在使用 React 并将地图用作功能组件。（说实话，当涉及到类时，我仍然不确定何时使用类 v. 函数）。然而，我的主要问题是我正在使用 google 地图 API 来显示地图，并且我正在尝试将地图置于用户当前位置的中心。另外，我希望它在他们四处走动时更新，所以我打算使用设置间隔函数来设置更新时间的计时器。我认为导航器是我最好的选择。虽然我似乎找不到合适的函数来在初始化后更新中心属性。

我会标记我认为该功能应该去的地方。

这是我一直在查看的文档： https://tomchentw.github.io/react-google-maps/#googlemap

function MapContainer() {
    const [currentLoc,setCurrentLoc] = useState(
        {
            lat: 42.331429,
            lng: -83.045753
        }
    )
    function setLocation() {
        if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    setCurrentLoc(position.coords.latitude,position.coords.longitude)
                }
            )
        }
    }
   
    return (
    <LoadScript
      googleMapsApiKey="Api key"
    >
      <GoogleMap
        //THIS IS WHERE YOU STYLLLLLEEEE
        //also where you set what is visible with the controls
        options= {{
            styles:mapStyles['hide'],
            mapTypeControl:false,
            disableDefaultUI:true,
            draggable:true,
            zoomControl:true
        }}
        id="44b929060bf5f087"
        mapContainerStyle=
        {{
            height: "86.5vh",
            width: "100%",
            stylers: mapStyles['hide'],
            draggable: false
        }}
        center={{
            lat: 44.331429,
            lng: -83.045753
        }}
        zoom={10}
      >
        {
            setInterval((props) => {
                var long;
                var lati;
                if(navigator.geolocation)
                {
                    navigator.geolocation.getCurrentPosition(
                        (position) => {
                            lati = position.coords.latitude;
                            long = position.coords.longitude;
                        }
                    )
                };
                //here is where i'd set the center if i had a function i could do it with
            }, 2000)
        }
      </GoogleMap>
    </LoadScript>
  )
}
 
export default MapContainer;

Answer 1

我无法访问 react-google-maps library. You can use the @react-google-maps/api library 的文档 link，因为这是对 react-google-maps 的重写并且得到了更多维护。

对于您的用例，您可以在状态中设置中心的值并在 setinterval 函数中更新它。这样，每次中心的状态值发生变化，中心也发生变化。请查看此 sample code 和下面的代码片段：

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

const containerStyle = {
  width: "400px",
  height: "400px",
};

function MyComponent() {
  const [map, setMap] = React.useState(null);
  const [currentLoc, setCurrentLoc] = React.useState({
    lat: 42.331429,
    lng: -83.045753,
  });

  const onLoad = React.useCallback(function callback(map) {
    setMap(map);

    setInterval((props) => {
      console.log("refreshed");
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
          setCurrentLoc({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          });
        });
      }
    }, 2000);
  }, []);

  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={{ lat: currentLoc.lat, lng: currentLoc.lng }}
        zoom={10}
        onLoad={onLoad}
      >
        {/* Child components, such as markers, info windows, etc. */}
        <></>
      </GoogleMap>
    </LoadScript>
  );
}

export default React.memo(MyComponent);

React with Google Maps Api，如何重新居中地图

React with Google Maps Api, how to recenter map

google-maps

google-maps-api-3

reactjs