реагировать и Google Directions API без карты - PullRequest
Новая
       51

реагировать и Google Directions API без карты

0 голосов
/ 08 июля 2020

РЕДАКТИРОВАТЬ: Поскольку мое описание было нечетким. Мне нужны результаты .route () в моем внутреннем приложении, а не на карте. Мне нужна продолжительность и расстояние между исходной точкой и пунктом назначения для дальнейших вычислений в моем приложении.

До сих пор я пробовал это с помощью функции обратного вызова c: 

function getTravelTime(origin, destination, cb) {
    const directionsService = new google.maps.DirectionsService();
    directionsService.route(
        {
            origin: origin,
            destination: destination,
            travelMode: "DRIVING"
        },
        (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                cb(null, {
                    duration: moment.utc(moment.duration(result.routes[0].legs[0].duration.value, 'seconds').as('milliseconds')).format('HH:mm'),
                    distance: result.routes[0].legs[0].distance.value
                });
            } else {
                cb('error');
                console.log(result);
            }
        }
    );
};

, и я пытался прочтите это так: 

let tInfo = getTravelTime(origin, destination, function (err, dist) {
   if (!err) {
      let distanceBetweenLocations = dist.distance;
      let durationBetweenLocations = dist.duration;
      // Or with saving to a state
      setTravelInformation(prevState => ({
         distance: dist.distance,
         duration: dist.duration
      }));
    }
});

Есть ли возможность рассчитать расстояние и время в пути без необходимости рендеринга карты?

Пока я получил это, сильно сократил, поскольку у меня гораздо больше logi c для других компонентов в том же файле : 

import {
withGoogleMap,
GoogleMap,
withScriptjs,
Marker,
DirectionsRenderer
} from "react-google-maps";

const getTravelTime = (origin, destination) => {
    const directionsService = new google.maps.DirectionsService();
    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      },
      (result, status) => {
        console.log(result)
        if (status === google.maps.DirectionsStatus.OK) {
          setDirections(result);
        } else {
          setError(result);
        }
      }
    );
}

Нужно ли мне использовать Ho C withScript js и оборачивать мой компонент вокруг этого? Я невежественен.

Ответы [ 2 ]

0 голосов
/ 28 августа 2020 
    import React, { Component } from "react";
    import { withGoogleMap, GoogleMap, withScriptjs, DirectionsRenderer, Marker } from "react-google-maps";
    import { compose, withProps } from "recompose";
    import PropTypes from "prop-types";

    class MapDirectionsRenderer extends Component {
      static propTypes = {
        waypoints: PropTypes.array,
        places: PropTypes.array
      };

      state = {
        directionsRef: '',
        directions: null,
        error: null
      };

      componentDidMount() {
        const { places, origDest } = this.props;
        const waypointsArray = places.map(p => ({
          location: p.geocode,
          stopover: true
        }));
        const origin = origDest.origin_geocode;
        const destination = origDest.destination_geocode;
        const directionsService = new window.google.maps.DirectionsService();
        directionsService.route(
          {
            origin: origin,
            destination: destination,
            travelMode: window.google.maps.TravelMode.DRIVING,
            waypoints: waypointsArray.length >= 1 ? waypointsArray : [],
          },
          (result, status) => {
            if (status === window.google.maps.DirectionsStatus.OK) {
              this.setState({
                directions: result,
              });
            }
          }
        );
      }
      render() {
        return (
          this.state.directions && (
            <DirectionsRenderer
              directions={this.state.directions}
            />
          )
        );
      }
    }

    const MapView = compose(
      withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&v=3.exp",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `300px`, width: '100%' }} />,
        mapElement: <div style={{ height: `100%` }} />
      }),
      withScriptjs,
      withGoogleMap
    )(props => (
      <GoogleMap
        key={props.travelMode}
        defaultZoom={12}
        center={{ lat: 0, lng: 0 }}
      >
        <MapDirectionsRenderer
          places={props.wayPoints}
          origDest={props.originDestination}
        />
      </GoogleMap >
    ));

    export default MapView;
0 голосов
/ 13 июля 2020

Вы можете использовать useState и useEffect, см. https://reactjs.org/docs/hooks-effect.html

const [distance, setDistance] = useState(0);
const [duration, setDuration] = useState(0);

useEffect(() => {
  if (distance && duration) {
    console.log("Distance & Duration have updated", distance, duration);
  }
}, [distance, duration]);

Когда вы получаете результаты Directions, обновите расстояние и продолжительность с любым значением, которое вам нужно: 

directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  },
  (result, status) => {
    if (status === google.maps.DirectionsStatus.OK) {
      setDistance(result.routes[0].legs[0].distance.value);
      setDuration(result.routes[0].legs[0].duration.value);
    } else {
      console.error("error fetching directions", result, status);
    }
  }
);

Вот рабочий фрагмент с использованием @ response-google-maps / api

https://codesandbox.io/s/react-google-mapsapi-directions-service-m7qif

Если он не работает, необходимо использовать действующий ключ API.

...