HERE Javascript APIの逆ジオコーディングで現在地を教えてくれるWEBサービスを作る #JavaScript

これは【HERE WeGo!】ジオファン集まれ！地理空間情報、地図に関する記事を募集しています by HERE Advent Calendar 2022　20日目の記事です

動機について

自分が今どこにいるのかすぐわかるモノが欲しいなと思い、HEREの逆ジオコーディングサービスを使ってできそうだなと思いました

HEREのアカウントおよびAPIキーの準備

そのあたりは、このカレンダーの記事でみなさんが書いてくださっているので割愛します

まずは現在地の取得

JavascriptのGeolocation APIを使います

Webブラウザに位置情報の取得許可がされていないとgeolocationが使用不可になっているので、その場合の処理を行います

if('geolocation' in navigator) {
  // geolocationが使用可能になっている場合の処理
} else {
  // geolocationが使用不可になっている場合の処理
}

現在位置の取得は
getCurrentPositionで行います
位置情報の取得処理を合わせると以下のような記述になります

function success(position:any) {
// 位置情報の取得が成功した場合の処理
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;
}

function error() {
// 位置情報の取得でエラーが発生した場合の処理
}

if('geolocation' in navigator) {
  // geolocationが使用可能になっている場合の処理
  // 現在の位置情報の取得
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  // geolocationが使用不可になっている場合の処理
}

逆ジオコーディングで住所を取得

現在地の座標が取れましたので、逆ジオコーディングを行い、住所を取得します

まず、HEREのMapsAPIを導入します

npm install @here/maps-api-for-javascript --save

で、インポートして

import H from '@here/maps-api-for-javascript';

逆ジオコーディング

const platform = new H.service.Platform({
  'apikey': 'あなたのAPIキー'
});
const service = platform.getSearchService();
// 逆ジオコーディングを行う
service.reverseGeocode({
  // 取得した緯度経度を設定
  at: `${latitude},${longitude}`,
},
(result: any) => {
  const locationLabel = result.items[0].address.label;
  console.log(locationLabel); // 取得した住所が入っている
},
(error) => {
  alert(error);
});

できたもの

こちらです

位置情報の取得許可をしないと取得できませんのであしからず
今UIが全く無い状況ですが、少しづつ改修していくつもりです。。。

ちなみに逆ジオコーディングのリクエスト数が１日1,000回を越えるとエラーとなって取得できなくなりますが、おそらく大丈夫でしょう

ソースコードはこちらになります

感想

こういうサービスが数時間で作れるのは魅力的ですね
精度も高く、個人的には満足なサービスができました

明日は@miyauchiさんが投稿予定ですね！お楽しみに