개시하다

위치 정보를 사용하는 프로그램을 만들고 싶습니다.
응용 프로그램은 브라우저, iOS, 안드로이드를 구상했다.
먼저 브라우저를 시작했습니다.브라우저는 크로스 플랫폼이다.
브라우저의 위치 정보 기능은 JavaScript의 Geolocation이 표준이라고 생각합니다.
기능을 조사해 프레젠테이션 프로그램을 만들었다.

개요

Geolocation 소개

index.html

index.js

GitHub

디테일

Geolocation 소개

다음과 같은 기능이 있습니다.

getCurrentPosition

현재 위치를 한 번 가져옵니다.

watchPosition

현재 위치를 여러 번 가져옵니다.

clearWatch

watchPosition 업데이트를 중지합니다.

이것은 얻으려는 현재 소재지의 정보 일람표다.

latitude

위도

longitude

경도

altitude

높이(m)

accuracy

latitude와longitude의 정밀도(m)

altitudeAccuracy

altitude의 정밀도(m)

heading

장치 이동 방향

정북 0

동90

서270

speed

장치 이동 속도(초당 미터)

자세한 내용은 다음 문서를 참조하십시오.
W3C https://www.w3.org/TR/geolocation-API/
MDN https://developer.mozilla.org/en-US/docs/Web/API/Geolocation

index.html

DEMOA PLAY에서는 jQuery, Bootstrap, Animate CSS가 사용됩니다.해설을 하지 않다.
상기 기능의 시작에 대응하는 세 개의 단추를 만들었습니다.

<button type="button" class="btn btn-outline-primary" id="current">Current</button>
<button type="button" class="btn btn-outline-primary" id="watch">Watch</button>
<button type="button" class="btn btn-outline-primary" id="clear">Clear</button>

기능이 실행되면 현재 위치의 정보에 따라 화면이 업데이트됩니다.

<div>latitude: <span class="latitude"></span></div>
<div>longitude: <span class="longitude"></span></div>
<div>altitude: <span class="altitude"></span></div>
<div>accuracy: <span class="accuracy"></span></div>
<div>altitudeAccuracy: <span class="altitudeAccuracy"></span></div>
<div>heading: <span class="heading"></span></div>
<div>speed: <span class="speed"></span></div>
<div>timestamp: <span class="timestamp"></span></div>

또한 관련 정보는 아래에 표시됩니다.

<div>message: <span class="message"></span></div>

index.js

일반 옵션의 값입니다.
enableHighAcuracy는 높은 정밀도를 지정할 수 있습니다.
하지만 전기 소모는 늘어나고 시간도 걸린다.이 부근은 절충이다.
가짜로 묵인하다.
기본값은 무제한입니다.
maximumAge는 위치 정보의 캐시 정보의 기한입니다.0이면 현금을 사용하지 않습니다.

var options = {
    enableHighAccuracy: true,
    timeout: 10000, // milliseconds
    maximumAge: 0 // 0 = the device cannot use a cached position
};

브라우저에서 Geolocation을 사용할 수 있는지 확인합니다.
최근의 브라우저는 기본적으로 대응하는 것이 있는데 신중하게 보기 위한 주문이다.
확인 후 화면 아래에 정보가 표시됩니다.
또한clear()는 후반부에 설명한다.

function geolocation() {
    clear();
    if (navigator.geolocation) {
        $('.message').html('Geolocation is available').animateCss('flash');
        return true
    } else {
        $('.message').html('Geolocation IS NOT available').animateCss('flash');
        return false
    }
}

getCurrent Position입니다.화면의 현재 단추를 누르면 시작합니다.
먼저 위의 Geolocation()을 통해 브라우저가 지원되는지 확인합니다.
현재 로컬 가져오기가 진행 중입니다. 성공하면 success () 를 실행하고, 실패하면 error () 를 실행합니다.
또한options는 위에서 말한 바와 같다.

$('#current').on('click', function () {
    if (!geolocation()) {
        return
    }
    navigator.geolocation.getCurrentPosition(
        function (pos) {success(pos, 'current')},
        function (err) {error(err)},
        options
    );
});

