現在位置を取得する方法
ブラウザで現在位置を取得する方法を調べました。
位置情報APIというのがあって、対応しているブラウザであれば使えるようです。
具体的な使い方についてメモしておきます。
次のページがわかりやすかったです。ありがとうございました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<button id="btn_geo">現在位置を取得</button>
</div>
<div id="lonlat"></div>
<script>
// https://zenn.dev/sweflo/articles/8c34c081cb764c
document.getElementById("btn_geo").onclick = function() {
navigator.geolocation.getCurrentPosition(success, error);
};
function success(position) {
const lon = position.coords.longitude;
const lat = position.coords.latitude;
document.getElementById("lonlat").innerHTML = "緯度" + lat + " 経度" + lon;
};
function error(error) {
alert("取得失敗");
};
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<button id="btn_geo">現在位置を取得</button>
</div>
<div id="lonlat"></div>
<script>
// https://zenn.dev/sweflo/articles/8c34c081cb764c
document.getElementById("btn_geo").onclick = function() {
navigator.geolocation.getCurrentPosition(success, error);
};
function success(position) {
const lon = position.coords.longitude;
const lat = position.coords.latitude;
document.getElementById("lonlat").innerHTML = "緯度" + lat + " 経度" + lon;
};
function error(error) {
alert("取得失敗");
};
</script>
</body>
</html>
[ 2022年11月23日 | カテゴリー: デジタル | タグ: geolocation , JavaScript ]
« Macでスリープ時間を変更する方法 | 近くの店が検索できる「Go To Eat Tokyo 検索(テキスト版)」 »
コメントを残す