LoginSignup
0

More than 1 year has passed since last update.

これは 【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日1,000回を越えるとエラーとなって取得できなくなりますが、おそらく大丈夫でしょう

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

感想

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


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0