워치포지션입니다.화면의 Watch 버튼을 클릭한 후 시작합니다.
getcurrentPosition과 대체적으로 같지만, 실행된 반환 값을watchId에 저장합니다.
clearWatch () 는 이watchId를 이용하여 현재 소재지의 취득을 중지합니다.

var watchId = null;
$('#watch').on('click', function () {
    if (!geolocation()) {
        return
    }
    watchId = navigator.geolocation.watchPosition(
        function (pos) {success(pos, 'watch')},
        function (err) {error(err)},
        options
    );
});

get 현재 Position 및 watchPosition을 실행한 후 성공적으로 실행합니다.
화면 정보를 업데이트하는 부분입니다.
watchPosition을 사용할 때 위치 정보를 업데이트할 때마다 실행됩니다.

function success(pos, method) {
    $('.latitude').html(pos.coords.latitude);
    $('.longitude').html(pos.coords.longitude);
    $('.altitude').html(pos.coords.altitude);
    $('.accuracy').html(pos.coords.accuracy);
    $('.altitudeAccuracy').html(pos.coords.altitudeAccuracy);
    $('.heading').html(pos.coords.heading);
    $('.speed').html(pos.coords.speed);
    $('.timestamp').html(pos.timestamp);
    switch(method)
    {
        case 'current':
        $('.message').html('Current OK').animateCss('flash');
        break;
        case 'watch':
        $('.message').html('Watch OK').animateCss('flash');
        break;
    }
}

get 현재 Position 및 watchPosition을 실행하고 실패한 경우 실행합니다.
오류 코드가 1, 2, 3.
1은 PERMISSION입니다.DENIED는 SSL 환경이 나타나지 않는 경우에 주로 표시됩니다.
2는 POSITION입니다.UNAVAILABLE이 정의되어 있으며 일부 내부 오류가 발생할 경우 표시됩니다.
3 options의 timeout이 지정한 것을 초과한 경우 표시됩니다.
1, 2, 3 이외에는 반환할 수 없지만, 디버깅용err를 사용하십시오.메시지라는 값이 있습니다.보통 사용하지 않아야 하는데 대체로 표시해 봤어요.

function error(err) {
    switch(err.code)
    {
        case 1:
        $('.message').html('PERMISSION_DENIED').animateCss('flash');
        break;
        case 2:
        $('.message').html('POSITION_UNAVAILABLE').animateCss('flash');
        break;
        case 3:
        $('.message').html('TIMEOUT').animateCss('flash');
        break;
        $('.message').html(err.message).animateCss('flash');
        break;
    }
}

clear Watch입니다.화면의 Clear 버튼을 클릭한 후 시작합니다.
화면과 각종 변수의 초기화를 진행하다.

$('#clear').on('click', function () {
    clear();
    $('.message').html('Clear OK').animateCss('flash');
});

상기 여러 번의clear()에서 watchPosition을 이용하여 화면의 초기화와 watchPosition의 초기화를 진행한다.

function clear() {
    $('.latitude').html('');
    $('.longitude').html('');
    $('.altitude').html('');
    $('.accuracy').html('');
    $('.altitudeAccuracy').html('');
    $('.heading').html('');
    $('.speed').html('');
    $('.timestamp').html('');
    if (watchId) {
        navigator.geolocation.clearWatch(watchId);
        watchId = null;
    }
}

GitHub

상술한 소스 코드의 전체 버전은 아래에 있으니 참고하십시오.
https://github.com/maedamikio/public/tree/master/geolocation

끝말

Geolocation의 기본적인 사용법을 이해했습니다.
나는 이 지식을 바탕으로 응용 프로그램의 제작을 추진하고 싶다.
사실 저는 처음으로 자바스크립트를 사용했습니다.정확히 지금까지도 복제품에 무심코 사용했지만 이해하면서 사용한 것은 처음이다.
jQuery, Bootstrap, Animate CSS를 사용해 많은 것을 배웠다.