Geolocation API
について
今更感はありますが•••
geoLocationAPI とは
Geolocation 対応ブラウザ
• Internet Explorer v9.0
• Firefox v3.5以降
• Google Chrome v5.0以降
• Safari v5.0以降
• Opera v10.60以降
• iPhone safari
• Androidブラウザ
３つあります。
①現在の位置情報を取得
②位置を定期的に取得する
③定期的な位置情報取得を止める
navigator.geolocation.getCurrentPosition(成功時のコールバック関数, 失敗時のコールバック関数, オプション);
navigator.geolocation.watchPosition(成功時のコールバック関数, 失敗時のコールバック関数, オプション);
navigator.geolocation.clearWatch(watchId)
latitude 緯度
longitude 経度
altitude 高度
accuracy 緯度、経度の精度
altitudeAccuracy 高度の精度
heading 方角
speed 速度
PERMISSION_DENIED エンド・ユーザーが、Geolocation APIの仕様を許可しない場合に発生
POSITION_UNAVAILABLE 現在位置を特定できない場合に発生
TIMEOUT 指定されたタイムアウト時間内に現在位置を特定できない場合に発生
成功時のコールバック
失敗時のコールバック
enableHightAccuracy より高い正確性を求める。スマフォではGPSを利用する。
timeout タイムアウトまでの時間を指定
maximumAge 位置情報の有効期限を指定（キャッシュの位置情報を使用期限）
オプション
position.coords 緯度経度などを保持するオブジェクト。 position.timestamp 位置情報を取得した時刻。
error.code エラーコード error.message エラーメッセージ
①現在の位置情報を取得
<script type="text/javascript"> if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition( function (position) {
var lat = position.coords.latitude ; var lon = position.coords.longitude; },
function (error) { var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "位置情報取得の使用許可がされませんでした。"; break;
case error.POSITION_UNAVAILABLE:
message = "位置情報の取得ができませんでした。"; break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "位置情報取得中にタイムアウトしました。"; break;
}
window.alert(message); }
); } else {
window.alert("Geolocation使用不可。"); }
Geolocation が使用できるか？
成功時
失敗時
②③位置情報を監視
<script type="text/javascript"> var watchID;
if (navigator.geolocation) {
watchID = navigator.geolocation.watchPosition( function (position) {
var lon = position.coords.latitude ; var lat = position.coords.longitude ; },
null,
{ enableHighAccuracy: true } );
} else {
window.alert("Geolocationが使えません"); }
function clearWatchPosition() {
navigator.geolocation.clearWatch(watchID); }
</script>
<ul id="location">
</ul>
<input type="button" value="停止" onclick="clearWatchPosition()" />
googlemap に表示
var showMap = function(position) {
var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = {
zoom:13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("geo"), options); var marker = new google.maps.Marker(
map: map,
position: center });
}
