0

Нужно подключить Google Maps в проект, написанный на React (с возможностью автозаполнения, построения маршрута, выбора способа передвижения). Подключила API в index.html в head через тег script в формате:

https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places

В компоненте создаю экземпляр карты и подключаю autocomplete и directions в useEffect:

  let map, marker, directionsRenderer, directionsService, autocomplete, place;
  const classes = useStyles()
  const ref = useRef(null)
  const inputRef = useRef(null)
  const controlRef = useRef(null)
  const [routeType, setRouteType] = useState(routeTypes.driving);
  const [address, setAddress] = useState(null)
  const position = {
    lat: Number(apartment.geolocation.split(',')[0]),
    lng: Number(apartment.geolocation.split(',')[1])
    };

  useEffect(() => {
      map = new google.maps.Map(ref.current, {
        center: position,
        zoom: 13,
        disableDefaultUI: true,
        clickableIcons: false,
      });
      marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: '/images/map/marker.svg'
      });
      autocomplete = new google.maps.places.Autocomplete(inputRef.current, {
        componentRestrictions: { country: "ru" },
      });

      directionsService = new google.maps.DirectionsService()
      directionsRenderer = new google.maps.DirectionsRenderer()
      directionsRenderer.setMap(map)

      autocomplete.addListener("place_changed", () => {
        place = autocomplete.getPlace();
        marker.setVisible(false);
        setAddress(place);
        calculateAndDisplayRoute(place)
      });
  }, [])

Мне нужно вызывать функцию calculateAndDisplayRoute каждый раз при изменении routeType.

   const calculateAndDisplayRoute = (addressTo) => {
    directionsService.route(
      {
        origin: new google.maps.LatLng(position),
        destination: addressTo.geometry.location,
        travelMode: routeType,
      },
      (response, status) => {
        if (status === "OK") {
          directionsRenderer.setDirections(response);
        }
      }
    );
  }

Поэтому я вызываю ее в useEffect:

  useEffect(() => {
    if (address) {
      calculateAndDisplayRoute(address)
    }
  }, [routeType])

Но переменная directionsService имеет значение undefined, хотя я перезаписываю ее в useEffect. Мне нужно изменять маршрут на карте при выборе другого способа передвижения, но я не могу достучаться до нужной переменной.

1 ответ 1

0

Вынесла объявление за компонент, все заработало

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.