現在の標高を表示するサンプル_技術三昧ブログ

ホーム » ブログ » 現在の標高を表示するサンプル

@2018/08/03

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>get lat-lon use Geolocation</title>
</head>
<body>
<style>
.Location {
border: 1px solid blue;
}
.Gsi-iframe-wrap {
width:100%;
height:calc(100vh - 200px);
}
.Gsi-iframe {
width:100%;
height:100%;
boder: 0;
}
.gsi_centercross {
color: red;
}
</style>
<script type="text/javascript">
if (navigator.geolocation) {
// 現在の位置情報取得を実施
navigator.geolocation.getCurrentPosition(
// 位置情報取得成功時
function (pos) {
var location ="<li>"+"緯度：" + pos.coords.latitude + "</li>";
location += "<li>"+"経度：" + pos.coords.longitude + "</li>";
document.getElementById("location").innerHTML = location;

//地図を表示
//displayMap('gsi-iframe',pos.coords.latitude,pos.coords.longitude);
displayMap('gsi-iframe',35.733310,139.882135);//TODO テスト
},
// 位置情報取得失敗時
function (pos) {
var location ="<li>位置情報が取得できませんでした。</li>";
document.getElementById("location").innerHTML = location;

});
} else {
window.alert("本ブラウザではGeolocationが使えません");

}

/*
* 国土地理院のGSI標高MAPを指定したIDに入れて表示する
* @parame id：指定した要素ID
* @parame lat,lon：経緯度
*/
function displayMap(id,lat,lon) {
var gisUrl = 'http://maps.gsi.go.jp/';
var scale = 14;//拡大率
var opts = '&base=std&ls=std&disp=1&vs=c1j0h0k0l0u0t0z0r0s0f1';
var iframeSrc = gisUrl + '#' + scale + '/' + lat + '/' + lon + '/' + opts ;
document.getElementById(id).src = iframeSrc;
}
</script>
<ul id="location" class="Location">
</ul>

<div class="Gsi-iframe-wrap" style="">
<iframe id="gsi-iframe" class="Gsi-iframe"/>
</div>
</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/292.html

閉じる

現在の標高を表示するサンプル_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！