React Native Maps Directionsを使って経路の所要時間を取得する方法

今回は、react-native-maps-directionsを使って2点間の経路案内を作る方法と、その経路にかかる所要時間を取得する方法を紹介します。これを使用することで、簡単に移動時間を取得できるので、移動に関するアプリを作る際に非常に役立ちます。

---

目次

1. 導入
2. react-native-maps-directionsの設定
3. 所要時間の取得方法
4. 完全なサンプルコード
5. まとめ

---

導入

まず、必要なパッケージをインストールしましょう。

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

また、Google Maps Directions APIキーが必要です。こちらから取得してください。

---

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}; // 例としてサンフランシスコ
  const destination = {latitude: 34.0522, longitude: -118.2437}; // 例としてロサンゼルス

  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" // あなたのGoogle Maps APIキーを入力
      />
    </MapView>
  );
};

---

所要時間の取得方法

react-native-maps-directions には、経路情報が読み込まれたときのコールバックとして onReady プロパティが提供されています。これを利用して、経路の距離と所要時間を取得します。

const handleDirectionsReady = (result) => {
  const distance = result.distance; // 距離 (km)
  const duration = result.duration; // 所要時間 (時間)

  console.log(`距離: ${distance} km, 所要時間: ${duration} 時間`);
};

<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} km, 所要時間: ${duration} 時間`);
  };

  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 を使用して、2点間の経路案内とその所要時間を取得する方法を紹介しました。この方法を使えば、移動に関するアプリを簡単に作ることができるでしょう。皆さんもぜひ試してみてください！

---

いいねやフォローをいただけると嬉しいです！次回も役立つ情報をお届けします！🚀

---

以上、React Native Maps Directionsを使って経路の所要時間を取得する方法についてでした。ご質問やコメントがあれば、お気軽にどうぞ！👋