タイトル通り、写真から撮影場所の緯度・経度を取得する方法についてです。
写真から緯度・経度を取得するためのライブラリは「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 から緯度・経度を取得する方法でした。
ご参考になれば幸いです。