0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

現在地の標高を取得する(JavaScript)

Posted at

ブラウザ上で現在地の標高を知りたい。

FE3847C3-1DB9-4FD8-8E07-72576F8091B5_4_5005_c.jpeg

すでに標高を知ることができるアプリなどもありますが、オリジナルアプリ作成で
標高データ取得が必要なので調べました。

GeolocationAPIで現在地の取得

GeolocationAPIはJavaScriptのAPIです。
位置情報、IPアドレス、WiFiなどの情報から現在地を取得します。

function test() {
    navigator.geolocation.getCurrentPosition(test2);
}

getCurrentPosition()でデータの取得に成功すると引数のtest2()が実行されます。

function test2(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
}

test2()で緯度軽度の入れ物を用意し、test()で取得したデータを入れます。
緯度軽度の取得だけならここで終了です。

国土地理院APIの使用

国土地理院のAPIに緯度軽度を渡すと標高が返ってきます。
返ってくる値はJSONです。

国土地理院API(標高取得)のURL
    http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon={軽度}&lat={緯度}&outtype=JSON

緯度:36.103543 軽度:140.08531 の例

返ってくる値

返ってきたJSONデータ
    {"elevation":25.3,"hsrc":"5m\uff08\u30ec\u30fc\u30b6\uff09"}

取得したJSONデータをパースする

    var jsonAltitude = JSON.parse(text);
    console.log(jsonAltitude.elevation);

パースしたデータをポップアップで表示

//ポップアップ表示
      alert("現在地の標高は" + jsonAltitude.elevation + "mです。" +  "(" + "緯度:" + stringLat + "、経度:" + stringLon + ")")

ブラウザでの実行結果

適当にhtmlを形成します。
4B86539B-EF2B-4F84-B2BB-C1E0522603E8_4_5005_c.jpeg

「標高を取得」ボタンをクリックします。
5570D4D7-915C-49EC-AC95-0E6F17405C8C_4_5005_c.jpeg
できました。

全てのコード

fetchAltitude.js
//GeolocationAPが利用できるか確認
if (navigator.geolocation) {
  test()
} else {
  alert("現在地を取得できませんでした。")
}


function test() {
    navigator.geolocation.getCurrentPosition(test2);
}

function test2(position) {

    //まず現在地の緯度経度を取得する
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    //国土地理院API用に有効桁数を合わせる。
    var adjustiveLat = lat + "00";
    var adjustiveLon = lon + "0";

    //文字列に変換
    var stringLat = String(adjustiveLat);
    var stringLon = String(adjustiveLon);

    //国土地理院APIに現在地の緯度経度を渡して、標高を取得する
    const url = 'http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + stringLon + '&lat=' + stringLat + '&outtype=JSON';

    console.log(url);

    fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      console.log(text);
      
      //取得したjsonをパース
      var jsonAltitude = JSON.parse(text);
      console.log("標高:" + jsonAltitude.elevation + "m");

      //ポップアップ表示
      alert("現在地の標高は" + jsonAltitude.elevation + "mです。" +  "(" + "緯度:" + stringLat + "、経度:" + stringLon + ")")

    });

}
0
0
0

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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?