Трудность с сохранением значений в константе и поддержанием состояния введенного значения (не реквизита)

Question

В качестве нового проекта для начинающих я решил использовать API карт Google для создания простого ввода места, проекта реакции на расстояние возврата. Я нашел хороший учебник с YouTube, где я узнал об этом. Однако я сталкиваюсь с проблемой, когда пытаюсь сохранить {координаты.lng} и {координаты.lat} в константе, чтобы использовать их для вычисления расстояния позже с помощью Google Maps API. Я попытался создать собственную функцию добавления и вызвать ее, но она не работает. Где-то мое понимание ошибочно, и я пытался определить это, но я действительно не понимаю. Как сохранить значения {координаты.lat} и {координаты.lng}?

import React from "react";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";

export default function Itinerary() {
  const [address, setAddress] = React.useState("");
  const [coordinates, setCoordinates] = React.useState({
    lat: null,
    lng: null
  });

  const add = (coordinates) => {
  const Latitude= {coordinates.lat};
  console.log(Latitude);
  };

  const handleSelect = async value => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCoordinates(latLng);
  };

  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6 mt-5 mx-auto">
      <PlacesAutocomplete
        value={address}
        onChange={setAddress}
        onSelect={handleSelect}
       >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <h1>Latitude: **{coordinates.lat}**</h1>
            <h1>Longitude: **{coordinates.lng}**</h1>
            <h1> {console.log({coordinates.lng}}</h1>
            <input size="50" height="40"{...getInputProps({ placeholder: "Type address" })} />
            {add(coordinates)}
            <div>
              {loading ? <div>...loading</div> : null}

              {suggestions.map(suggestion => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "#fff"
                };

                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
    </div>
    </div>
    </div>
  );
}

Answer 1

Чтобы определить схему местоположения,

place:{
      name: 'NameOfThePlace',
      location:{
          type:'Point',
          coordinates:[long,lat]
         }
       }

Это объект местоположения, в котором ваши широта и долгота представлены в виде массива. После создания объекта места вы также можете поместить его в массив мест, если выберете несколько мест. Этот формат также поддерживает структуру mongodb для сохранения и извлечения.