Giriş
Coğrafi Konum API'si, kullanıcının nerede olduğunu öğrenmenizi ve kullanıcılar hareket ederken her zaman kullanıcının izniyle onları yakından izlemenizi sağlar. Bu işlev, kullanıcı sorgularının bir parçası olarak kullanılabilir (ör. birini bir varış noktasına yönlendirmek için). Ayrıca, kullanıcının oluşturduğu bazı içeriklerde (ör. fotoğrafın çekildiği yeri işaretleme) "coğrafi etiketleme" için de kullanılabilir. API, cihazdan bağımsızdır; istemciler konum verilerini standart bir şekilde isteyip alabildiği sürece tarayıcının konumu belirleme biçimini umursamaz. Temel mekanizma GPS veya kablosuz bağlantı aracılığıyla ya da kullanıcıdan konumunu manuel olarak girmesini istemek olabilir. Bu aramalardan herhangi biri zaman alacağından API eşzamansızdır; her konum isteğinde bulunduğunuzda bir geri çağırma yöntemi geçirirsiniz.
Buradaki örnekte, ilk konumu gösteren ve sayfa yüklendiğinden beri katettikleri mesafeyi gösteren bir gezi sayacı verilmiştir.
1. Adım: Uyumluluğu denetle
Coğrafi konum nesnesinin olup olmadığı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 Metre HTML'sini bildirme
Bu örnekte, bir gezi sayacı oluşturmakta olduğ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 Coğrafi Konum API'si kullanılacaktır.
3. adım: Kullanıcının Mevcut Konumunu Belirleyin
getCurrentPosition(), kullanıcının mevcut konumunu eşzamansız olarak raporlar. Doğru bir şekilde doldurulabilmesi için sayfa yüklenir yüklenmez kodu çağırın ve başlangıç konumunu daha sonra kullanmak üzere kaydedin:
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 isteğinde bulunuyorsa 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 işlemi atlanır.
Bu kodu çalıştırdıktan sonra, başlangıç konumunu görebilirsiniz. Tarayıcınızın kullandığı konuma bağlı olarak, konum nesnesi aslında enlem ve boylamdan çok daha fazlasını (ör. bir rakım veya yön) içerebilir. Konum değişkenini konsola kaydederek daha ayrıntılı bilgi edinebilirsiniz.
4. Adım: Hataları İşleyin
Ne yazık ki konum aramalarının tümü başarılı değildir. GPS konumu bulunamadı veya kullanıcı aniden konum aramalarını devre dışı bırakmıştır. Hata durumunda getCurrentPosition() için ikinci bir isteğe bağlı bağımsız değişken çağrılır. Böylece geri çağırmanın 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
Önceki getCurrentPosition() çağrısı, sayfa yüklemesinde yalnızca bir kez yürütüldü. Değişiklikleri izlemek için watchPosition() uzantısını kullanın. Kullanıcı hareket ettiğinde otomatik olarak bir geri çağırma işlevi bildirir:
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 Geolocation API ile doğrudan ilişkili değildir ancak demoyu yuvarlar ve konum verilerini nasıl kullanabileceğinize dair bir örnek sunar. Katedilen 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 Taşınabilir Tür 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;
}