HTML5 - Making Your HTML Location Aware: Geolocation(computing adistance between two coordinates)

Head First HTML5 Programming
Building Web Apps with Javascript
(O'Reilly Media)
Eric Freeman (著), Elisabeth Robson (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• HTML5 (マークアップ言語)
• JavaScript (プログラミング言語)

Head First HTML5 Programming: Building Web Apps with Javascript(Eric Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)のChapter 5(Making Your HTML Location Aware: Geolocation)、CODE MAGNETS(No. 3501)を解いてみる。

その他参考書籍

• Head First HTML and CSS

CODE MAGNETS(No. 3501)

JavaScript (BBEdit, Emacs)

var prevCoords = null,
    displayLocation = function (position) {
        var latitude = position.coords.latitude,
            longitude = position.coords.longitude,
            div = document.getElementById('location'),
            km = computeDistance(position.coords, ourCoords),
            distance = document.getElementById('distance'),
            meters;
        
        div.innerHTML =
            'You are at Latitude: ' + latitude + ', Longitude: ' + longitude +
            ' (with ' + position.coords.accuracy + ' meters accuracy)';
        distance.innerHTML = 'You are ' + km + ' km from the WickedlySmart HQ';
        if (map === null) {
            showMap(position.coords);
            prevCoords = position.coords;
        } else {
            meters = computeDistance(position.coords, prevCoords) * 1000;
            if (meters > 20) {
                scrollMapToPosition(position.coords);
                prevCoords = position.coords;
            }
        }
    };