Вычисление времени в пути с помощью 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 для получения расчетного времени в пути между двумя точками. Этот метод может упростить процесс создания приложений, связанных с путешествиями. Попробуйте его и улучшите свои приложения!
Если вы нашли это полезным, пожалуйста, оставьте лайк или комментарий. Оставайтесь с нами и следите за новыми полезными руководствами!
