HTML5의 새로운 기능 모바일 장치 API

모바일 기기에 더 나은 서비스를 제공하기 위해 HTML5에서는 모바일 기기용 API 시리즈를 출시했습니다.

1. Geolocation API

Geolocation인터페이스는 사용자의 지리적 위치를 얻는 데 사용됩니다. 사용되는 방법은 GPS 또는 기타 메커니즘(예: IP 주소, WIFI 핫스팟 등)을 기반으로 합니다.

브라우저가 이 인터페이스를 지원하는지 확인하는 방법은 다음과 같습니다.

if (navigator.geolocation) {    // 支持} else {    //不支持}

1.1 getCurrentPosition 메소드

getCurrentPosition 메소드는 사용자의 지리적 위치를 가져오는 데 사용됩니다. 이를 사용하려면 사용자의 승인이 필요합니다. 브라우저는 사용자에게 현재 페이지에서 지리적 위치를 얻을 수 있는지 묻는 대화 상자를 표시합니다. 콜백 함수는 승인을 허용하는 경우와 승인을 거부하는 경우의 두 가지 상황에서 고려해야 합니다. 사용자가 인증을 거부하면 오류가 발생합니다.

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

위 코드는 현재 주소 위치를 처리하는 두 개의 콜백 함수를 지정합니다.

(1) 승인 동의

사용자가 승인에 동의하면 geoSuccess가 호출됩니다.

function geoSuccess(event) {    var coords = event.coords;
    console.log('latitude: ' + coords.latitude);    //纬度
    console.log('longitude: ' + coords.longitude);    //经度
    console.log('accuracy: ' + coords.accuracy);    //精度
    console.log('altitude: ' + coords.altitude);    //海拔
    console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度（单位：米）
    console.log('heading: ' + coords.heading);    //以360度表示的方向
    console.log('speed: ' + coords.speed);    //每秒的速度（单位：米）}

geoSuccess의 매개변수는 이벤트객체입니다. event.coords 속성 은 사용자의 위치 정보를 포함한 개체를 가리킵니다. 주로 다음 값을 사용합니다.

• coords.latitude: 위도

• coords.longitude: 경도

• coords.accuracy: 정확도

• coords.altitude: 고도

• coords.altitudeAccuracy: 미터 단위의 고도 정확도

• coords.heading: 360도 방향

• coords.speed: 초당 속도 (단위 : 미터)

(2) 인증 거부

사용자가 인증을 거부하면 geoError가 호출됩니다.

function geoError(event) {
    console.log('Error code ' + event.code + '. ' + event.message);
}

geoError의 매개변수도 이벤트 개체입니다. event.code 속성은 오류 유형을 나타내며 다음 네 가지 값을 갖습니다.

• 0: 알 수 없는 오류, 브라우저는 상수<에 해당하는 오류 원인을 묻는 메시지를 표시하지 않습니다. 🎜>event.UNKNOWN_ERROR .

• 1: 사용자가 승인을 거부하며 이는 상수 이벤트와 동일합니다.PERMISSION_DENIED

• 2: 위치가 확보되지 않으며 GPS 또는 기타 위치 확인 메커니즘이 없습니다. 찾을 수 없습니다. 상수 event.POSITION_UNAVAILABLE과 동일합니다.

• 3: 시간 초과, GPS가 지정된 시간 내에 결과를 반환하지 않습니다. 이는 상수 이벤트와 동일합니다.TIMEOUT.

event.message는 오류 메시지입니다.

(3) 위치 지정 동작 설정

getCurrentPosition 메소드는 위치 지정 동작을 설정하기 위한 세 번째 매개변수로 객체를 허용할 수도 있습니다.

var option = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0};

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

이 매개변수 개체에는 세 가지 멤버가 있습니다.

• enableHighAccuracy: true로 설정하면 클라이언트가 더 정확한 위치 정보를 제공해야 하므로 위치 확인 시간이 길어집니다. 시간과 더 큰 전력 소비, 기본 설정은 false입니다.

• timeout: 클라이언트가 응답할 때까지 기다리는 최대 시간(밀리초)입니다. 기본값은 무한대입니다.

• maxinumAge: 클라이언트가

  데이터 캐시에 사용할 수 있는 최대 밀리초 수입니다. 0으로 설정하면 클라이언트는 캐시를 읽지 않고, 무한대로 설정하면 클라이언트는 캐시만 읽습니다.

1.2 watchPosition 메소드와clearWatch 메소드

watchPosition 메소드는 사용자 위치의 지속적인 변화를 모니터링하는 데 사용할 수 있습니다. 사용법은 getCurrentPosition 메소드와 동일합니다.

var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);

콜백 함수는 사용자의 위치가 변경되면 호출됩니다.

모니터링을 취소하고 싶다면 ClearWatch 메소드를 사용하세요.

navigator.geolocation.clearWatch(watchID);

2. 진동 API

진동 인터페이스는 브라우저에서 명령을 실행하여 장치를 진동시키는 데 사용됩니다. 이 작업은 많은 전력을 소모하므로 배터리가 부족할 때 작업을 취소하는 것이 가장 좋습니다.

아래 코드를 사용하여 인터페이스를 사용할 수 있는지 확인하세요. 현재 Android 플랫폼용 최신 버전의 Chrome 및 Firefox에서만 지원됩니다.

navigator.vibrate = navigator.vibrate ||
                               navigator.webkitVibrate ||
                               navigator.mozVibrate ||
                               navigator.msVibrate;if (navigator.vibrate) {    // 支持}

vibrate 메소드는 기기를 진동시킬 수 있으며 해당 매개변수는 진동이 지속되는 밀리초 수입니다.

navigator.vibrate(1000);

위 코드는 기기를 1초 동안 진동시킵니다.

vibrate 메소드는 진동 모드를 나타내는

배열을 매개변수로 사용할 수도 있습니다. 짝수 위치의 어레이 멤버는 진동하는 밀리초 수를 나타내고, 홀수 위치의 어레이 멤버는 대기하는 밀리초 수를 나타냅니다.

navigator.vibrate([500, 300, 500]);

위 코드는 기기가 500밀리초 동안 진동한 다음 300밀리초를 기다린 다음 500밀리초 동안 진동한다는 것을 나타냅니다.

vibrate는 비차단 작업입니다. 즉, 휴대폰이 진동하는 동안

JavaScript 코드는 계속해서 아래쪽으로 실행됩니다. 진동을 중지하려면 vibrate 메서드에 0밀리초를 전달하면 됩니다.

navigator.vibrate(0);

3、亮度调节

当移动设备的亮度传感器，感知外部亮度发生显著变化时，会触发devicelight事件。目前，只有Firefox布署了这个API。

window.addEventListener('devicelight', function(event) {
    console.log(event.value + 'lux');
})

下面代码表示，devicelight事件的回调函数，接受一个事件对象作为参数。该对象的value属性就是亮度值。

这种API的一种应用是，我们可以针对亮度的强弱来改网页背景和文字颜色。

위 내용은 HTML5의 새로운 기능 모바일 장치 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!