位置情報(緯度経度)を取得

ボタンをクリックしてブラウザで位置情報を許可してください
当サイトのサーバにこれらのデータが送られることはありません
緯度経度...
住所...

  view source
  JavaScript
  document.getElementById('button').onclick = function() {
  navigator.geolocation.getCurrentPosition(getPos);
};

//JavaScriptで緯度経度の数値データを取得
function getPos(position) {
  var geo_text = '';
  var y = position.coords.latitude;
  var x = position.coords.longitude;
  geo_text += '緯度:'     + y + '\n';
  geo_text += '経度:'     + x + '\n';
  geo_text += '高度:'     + position.coords.altitude + '\n';
  geo_text += '位置精度:' + position.coords.accuracy + '\n';
  geo_text += '高度精度:' + position.coords.altitudeAccuracy  + '\n';
  geo_text += '移動方向:' + position.coords.heading + '\n';
  geo_text += '速度:'     + position.coords.speed + '\n';

  var date = new Date(position.timestamp);
  geo_text += '取得時刻:' + date.toLocaleString() + '\n';


  var element = document.getElementById('textarea');
  element.value = geo_text;
  getAddress(x,y);
}


//https://geoapi.heartrails.com/api.html
//外部APIで緯度経度から住所取得
function getAddress(x,y){
  var request = new XMLHttpRequest();
  var api = 'https://geoapi.heartrails.com/api/json?';
  request.onreadystatechange = checkStatus;
  request.open('GET', api+'method=searchByGeoLocation&postal=2520816&jsonp=callbackf&x='+x+'&y='+y, true);
  request.send(null);
  function checkStatus(){
   if (request.readyState == 4 && request.status == 200) {
    var element = document.getElementById('textarea2');
    console.log(request.responseText);
    element.value = unicodeUnescape(request.responseText);
    }
  }
}

//Unicode（¥uxxx形式）を文字列へアンエスケープ
var unicodeUnescape = function(str) {
	var result = '', strs = str.match(/\\u.{4}/ig);
	if (!strs) return '';
	for (var i = 0, len = strs.length; i < len; i++) {
		result += String.fromCharCode(strs[i].replace('\\u', '0x'));
	}
	return result;
}


  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-geolocation/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。