30.08.2023 в 22:02

Вычисление времени в пути с помощью React Native Maps Directions

Привет, сообщество dev-gang! Сегодня я покажу вам, как с помощью react-native-maps-directions получить примерное время в пути между двумя точками. Это может быть очень удобно при создании приложений, связанных с путешествиями или передвижением.

Введение

Для начала установим необходимые пакеты:

npm install react-native-maps react-native-maps-directions

Кроме того, вам потребуется API-ключ Google Maps Directions. Получить его можно здесь.

Настройка react-native-maps-directions

Далее настроим базовую конфигурацию для отображения маршрутных указаний:

import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194}; // For example, San Francisco
  const destination = {latitude: 34.0522, longitude: -118.2437}; // For example, Los Angeles

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
      />
    </MapView>
  );
};

Получение времени в пути

react-native-maps-directions предоставляет свойство onReady, которое устанавливает обратный вызов для момента загрузки информации о маршруте. Мы можем использовать его для получения дистанции маршрута и расчетного времени в пути.

const handleDirectionsReady = (result) => {
  const distance = result.distance; // Distance (km)
  const duration = result.duration; // Travel time (hours)

  console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
};

<MapViewDirections
  ...
  onReady={handleDirectionsReady}
/>

Полный пример кода

Вот полный пример кода для отображения маршрутных указаний и получения времени в пути:

import React from 'react';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';

const App = () => {
  const origin = {latitude: 37.7749, longitude: -122.4194};
  const destination = {latitude: 34.0522, longitude: -118.2437};

  const handleDirectionsReady = (result) => {
    const distance = result.distance;
    const duration = result.duration;

    console.log(`Distance: ${distance} km, Travel time: ${duration} hours`);
  };

  return (
    <MapView
      style={{flex: 1}}
      initialRegion={{
        latitude: 36.7783,
        longitude: -119.4179,
        latitudeDelta: 10,
        longitudeDelta: 10,
      }}>
      <MapViewDirections
        origin={origin}
        destination={destination}
        apikey="YOUR_GOOGLE_MAPS_API_KEY"
        onReady={handleDirectionsReady}
      />
    </MapView>
  );
};

export default App;

Заключение

В этой статье мы рассмотрели, как использовать react-native-maps-directions для получения расчетного времени в пути между двумя точками. Этот метод может упростить процесс создания приложений, связанных с путешествиями. Попробуйте его и улучшите свои приложения!

Если вы нашли это полезным, пожалуйста, оставьте лайк или комментарий. Оставайтесь с нами и следите за новыми полезными руководствами!

Источник:

Selected Sort Option

#JavaScript #ReactNative

Войти на сайт