HTML5의 Geolocation API 사용 방법에 대한 자세한 설명

Geolocation은 HTML5의 중요한 기능 중 하나입니다. 이 기능을 사용하면 위치 정보를 기반으로 하는 애플리케이션을 개발할 수 있습니다. HTML5 Geolocation API 사용법 튜토리얼

오늘날 휴대용 기기가 널리 보급된 오늘날, 택시 호출 애플리케이션은 사용자의 위치 정보를 사용할 수 있으며, 근처 차량에 전화를 걸고, 단체 구매를 할 수 있습니다. 소프트웨어는 현재 위치를 기반으로 주변 극장과 맛집을 추천할 수 있고, 지도 애플리케이션은 사용자의 위치를 ​​기반으로 목적지까지의 빠른 경로를 계획할 수 있다. 모바일 애플리케이션에서는 위치 정보가 필수라고 할 수 있다. 없어진.
이러한 추세를 따르기 위해 HTML5는 웹 애플리케이션에서 위의 기능을 쉽게 구현할 수 있는 Geolocation 라이브러리를 제공합니다. 그래서 오늘은 이 라이브러리의 활용법을 소개해 드리겠습니다.

기본 사용법
우선, geolocation 속성 을 통해 브라우저의 navigator 객체 에서 Geolocation 인스턴스를 얻을 수 있습니다. 아래 그림에 나와 있습니다.

그림에서 Geolocation 클래스에는 일반적으로 사용되는 세 가지 메서드가 있음을 알 수 있습니다.

1.getCurrent Position: 현재 위치 정보를 얻기 위해 사용
2.watchPosition: 위치 변경 시 실시간으로 위치 정보를 모니터링하기 위해 사용
3.clear 보기: 지금 취소 모니터링 작업 실행
먼저 getCurrentPosition 메서드를 살펴보겠습니다. 다음은 해당 함수 서명입니다.

navigator.geolocation.getCurrentPosition(success[, error[, options]]);

1. 첫 번째 매개 변수는 다음과 같습니다. 성공을 지정하는 데 사용됩니다. 최종 처리 함수인 두 번째 매개변수는 오류 처리 함수를 지정하는 데 사용되고, 세 번째 매개변수는 함수에 일부 선택적 구성 항목을 제공하는 데 사용됩니다. 이제 이 함수를 호출해 보겠습니다.

JavaScript Code复制内容到剪贴板
navigator.geolocation.getCurrentPosition(function(position) {   
    //success handler code goes here   
    console.log(position);   
}, function(error) {   
    //error handler code goes here   
    console.log(error);   
}, {//options   
    enableHighAccuracy: true,   
    timeout: 5000,   
    maximumAge: 0   
});

• 
  

이 코드가 실행되면 브라우저 창에 확인 상자가 나타나 위치 위치에 대한 사용자 인증을 요청합니다.

모두ow를 클릭하면 사이트가 위치 위치 확인을 수행할 수 있도록 합니다. 이 함수는 장치에서 위치 정보를 얻기 시작하고 성공적인 콜백 함수를 트리거하며 위치 정보 개체를 위 코드에서 제어합니다. 위치는 콘솔에 인쇄되며 콘솔 정보는 다음과 같습니다.

보시다시피 위치는 실제로 coord를 포함하는 Geoposition 개체의 인스턴스입니다. 🎜> 및 타임스탬프 속성 중 후자는 타임스탬프 로, 위치를 획득한 시간을 기록합니다.

accuracy: 位置的精确度范围，单位为米
altitude: 海拔高度，单位为米，如果设备不支持高度感应，则该属性为null
altitudeAccuracy: 海拔精确度范围，单位为米，如果设备不支持高度感应，则该属性为null
speed: 设备移动的速度，单位为米/秒，如果设备不能提供速度信息，该属性为null
heading: 当前移动的方向，以数字表示，单位为角度，以顺时针[0, 360)度表示偏离正北方的角度，0表示正北方向，90度表示正东方向，180度表示正南方向，270表示正西方向；需要注意的是，如果speed为0，则heading会是NaN，如果设备不能提供方向信息，则该属性为null
longitude: 经度信息
latitude: 纬度信息
我们在成功的回调函数中接收到这些信息，可以根据实际的设备和应用场景获取相应的信息，做进一步的操作。
回到刚才的确认框，如果我们点击了Block阻止该站点获取当前的位置信息，代码就会授权失败，相应地，失败的回调函数就会被触发，error错误对象也会被传入回调函数，我们的打印信息如下：

可以看到error参数是一个PositionError实例，包含一个错误码code和message，分别表示错误的类型和错误提示消息，其中错误码有以下几种：

