<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>7-01_geolocation</title>
<link rel="shortcut icon" href="../../_common/images/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
<link href="../../_common/css/style.css" rel="stylesheet">
<style>
main section {
text-align: center;
}
.position {
font-size: 1.5rem;
color: #ed8a29;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>あなたはいまどこ？</h1>
<h2>位置情報をページに表示する</h2>
</div><!-- /.container -->
</header>
<main>
<div class="container">
<section>
<p>あなたはいま</p>
<p id="loc" class="position"></p>
<p>の場所にいます。ちなみに精度は半径 <span id="accuracy" class="position"></span> mです。</p>
</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
<p>JavaScript Samples</p>
</div><!-- /.container -->
</footer>
<script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
<script>
'use strict';
function success(pos) {
const lat = pos.coords.latitude;
const lng = pos.coords.longitude;
const accuracy = pos.coords.accuracy;
$('#loc').text(`緯度：${lat} 経度：${lng}`);
$('#accuracy').text(accuracy);
}
function fail(error) {
alert('位置情報の取得に失敗しました。エラーコード：' + error.code);
}
navigator.geolocation.getCurrentPosition(success, fail);
</script>
</body>
</html>
KAOKA Daisuke