Coğrafi Konum API'si kullanan Basit Gezi Ölçer

Michael Mahemoff

Giriş

Coğrafi Konum API'si, kullanıcının nerede olduğunu öğrenmenize ve her zaman kullanıcının izniyle hareket ederken onu takip etmenize olanak tanır. Bu işlev, kullanıcı sorgularının bir parçası olarak kullanılabilir (ör. kullanıcıları bir hedef noktaya yönlendirmek için). Ayrıca, kullanıcının oluşturduğu bazı içerikleri "coğrafi etiketlemek" için de kullanılabilir (ör. bir fotoğrafın çekildiği yeri işaretlemek için). API, cihaza bağlı değildir. İstemciler konum verilerini standart bir şekilde isteyip alabildikleri 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 aramalardan herhangi biri biraz zaman alacağı için API ayarsızdır; konum istediğinizde ona bir geri çağırma yöntemi iletmeniz gerekir.

Bu örnekte, ilk konumu gösteren ve sayfa yüklendikten sonra kat edilen mesafeyi gösteren bir yolculuk ölçer gösterilmektedir.

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: Yol Ölçer HTML'sini tanımlama

Bu örnekte bir yolculuk ö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 Geçerli Konumunu Belirleme

getCurrentPosition(), kullanıcının mevcut konumunu eşzamansız olarak bildirir. Başlangıç konumunu doğru şekilde doldurması ve daha sonra saklaması için sayfa yüklendikten hemen sonra çağrılmalıdır:

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ı iznini kontrol eder. Tarayıcıya bağlı olarak, izin aramalarına her zaman izin verme veya izin 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 yalnızca enlem ve boylamdan çok daha fazlasını içerebilir (ör. rakım veya yön). Konumu konsola kaydederek daha fazla bilgi edinebilirsiniz.

4. Adım. Hataları işleme

Maalesef tüm konum aramaları başarılı olmaz. GPS bulunamamış veya kullanıcı konum aramalarını aniden devre dışı bırakmış olabilir. Hata durumunda getCurrentPosition() için isteğe bağlı ikinci bir bağımsız değişken çağrılır. Böylece geri çağırma içinde kullanıcıyı 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 İzleme

getCurrentPosition() için önceki çağrı yalnızca sayfa yüklendiğinde bir kez yürütüldü. Değişiklikleri izlemek için watchPosition() simgesini kullanın. Kullanıcı hareket ettiğinde geri arama 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: Kat Edilen Mesafeyi Göster

Bu adım, Coğrafi Konum API'si ile doğrudan ilgili değildir ancak demoyu tamamlar ve konum verilerini nasıl kullanabileceğinize dair bir örnek sağlar. 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;
}