与 Google Maps Api 反应，如何重新定位地图答案

【问题标题】：React with Google Maps Api, how to recenter map与 Google Maps Api 反应，如何重新定位地图
【发布时间】：2020-10-04 22:59:42
【问题描述】：

我正在使用 react 并将地图用作功能组件。（关于类，我仍然不确定何时使用类和函数）。但是我的主要问题是我正在使用 google Maps 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;

【问题讨论】：

标签： reactjs google-maps google-maps-api-3

【解决方案1】：

我无法访问react-google-maps library 的文档链接。您可以使用@react-google-maps/api library，因为这是对react-google-maps 的重写，并且得到了更多的维护。

对于您的用例，您可以将中心的值设置为状态并在 setinterval 函数中更新它。这样，每次中心的状态值变化，中心也随之变化。请参阅此sample code 和下面的代码 sn-p：

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

【讨论】：