ごく普通の在日

Webブラウザーから位置情報を取得する - HTML5 - navigator.geolocation

navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition
navigator.geolocation.clearWatch
などでWebブラウザーから位置情報取得を検証したことをメモ的に簡単に書いておく
検証したのはパソコンのWebブラウザーから使用するのとスマートフォン(Android,iPhone)のブラウザーから使用するとき

Geolocationの利用について詳しくはこちら
https://developer.mozilla.org/ja/Using_geolocation

- geolocationオブジェクトについて
現在位置の取得: navigator.geolocation.getCurrentPosition(成功したときの関数、失敗したときの関数)
コールバック関数が一度きりGeopositionを返してくれる。

現在位置の監視: navigator.geolocation.watchPosition(成功したときの関数、失敗したときの関数)
コールバック関数が繰り返しでGeopositionを返してくれる。ただし失敗した時点から結果を開けしてくれない可能性もある

位置監視を終了: navigator.geolocation.clearWatch(watchPositionの戻り値)
watchPositionと一緒に使って置監視を終了する(ずっと監視しつづけるとスマホ端末なんかでは電池が減ってしまうよ!)

- まずはブラウザーが対応しているかどうかを判断してみる
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    alert('Browser not supported!!!');
}
function success(position){
    console.log(position);
}
function error(err){
    console.log(err);
}

- 一定の条件で現在位置を監視してみる
サンプルソース
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Geolocation</title>
    
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var naviLocation;
    var startTime;
    var monitor = $('#monitor');
    function currPositionSuccess(position){
        console.log(position);
    }
    function watchPositionSuccess(position){
        console.log(position);
        var show = $('<div />');
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var acc = position.coords.accuracy;
        var currentTime = new Date();
        var watchTime = currentTime - startTime;
        show.text('lat:'+lat+', lon:'+lon+', acc:'+acc+', watchTime:'+watchTime);
        monitor.append(show);
        //accuracyが50以下、または監視時間が10秒超えたらやめる
        if (acc < 50 || watchTime > 10000) {
            getClearWatch();
        }
    }
    function error(err){
        console.log(err);
        console.log('error:' + err.message);
    }

    //現在位置の取得
    function getCurrPosition(){
        console.log('getCurrentPosition');
        naviLocation = navigator.geolocation.getCurrentPosition(currPositionSuccess, error);
    }

    //現在位置の監視
    function getWatchPosition(){
        console.log('watchPosition');
        startTime = new Date();
        naviLocation = navigator.geolocation.watchPosition(watchPositionSuccess, error);
    }

    //位置監視を終了
    function getClearWatch(){
        console.log('clearWatch');
        navigator.geolocation.clearWatch(naviLocation);
    }

    $('#current-position').click(function(){
        getCurrPosition();
    });
    $('#watch-position').click(function(){
        getWatchPosition();
    });
    $('#clear-watch').click(function(){
        getClearWatch();
    });
});
</script>
</head>
<body>
<button id="current-position"> getCurrentPosition </button> 
<button id="watch-position"> watchPosition </button> 
<button id="clear-watch"> clearWatch </button>
<br />
<div id="monitor">
</div>
</body>
</html>

navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition
navigator.geolocation.clearWatch
などでWebブラウザーから位置情報取得を検証したことをメモ的に簡単に書いておく
検証したのはパソコンのWebブラウザーから使用するのとスマートフォン(Android,iPhone)のブラウザーから使用するとき

Geolocationの利用について詳しくはこちら
https://developer.mozilla.org/ja/Using_geolocation

- geolocationオブジェクトについて
現在位置の取得: navigator.geolocation.getCurrentPosition(成功したときの関数、失敗したときの関数)
コールバック関数が一度きりGeopositionを返してくれる。

現在位置の監視: navigator.geolocation.watchPosition(成功したときの関数、失敗したときの関数)
コールバック関数が繰り返しでGeopositionを返してくれる。ただし失敗した時点から結果を開けしてくれない可能性もある

位置監視を終了: navigator.geolocation.clearWatch(watchPositionの戻り値)
watchPositionと一緒に使って置監視を終了する(ずっと監視しつづけるとスマホ端末なんかでは電池が減ってしまうよ!)

- まずはブラウザーが対応しているかどうかを判断してみる
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    alert('Browser not supported!!!');
}
function success(position){
    console.log(position);
}
function error(err){
    console.log(err);
}

- 一定の条件で現在位置を監視してみる
サンプルソース
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test Geolocation</title>
    
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var naviLocation;
    var startTime;
    var monitor = $('#monitor');
    function currPositionSuccess(position){
        console.log(position);
    }
    function watchPositionSuccess(position){
        console.log(position);
        var show = $('<div />');
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        var acc = position.coords.accuracy;
        var currentTime = new Date();
        var watchTime = currentTime - startTime;
        show.text('lat:'+lat+', lon:'+lon+', acc:'+acc+', watchTime:'+watchTime);
        monitor.append(show);
        //accuracyが50以下、または監視時間が10秒超えたらやめる
        if (acc < 50 || watchTime > 10000) {
            getClearWatch();
        }
    }
    function error(err){
        console.log(err);
        console.log('error:' + err.message);
    }

    //現在位置の取得
    function getCurrPosition(){
        console.log('getCurrentPosition');
        naviLocation = navigator.geolocation.getCurrentPosition(currPositionSuccess, error);
    }

    //現在位置の監視
    function getWatchPosition(){
        console.log('watchPosition');
        startTime = new Date();
        naviLocation = navigator.geolocation.watchPosition(watchPositionSuccess, error);
    }

    //位置監視を終了
    function getClearWatch(){
        console.log('clearWatch');
        navigator.geolocation.clearWatch(naviLocation);
    }

    $('#current-position').click(function(){
        getCurrPosition();
    });
    $('#watch-position').click(function(){
        getWatchPosition();
    });
    $('#clear-watch').click(function(){
        getClearWatch();
    });
});
</script>
</head>
<body>
<button id="current-position"> getCurrentPosition </button> 
<button id="watch-position"> watchPosition </button> 
<button id="clear-watch"> clearWatch </button>
<br />
<div id="monitor">
</div>
</body>
</html>