<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>現在位置を表示-1</title>
<script>
// getCurrentPosition で位置情報を取得
function getCurrentPosi() {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
}; // -----------
// getCurrentPosition で現在の位置情報を取得
function successCallback(position) {
var gl_text = "緯度：" + position.coords.latitude + "度<br>";
gl_text += "経度：" + position.coords.longitude + "度<br>";
gl_text += "高度：" + position.coords.altitude + "<br>";
gl_text += "位置の誤差：" + position.coords.accuracy + "m<br>";
gl_text += "高度の誤差：" + position.coords.altitudeAccuracy + "<br>";
gl_text += "方角：" + position.coords.heading + "<br>";
gl_text += "速度：" + position.coords.speed + "<br>";
document.getElementById("show_result").innerHTML = gl_text;
}; // -----------
// 位置情報が取得できない場合
function errorCallback(error) {
var err_msg = "";
switch(error.code){
case 1:
err_msg = "位置情報の利用が許可されていません";
break;
case 2:
err_msg = "デバイスの位置が判定できません";
break;
case 3:
err_msg = "タイムアウトしました";
break;
}
document.getElementById("show_result").innerHTML = err_msg;
}; // -----------
</script>
</head>
<body>
<div class="view" style="padding:15px;">
<input type="button" value="現在地を確認" onclick="getCurrentPosi()"><br><br>
<div id="show_result"> ↑ クリックで、ここに位置情報を表示</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>現在位置を表示-2</title>
<script>
var watch_id = 0; // 監視識別ID
function getPosi2() {
var button2 = document.getElementById('button2');
if( watch_id > 0 ) {
// リアルタイム監視を停止
window.navigator.geolocation.clearWatch(watch_id);
// 監視識別IDに0をセット
watch_id = 0;
// ボタン表記を変更
button2.textContent = " 現在地を確認 ";
} else {
// リアルタイム監視を開始
watch_id = window.navigator.geolocation.watchPosition(monitor);
// ボタン表記を変更
button2.textContent = " 測定停止 ";
}
};// ----------------
// watchPosition 位置情報取得完了時の処理
function monitor(event) {
var gl_text2 = "緯度：" + event.coords.latitude + "度<br>";
gl_text2 += "経度：" + event.coords.longitude + "度<br>";
gl_text2 += "高度：" + event.coords.altitude + "m<br>";
gl_text2 += "位置の誤差：" + event.coords.accuracy + "m<br>";
gl_text2 += "高度の誤差：" + event.coords.altitudeAccuracy + "<br>";
gl_text2 += "方角：" + event.coords.heading + "<br>";
gl_text2 += "速度：" + event.coords.speed + "<br>";
// タイムスタンプ
var date = event.timestamp;
if( typeof(date) == "number" ) { date = new Date(date); }
gl_text2 += "時刻：" + date + "<br>";
document.getElementById("show_result2").innerHTML = gl_text2;
};// -----------------
</script>
</head>
<body>
<div class="view" style="padding:15px;">
<button id="button2" onclick="getPosi2()">現在地を確認</button><br><br>
<div id="show_result2"> ↑ クリックで、ここに位置情報を表示・停止</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>現在位置を表示</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
<script>
var mapobj; var marktxt;
var mymark; var watchTime;
var minInterval = 5000; // 情報取得の最少間隔（単位 msec）
var map_id=0; var Pset = []; var setPs = [];
var watch_id = 0; // 監視識別ID
function getPosi2() {
var button = document.getElementById('button2');
if( watch_id>0 ){
// リアルタイム監視を停止
window.navigator.geolocation.clearWatch(watch_id);
watch_id = 0; // 監視識別IDに0をセット
button.textContent = "測定開始"; // ボタン表記を変更
} else {
var p_options = { // リアルタイム監視を開始
enableHighAccuracy: true, // 高精度を要求する
timeout: 50000, // 最大待ち時間（ミリ秒）
maximumAge: 0 // キャッシュ有効期間（ミリ秒）
};
watch_id = window.navigator.geolocation.watchPosition(monitor,error,p_options);
// ボタン表記を変更
button.textContent = "測定停止";
}
}; // getPosi2() ---------------
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
}; // error(err) ---------------
// リアルタイム監視
function monitor(event){
if(event.coords.accuracy>1000){return};
if( ( new Date().getTime()- watchTime )<minInterval ){return};
watchTime = new Date().getTime();
var latitude = event.coords.latitude; // 緯度
var longitude = event.coords.longitude; // 経度
document.querySelector('#accu').textContent = event.coords.accuracy.toFixed(0);
var Pset = new L.LatLng(latitude,longitude);
marktxt = latitude.toFixed(6)+ ', '+ longitude.toFixed(6);
marker= L.marker(Pset).addTo(mapobj).bindPopup(marktxt).openPopup();
mapobj.setView(Pset); //中心移動
}; // monitor(event) -----------------
function drawMark( Pset ){
marker= L.marker(Pset).addTo(mapobj).bindPopup(marktxt).openPopup();
}; // drawMark( setP ) ------------------
function init() {
mapobj = L.map('mapDiv', { zoomControl:true });
mapobj.setView([35.360631,138.727307], 13); //図中心 富士山
L.control.scale({maxWidth:200,position:'bottomleft',imperial:false}).addTo(mapobj); // 右下にスケールを表示
var gsiattr = "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>";
var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: gsiattr });
var gsiphot = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { attribution: gsiattr });
var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{ attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
var baseMaps = {
"地理院地図": gsi,
"地理院写真": gsiphot,
"O.S.Map": osm
};
L.control.layers(baseMaps).addTo(mapobj);
gsi.addTo(mapobj);
}; // init() -------------------
</script>
<style>
html, body{ height:100%; margin:0; padding:0; }
#mapDiv {position:absolute;top:34px;left:3px;right:3px;bottom:3px;}
</style>
</head>
<body onload="init()">
<div style="text-align:center;" >
<span style="font-size:24px;"> 現在地を確認する </span>
<button id="button2" onclick="getPosi2()">測定開始</button>
精度: <span id="accu">__</span>m
</div>
<div id="mapDiv">ここに地図を表示</div>
</body>
</html>