【RN】react-native-geocodingでジオコーディングを実装
はじめに
今回はReact Native
アプリにジオコーディング機能を盛り込む方法について紹介します。
ジオコーディングについて簡単に説明しておくと、「静岡駅」といった文字列から位置情報(緯度、経度)への変換を指します。
今回はreact-native-geocoding
というライブラリを使って行います。
注意点ですが、内部的にはGoogle Cloud Platform
(以下長いのでGCP
)を用いるため、GCP
側でのAPI KEY
の発行や課金登録(ジオコーディングは従量課金のため、要支払い情報の登録)が必要になります。
今回は、GCP
のプロジェクト作成や課金登録は済んでいるものとし、API KEY
は発行してある前提とします。
インストール
yarn add react-native-geocoding
使い方
以下、使い方です。
初期化
まずはAPI KEY
を用いてinit()
を行います。
import Geocoder from 'react-native-geocoding';
// GCPから取得したAPIキー
const API_KEY: string = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// 初期化
Geocoder.init(API_KEY);
// 以下のように言語を設定することもできる
// Geocoder.init(API_KEY, {language : "ja"});
ジオコード処理
「文字情報」からのジオコーディング処理は以下のように行います。
変数名はaddress
としてありますが、「静岡県◯◯市××」のような一般的な住所形式以外にも、特定の建物名などランドマーク的な文字列を使うことも可能です。
import Geocoder from 'react-native-geocoding';
/**
* ジオコーディング処理
* @param address 文字情報
*/
const geocode = async (address: string): Geocoder.GeocoderResponse => {
return await Geocoder.from(address);
}
レスポンス
上記の処理の結果、レスポンスとして返るGeocoderResponse
は以下のような内容になります。
interface GeocoderResponse {
plus_code: PlusCode;
results: {
address_components: {
long_name: string;
short_name: string;
types: string[];
}[];
formatted_address: string;
geometry: {
bounds: {
northeast: LatLng;
southwest: LatLng;
};
location: LatLng;
location_type: 'APPROXIMATE' | 'ROOFTOP' | string;
viewport: {
northeast: LatLng;
southwest: LatLng;
};
};
place_id: string;
types: string[];
plus_code: PlusCode;
}[];
status: 'OK' | string;
}
基本的には緯度経度を使いたいと思うので、results.geometry.location
を使用することが多いです。
まとめ
今回はreact-native-geocoding
を使って、React Native
アプリからジオコーディングを行う方法について紹介しました。
関連する機能としては、Google Map
などの地図をアプリに表示させ、ジオコーディングした結果をプロットするようなものがあります。
その際に使用するreact-native-maps
の使い方については、以下の記事で解説していますので、そちらを参照ください。
今回の記事が役立てば幸いです。
Discussion