位置情報APIで経緯度を取得して、現在地から郵便番号を取得する【Amazon Location Service + Next.js】

「Permissons policies」から「アクセス権限の追加」をクリックします。

「既存のポリシーを直接アタッチ」から先程作成したポリシーの名前を入力して検索します。

作成したポリシーにチェックを入れて保存してポリシーの適用は完了です。

1-4. Amazon Location Serviceでインデックスを作成する

https://ap-northeast-1.console.aws.amazon.com/location/home?region=ap-northeast-1#/ にアクセスして、「Create place index」をクリックしてインデックスを作成します。

「Name」 にはインデックスの名前を入力します。適当でOKです。

「Data provider」はどのエンジンを使うかを選択できるようです。Esriというサービスからデータを得るか、HERE というサービスからデータを取得するかを選択できます。どちらが良いかはよく分かりません。データの構造が若干違うようですので、この辺りは色々触りながらご判断ください。

「Data storage options」では結果を保存するかどうかを設定できるようです。
料金表 を見て頂きたいのですが、恐らくこの表の中の「保存された結果」というものが「Yes, results will be stored」を選択したときの料金だと思われます。ということは、保存すると高額になるので、結果は保存しない方が安価で利用できるものだと解釈しています。（正しく理解できているかは分かりません。）そのため、今回は「No, single use only」を選択しました。

あとは最後の欄をチェック付けて同意し、「Create place index」でインデックスを作成しましょう。これでAWSでの操作は完了です。

2. Next.js の API Routes で位置情報から郵便番号を取得する仕組みを構築する

2-1. 必要なパッケージをインストールする

npm i aws-sdk

Next.jsのプロジェクトフォルダ内で上記コマンドを実行して、「aws-sdk」をインストールします。

2-2. API Routes からAmazon Location Serviceを叩くようにする。

それでは、Next.js の apiディレクトリに適当なファイルを作成して「位置情報から郵便番号を取得するAPI」を作っていきます。（記事用に型書くの面倒だったのでjsファイルでご容赦ください...。）

import { LocationClient, SearchPlaceIndexForPositionCommand } from '@aws-sdk/client-location'

export default async function handler(req, res) {
  const { method } = req

  if (method === 'GET') {
    res.status(400).json({
      code: 400,
      message: '不正なリクエストのため処理が中断されました。',
      postalcode: undefined
    })
    return
  }

  if (method === 'POST') {
    const { lng, lat } = req.body

    const client = new LocationClient({
      credentials: {
        accessKeyId: 'hoge', // アクセスキー
        secretAccessKey: 'hogehoge' // シークレットキー
      },
      region: 'ap-northeast-1'
    })

    const command = new SearchPlaceIndexForPositionCommand({
      IndexName: 'hogehoge', // Amazon Location Serviceで作成したインデックス名を入力します
      Position: [lng, lat]
    })

    const results = await client.send(command)

    const { PostalCode } = results.Results[0].Place

    console.log(PostalCode)

    res.status(200).json({
      code: 200,
      message: 'リクエストが正しく処理されました。',
      postalcode: PostalCode
    })
    return
  }
}

lng と latの値をPOSTすると、座標から郵便番号を返却するという内容です。

results.Results[0] の中身は下記のような結果が入ってくれています。

この内 PostalCodeを抽出すれば郵便番号が取得できる、という仕組みです。

あとはフロント側で navigator.geolocation.getCurrentPosition() を使って座標を取得し、座標をPOSTすることで結果を取得することができるようになります。（多分バレたと思いますが記事を書くのが面倒になったので急に締めました...笑）

精度としてはPCだとやや雑ですが、スマホだと割りと近いところを示してくれます。（navigator.geolocation.getCurrentPosition() 側の問題なのでAmazon Location Serviceは悪くないです。）

APIリファレンス