HTML5 위치정보

HTML5 Geolocation

HTML5 Geolocation은 사용자의 위치를 찾는 데 사용됩니다.

사용자 위치 찾기

HTML5 Geolocation API는 사용자의 지리적 위치를 얻는 데 사용됩니다.

본 기능은 이용자의 개인정보를 침해할 수 있으므로, 이용자의 동의 없이는 이용자의 위치정보를 이용할 수 없습니다.

브라우저 지원

Internet Explorer 9+, Firefox, Chrome, Safari 및 Opera는 위치정보를 지원합니다.

참고: 위치정보는 iPhone과 같이 GPS가 있는 기기에서만 사용할 수 있습니다. 더 정확합니다.

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() 메서드의 두 번째 매개변수는 오류를 처리하는 데 사용됩니다. 사용자 위치 획득 실패 시 실행할 기능을 지정합니다:

<!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 Maps 또는 Baidu Maps와 같이 위도와 경도를 사용할 수 있는 지도 서비스에 액세스해야 합니다.

<!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() 메소드가 객체를 반환합니다. 위도, 경도 및 정확도 속성은 항상 반환됩니다. 사용 가능한 경우 다른 다음 속성이 반환됩니다.

< td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;"> <🎜>설명<🎜><🎜>< / tr> < td width="193" valign="top" style="word-break: break-all; border-width: 1px; border-style: solid;">고도(해발 미터 단위)< /tr >

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计

속성<🎜><🎜>

coords.latitude

coords.longitude

십진수 경도

좌표 . 정확도

위치 정확도

coords.altitude

coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

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>

제출하다 코드 재설정

자동운전