🍣

【RN】react-native-geocodingでジオコーディングを実装

2021/09/27に公開

はじめに

今回は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