HTML5 地理位置情報

HTML5 地理位置情報

HTML5 地理位置情報は、ユーザーの位置を特定するために使用されます。

ユーザーの位置を特定する

HTML5 Geolocation API は、ユーザーの地理的位置を取得するために使用されます。

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は取得できません。

ブラウザのサポート

Internet Explorer 9以降、Firefox、Chrome、Safari、Operaのサポート地理位置情報。

注: 地理位置情報 (地理位置情報) GPS を搭載したデバイスの場合iPhone など、位置情報はより正確です。

HTML5 - 地理位置情報の使用

ユーザーの位置を取得するには getCurrentPosition() メソッドを使用してください。

次の例は、ユーザーの位置の経度と緯度を返す単純な地理位置情報の例です:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        x.innerHTML="纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
    }
</script>
</body>
</html>

プログラムを実行して試してください

分析例:

地理位置情報がサポートされているかどうかを検出します

サポートされている場合は、 getCurrentPosition() メソッドを実行します。サポートされていない場合は、ユーザーにメッセージが表示されます。

getCurrentPosition() が正常に実行されると、パラメータ showPosition で指定された関数に座標オブジェクトが返されます

showPosition() 関数は、経度と緯度を取得して表示します

上記の例は、エラー処理のない非常に基本的な地理位置情報スクリプトです。

エラーと拒否の処理

getCurrentPosition() メソッドの 2 番目のパラメーターは、エラーを処理するために使用されます。ユーザーの位置情報の取得に失敗したときに実行する関数を指定します:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="Geolocation is not supported by this browser.";}
    }
    function showPosition(position)
    {
        x.innerHTML="纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude;
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
</body>
</html>

プログラムを実行して試してください

エラーコード:

権限が拒否されました - ユーザーは位置情報を取得できません

位置が利用できません - 取得できません現在の場所

タイムアウト - 操作がタイムアウトしました

結果を地図に表示

結果を地図に表示するには、Google マップや Baidu マップなどの緯度と経度を使用できる地図サービスにアクセスする必要があります。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        var latlon=position.coords.latitude+","+position.coords.longitude;
        var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
                +latlon+"&zoom=14&size=400x300&sensor=false";
        document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
</body>
</html>

プログラムを実行して試してみてください

上の例では、返された緯度と経度のデータを使用して、Google マップに位置を表示します (静止画像を使用)。

例

方法 Google マップスクリプトを使用して、マーカー、ズーム、ドラッグオプションを備えたインタラクティブな地図を表示する方法。

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
    var x=document.getElementById("demo");
    function getLocation()
    {
        if (navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
        else{x.innerHTML="该浏览器不支持获取地理位置。";}
    }
    function showPosition(position)
    {
        lat=position.coords.latitude;
        lon=position.coords.longitude;
        latlon=new google.maps.LatLng(lat, lon)
        mapholder=document.getElementById('mapholder')
        mapholder.style.height='250px';
        mapholder.style.width='500px';
        var myOptions={
            center:latlon,zoom:14,
            mapTypeId:google.maps.MapTypeId.ROADMAP,
            mapTypeControl:false,
            navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
        };
        var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
        var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
    }
    function showError(error)
    {
        switch(error.code)
        {
            case error.PERMISSION_DENIED:
                x.innerHTML="用户拒绝对获取地理位置的请求。"
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML="位置信息是不可用的。"
                break;
            case error.TIMEOUT:
                x.innerHTML="请求用户地理位置超时。"
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML="未知错误。"
                break;
        }
    }
</script>
</body>
</html>

プログラムを実行して試してみましょう

特定の場所の情報

このページでは、地図上にユーザーの場所を表示する方法を説明します。ただし、地理位置情報は、特定の場所に関する情報としても役立ちます。

例:

地域情報を更新する
ユーザーの周囲の興味のある場所を表示する
インタラクティブカーナビゲーションシステム (GPS)

getCurrentPosition() メソッド - データを返す

成功した場合、getCurrentPosition() メソッドはオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。利用可能な場合は、次の他のプロパティが返されます。

プロパティ	説明
coords.latitude	数値としての10進数の緯度
coords.longitude	10進数としての経度
coords.accuracy	位置精度
coords.altitude	高度、海抜メートル単位

coords.altitudeAccuracy	位置の高度精度
coords.Heading	方向、真北からの度数
coords.speed	速度、メートル/秒
タイムスタンプ	応答の日時

Geolocation オブジェクト

watchPosition() - ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます (車の GPS と同じです) ）。

clearWatch() - watchPosition() メソッドを停止します

次の例は、watchPosition() メソッドを示しています。この例をテストするには、正確な GPS デバイス (iPhone など) が必要です:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude;
  }
</script>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p> <button onclick="getLocation()">点我</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="该浏览器不支持获取地理位置。";} } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </script> </body> </html>

提出するリセットコード

自動運転