ブラウザ上で現在地の標高を知りたい。
すでに標高を知ることができるアプリなどもありますが、オリジナルアプリ作成で
標高データ取得が必要なので調べました。
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 + ")")
ブラウザでの実行結果
全てのコード
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 + ")")
});
}