タイトル通り、写真から撮影場所の緯度・経度を取得する方法についてです。
写真から緯度・経度を取得するためのライブラリは「react-native-exif」を導入しました。
GitHub のページはこちらから。
GitHub – francisco-sanchez-molina/react-native-exif
https://github.com/francisco-sanchez-molina/react-native-exif
なお、写真の選択には「react-native-image-crop-picker」ライブラリを使用しています。
実装準備ですが、まず下記コマンドでライブラリをインストールします。
npm install react-native-exif --save
次に、写真から緯度・経度を取得する処理を実行するファイルに下記を追加し、ライブラリをインポートします。
import Exif from 'react-native-exif'
準備はこれでOK。
あとは、緯度経度を取得したいタイミングで下記を実行すればOKです!
Exif.getLatLong('[画像のパス]') .then(({latitude, longitude}) => { // 緯度・経度の取得に成功した時の処理 console.log(latitude); console.log(longitude); }) .catch(msg => console.warn('ERROR: ' + msg))
追加する処理は以上です。
こちらを実行すれば写真から緯度・経度を取得することができます!
しかし、実際に Android で実行したところ、緯度・経度共に 0
が返ってきて、正しい値が取得できませんでした…。
Issues を調べてみてもそれらしい対処法は見つからず、別のライブラリを使うべきか…と思っていたところ、「react-native-image-picker」ライブラリの Issues にそれらしい記事があったので、そちらを試したら解決しました。
参考にした記事はこちら。
Get gps location from image · Issue #178 · react-native-image-picker/react-native-image-picker · GitHub
https://github.com/react-native-image-picker/react-native-image-picker/issues/178
こちらの記事によると、オプションの設定値に maxWidth: 8000
と maxHeight: 8000
を指定したら解決したとのこと。
オプションの設定値はこちらです。
const options = { quality: 1, mediaType: "photo", cameraType: "back", allowsEditing: true, noData: true, maxWidth: 8000, maxHeight: 8000, };
使っている「react-native-image-crop-picker」ライブラリにはオプションに maxWidth
と maxHeight
は無かったのですがとりあえず追加してみて、また quality
の値に 1 を指定しました。
実際に私がコードに設定した値は、最終的に下記のようになりました。
const options = { mediaType: 'photo', multiple: false, cropping: false, quality: 1, noData: true, maxWidth: 8000, maxHeight: 8000, };
で、この状態で再度 Android でアプリを実行してみたところ、緯度・経度の取得に成功しました!
…いや、何故?
釈然としませんが…とりあえず、複数の端末で動作を確認して、問題がないようでしたらこれでいきたいと思います。
なお、その後 iOS で実行したところ、そもそも Exif.getLatLong()
がエラーになりました。
「TypeError: undefined is not an object (evaluating ‘_ref.latitude’)」エラーとのことです。
こちらについては、これから調査し、対応します。
以上、React Native アプリで「react-native-exif」ライブラリを使って写真の Exif から緯度・経度を取得する方法でした。
ご参考になれば幸いです。