（お知らせ）このページはブラウザから位置情報を取得する機能を埋め込んでいます。
ブラウザからポップアップで位置情報の取得を許可するかどうかの選択が表示されますが、閲覧のみの方は許可いただく必要はありません。
昔はその機種に合わせて記述をする必要があったのですが、Geolocation APIがブラウザに搭載されたのでコーディングが楽になりました。
Geolocation APIは、GPSを使わなくても無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得できるHTML5の機能です。
Geolocation APIをサポートしているブラウザであればデバイスに関係なくjavascriptで位置情報を取得できるので、非常に便利になりました。
Geolocation APIの２つの機能
Geolocation APIは、現在以下のAPIが定義されています。
現在値の取得
navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)
位置変更時に位置情報を取得
監視を開始します。
navigator.geolocation.watchPosition( successCallback , errorCallback , option)
監視を停止します。
navigator.geolocation.clearWatch( watchId)
Geolocaiton APIを使ったサンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Geolocation Sample</title>
</head>
<body>
<script type="text/javascript">
if (navigator.geolocation) {
// 現在の位置情報取得を実施
navigator.geolocation.getCurrentPosition(
// 位置情報取得成功時
function (position) {
var location ="<li>"+"Latitude：" +
position.coords.latitude + "</li>"; //緯度
location += "<li>"+"longitude：" +
position.coords.longitude + "</li>"; //経度
location += "<li>"+"altitude：" +
position.coords.altitude + " m</li>"; //高度
location += "<li>"+"accuracy：" +
position.coords.accuracy + " m</li>"; //緯度・経度の誤差
location += "<li>"+"altitudeAccuracy：" +
position.coords.altitudeAccuracy + " m</li>"; //高度の誤差
location += "<li>"+"heading：" +
position.coords.heading + "</li>"; //方向 0-360
location += "<li>"+"speed：" + position.coords.speed
+ " m/sec</li>"; //速度
document.getElementById("location").innerHTML =
location;
},
// 位置情報取得失敗時
function (error) {
switch(error.code)
{
case 1:
var location =
"<li>位置情報の利用が許可されていません</li>";
break;
case 2:
var location =
"<li>デバイスの位置が判定できませんでした</li>";
break;
case 3:
var location =
"<li>タイムアウトが発生しました</li>";
break;
}
document.getElementById("location").innerHTML =
location;
});
} else {
window.alert("<li>Geolocation APIが搭載されていないブラウザです。</li>");
}
</script>
<ul id="location"></ul>
</body>
</html>
上記のサンプルコードを実行した結果はこのようになります。
実際にこのページにスクリプトを埋め込んでみた
以下に上記のスクリプトを埋め込んでいます。
位置情報が取得できたでしょうか？
------------------ここに実行結果が表示されます。----------------
