Блог

Я использую react и использую карту в качестве функционального компонента. (tbh я все еще не уверен, когда использовать классы v. функции, когда дело доходит до классов). однако моя главная проблема заключается в том, что я использую Google Maps API для представления карты, и я пытаюсь центрировать карту по текущему местоположению пользователя. кроме того, я хотел, чтобы он обновлялся по мере их обхода, поэтому я просто собирался использовать функцию set interval для установки таймера, когда он обновляется. Я подумал, что навигатор будет моим лучшим выбором. Хотя, похоже, я не могу найти подходящую функцию для обновления свойства center после инициализации.

Я отмечу, куда, по моему мнению, должна идти функция.

Вот документация, которую я просматривал: 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;
  

Я не могу получить доступ к ссылке документации библиотеки react-google-maps. Вы можете использовать библиотеку @react-google-maps / api, поскольку это переписывание react-google-maps и более поддерживается.

Для вашего варианта использования вы можете установить значение вашего центра в состоянии и обновить его в функции setinterval . Таким образом, каждый раз, когда изменяется значение состояния центра, центр также изменяется. Пожалуйста, посмотрите этот пример кода и фрагмент кода ниже:

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