html5のGeolocation機能で現在地の経度情報を取得_技術三昧ブログ

ホーム » ブログ » html5のGeolocation機能で現在地の経度情報を取得

@2018/08/02

近いうちに筆者運営しているサイトに「スマホで現在地の経緯度や標高」測れる機能を追加したいと考えている。
本日の技術調査で「html5のGeolocation機能で現在地の経度情報を取得」をここでメモする。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation Sample</title>
</head>
<body>
<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;
        },
        // 位置情報取得失敗時
        function (pos) { 
                var location ="<li>位置情報が取得できませんでした。</li>";
                document.getElementById("location").innerHTML = location;
        });
    } else {
        window.alert("本ブラウザではGeolocationが使えません");
    }
</script>
    <ul id="location">
    </ul>
</body>
</html>

上記のコードで現地の経緯度を取得してから、国土地理院が提供しているAPIで標高を取得し、表示する。
https://maps.gsi.go.jp/development/api.html

以上、メモする。

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

0人

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

閲覧履歴(直近10件)

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

閉じる

html5のGeolocation機能で現在地の経度情報を取得_ブログ_zanmai.net

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