1: PERMISSION_DENIED - 用户拒绝了授权请求，授权失败
2: POSITION_UNAVAILABLE - 因为一些内部错误，导致位置获取失败
3: TIMEOUT - 超时，超过了配置的超时时间后还未获取到位置信息
上面就是失败的回调函数，一般获取位置出现错误时，我们都要及时捕获，并做相应的处理操作，以获取好的用户体验，这一点很重要。
在上面的调用中，我们还传入了第三个参数，一个简单的对象，里面包含了几个配置信息，它们都是用来配置函数运行参数的：

enableHighAccuracy: 默认值为false，如果指定为true，则表示在设备支持的情况下，尽可能获取高精准度的数据，但这会在时间和电量方面存在一定的消耗
timeout: 用于指定一个超时时间，单位为毫秒，表示在超时后停止位置获取的操作，默认值是Infinity，表示直到获取到数据后才停止该操作的进行
maximumAge: 用于指定一个缓存位置信息的最长时间，在这个时间段内，获取位置时会从缓存中取，单位为毫秒，默认值为0，表示不使用缓存，每次都取新的数据
上面是关于getCurrentPosition方法的介绍，在某些场景下，例如路线导航应用，我们需要实时地获取最新位置，进而为用户规划最新的路线，这时，上面的方法已经不能很好的满足需求了，我们需要使用watchPosition方法：

watchId = navigator.geolocation.watchPosition(success[, error[, options]]);

watchPosition方法的使用方式和getCurrentPosition类似，不同的是，success函数会执行多次，一旦获取到最新的位置数据，success函数就会被触发，与之相似地，如果连续获取最新的数据失败时，error函数也会被执行多次。
大家或许会注意到，上面的函数签名中，会返回一个watchId，它标示着当前的watch操作，当我们位置跟踪任务完成后，可以使用clearWatch函数将这个watchId清除即可：

navigator.geolocation.clearWatch(watchId);

上面就是Geolocation的常用的三个API，日常开发中我们可根据实际情况选用合适的方法，进而获取用户的位置信息。
现在大部分浏览器都已支持Geolocation了，可是为了兼容低版本的浏览器，我们需要判断它的支持情况：

if ('geolocation' in navigator) {   
  // getting usr's position   
} else {   
  // tips: your position is not available   
}

最后，我们用一个简单的例子来演示在开发中是如何使用Geolocation的：

var API = {   
    //get recommended data by current longitude and latitude   
    getSurroundingRecommendations: function(longitude, latitude, callback) {   
        //simulate data obtaining from server.   
        setTimeout(function() {   
            var data = [   
                {   
                    //item   
                },   
                {   
                    //item   
                }   
            ];   
            callback(data);   
        }, 500);   
    }   
};   
  
document.addEventListener('DOMContentLoaded', function() {   
    //detect if Geolocation is supported   
    if (!'geolocation' in navigator) {   
        console.log('Geolocation is not supported in your browser');   
        return;   
    }   
  
    var successHandler = function(position) {   
        var coords = position.coords,   
            longitude = coords.longitude,   
            latitude = coords.latitude;   
  
        API.getSurroundingRecommendations(longitude, latitude, function(data) {   
            console.log(data);   
        });   
    },   
    errorHandler = function(error) {   
        console.log(error.code, error.message);   
    },   
    options = {   
        enableHighAccuracy: true,   
        timeout: 5000,   
        maximumAge: 0   
    };   
  
    navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);   
  
}, false);

• 
  

在上面的代码中，首先我们定义一个根据当前位置获取推荐数据的方法，然后在文档加载完成后，开始试图获取当前位置，并调研这个方法，获取模拟的数据，真是开发环境中，可能会进一步利用返回的数据做渲染UI等操作。

网络设备
位置服务用于估计您所在位置的本地网络信息包括：有关可见 WiFi 接入点的信息（包括信号强度）、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。
总的来说，在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高，如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余，但如果是做一个地图应用，那误差还是太大了。不过，如果是移动设备上的 HTML5 应用，可以通过设置 enableHighAcuracy 参数为 true，调用设备的 GPS 定位来获取高精度的地理位置信息。

可选项
事实上，上述getCurrentPosition函数还支持第三个可选的参数，是一个 Option Object，一共有三个选项可以设定：

JavaScript Code复制内容到剪贴板
var options = {     
    enableHighAccuracy: false,     
    timeout: 5000,     
    maximumAge: 60000     
}

• 
  

 
其中timeout是设定地理位置获取的超时时间（单位为毫秒，用户选择允许的时间不计算在内）；而maximumAge表示允许设备从缓存中读取位置，缓存的过期时间，单位是毫秒，设为0来禁用缓存读取。如果返回的是缓存中的时间，会在timestamp中反映出来。
 

위 내용은 HTML5의 Geolocation API 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!