Bu yazımızda sizlere Javascript kullanırken kullanıcının konumunu alma konusunu açıklayacağız.
Kullanıcıyla etkileşim içeren programlarda kullanıcı konumuna ihtiyacımız olabilir. Örneğin bir hava durumu programı yazdıysak kullanıcının hangi konumda olduğunu bilmemiz gerekir. Bunun en kısa yolu Javascript için Geolocation API kullanmaktır.
Javascript’te Kullanıcının Konumu Nasıl Öğrenilir?
Javascript’te kullanıcının konumunu öğrenmek ve bunu programlarınızda kullanabilmek için Geolocation API kullanabilirsiniz.
Javascript Geolocation API Kullanımı
Bu API’yi kullanmak gizliliği tehlikeye atabileceği için kullanıcı onaylamadığı sürece kullanıcının konumu kullanılmaz. Eğer kullanıcı konumunu isteyen web sayfasına onay verirse kullanıcının konum bilgisi web sayfasına ulaşır.
Kullanımı standart bir HTML dosyasında anlatacağım o yüzden şu şekilde bir boş HTML dosyası oluşturun.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Demo</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"></script>
</head>
<body>
</body>
</html>Daha sonra yedinci satırda yer alan “script” etiketinin arasına gelip kullanıcıdan konum alma işlemi için gerekli olan kodları yazıyoruz.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocationInfo);
}Bu kodlarda bir koşul başlattık. Eğer tarayıcı destekliyor ve kullanıcı izin veriyorsa “navigator.geolocation” bizim için “getCurrentPosition()” fonksiyonunu çağıracak.
Bu fonksiyon kullanıcının konumunu döndürmek için kullanılır ve bir parametre alır. Biz parametre olarak “displayLocationInfo” fonksiyonunu verdik. Şimdi sıra o fonksiyonu tanımlamakta.
function displayLocationInfo(position) {
const en = position.coords.longitude;
const boy = position.coords.latitude;
console.log(`lEnlem: ${ en } | Boylam: ${ boy }`);Tanımladığımız fonksiyonun içerisinde “en” ve “boy” olmak üzere iki değişken bulunuyor. Bu değişkenler içerisinde kullanıcının konum bilgisini döndüreceğiz. Sonrasında “console.log” kullanarak bunları konsola yazdıracağız.
Javascript Kullanıcı Konum Bilgisi Alma Kod Örneği
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Demo</title>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocationInfo);
}
function displayLocationInfo(position) {
const en = position.coords.longitude;
const boy = position.coords.latitude;
console.log(`Enlem: ${ en } | Boylam: ${ boy }`);
}
</script>
</head>
<body>
</body>
</html>Dosyayı kaydettikten sonra çift tıklayarak tarayıcımda çalıştırıyorum. Başta söylediğimiz gibi öncelikle bizden izin isteyecek.
İzin vermezseniz boş bir sayfa dönecek ve bir şey olmayacak. Eğer izin verirseniz “F12” tuşuna basarak “Geliştirici Seçenekleri” adlı bölümü açıp “Console” kısmına gelirseniz şu şekilde bir şey göreceksiniz.
Oldukça kısa bir kod ile Javascript kullanırken kullanıcının konum bilgisine erişebilirsiniz. Birçok web projenizde bu kısa Javascript kodu ile kullanıcı konum bilgisini
