Geolocation API'yi kullanan basit bir gezi ölçer

Michael Mahemoff

Giriş

Geolocation API, kullanıcının nerede olduğunu öğrenmenize ve hareket ederken onu takip etmenize olanak tanır. Bu işlem her zaman kullanıcının izniyle yapılır. Bu işlev, kullanıcı sorgularının bir parçası olarak kullanılabilir (ör. bir kişiyi varış noktasına yönlendirmek için). Ayrıca, kullanıcının oluşturduğu bazı içeriklerin "coğrafi etiketlenmesi" (ör. bir fotoğrafın nerede çekildiğini işaretlemek) için de kullanılabilir. API, cihazdan bağımsızdır. İstemciler konum verilerini standart bir şekilde isteyip alabildiği sürece tarayıcının konumu nasıl belirlediği önemli değildir. Temel mekanizma GPS, kablosuz ağ veya kullanıcıdan konumunu manuel olarak girmesini istemek olabilir. Bu aramaların her biri biraz zaman alacağından API eşzamansızdır. Konum istediğinizde API'ye bir geri çağırma yöntemi iletirsiniz.

Buradaki örnek, ilk konumu gösteren ve sayfa yüklendiğinden beri kat edilen mesafeyi gösteren bir gezi ölçerdir.

1. Adım: Uyumluluğu kontrol etme

Browser Support

• 5
• 12
• 3.5
• 5

Source

Coğrafi konum nesnesinin varlığını test ederek uyumluluğu kolayca kontrol edebilirsiniz:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

2. adım: Gezi ölçer HTML'sini tanımlama

Bu örnekte bir gezi ölçer oluşturduğunuz için aşağıdaki HTML'yi tanımlayın:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

Sonraki birkaç adımda, tüm bu boş aralıkları doldurmak için Geolocation API kullanılacaktır.

3. adım: Kullanıcının mevcut konumunu belirleme

getCurrentPosition(), kullanıcının mevcut konumunu eşzamansız olarak bildirir. Başlangıç konumunu doğru şekilde doldurması ve daha sonra kullanmak üzere kaydetmesi için sayfa yüklenir yüklenmez bu işlevi çağırın:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

Bu alandaki bir uygulama ilk kez izin istiyorsa tarayıcı genellikle kullanıcı rızasını kontrol eder. Tarayıcıya bağlı olarak, izin aramalarına her zaman izin verme veya vermeme tercihleri de olabilir. Bu durumda onay süreci atlanır.

Bu kodu çalıştırdıktan sonra başlangıç konumunu görebilirsiniz. Tarayıcınızın kullandığı konum cihazına bağlı olarak konum nesnesi, enlem ve boylamdan çok daha fazlasını (ör. rakım veya yön) içerebilir. Konum değişkenini konsola kaydederek daha fazla bilgi edinebilirsiniz.

4. adım: Hataları işleme

Maalesef tüm konum aramaları başarılı olmuyor. GPS bulunamamış veya kullanıcı konum aramalarını aniden devre dışı bırakmış olabilir. getCurrentPosition() için ikinci ve isteğe bağlı bir bağımsız değişken, hata durumunda çağrılır. Böylece kullanıcıyı geri çağırma içinde bilgilendirebilirsiniz:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

5. adım: Kullanıcının konumunu izleme

getCurrentPosition() için önceki çağrı, sayfa yüklenirken yalnızca bir kez yürütüldü. Değişiklikleri izlemek için watchPosition() kullanın. Kullanıcı her hareket ettiğinde bir geri çağırma işlevini otomatik olarak bilgilendirir:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

6. Adım: Katedilen mesafeyi göster

Bu adım doğrudan Geolocation API ile ilgili değildir ancak demoyu tamamlar ve konum verilerini nasıl kullanabileceğinize dair bir örnek sunar. Kat edilen mesafeyi doldurmak için watchPosition() işleyicisine fazladan bir satır ekleyin:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() işlevi, iki koordinat arasındaki mesafeyi belirlemek için geometrik bir algoritma uygular. JavaScript uygulaması, Creative Commons lisansı kapsamında Moveable Type tarafından sağlanan bir komut dosyasından uyarlanmıştır:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}