Geolocation - Konum Bulma Islemleri

HTML Geolocation API'si kullanilarak kullanicilarin konum bilgilerine(Enlem,Boylam) ulasilabilir.(Bu izni kullanicinin vermesi gerekiyor)

Ve Bu bilgileri kullanarak kullanicinin konumunu harita uzerinde gosterebiliriz.Fakat sitenizin guvenli baglanti(https) destegi yoksa bazi tarayicilarda bu islemler calismaz!

Konum tespiti icin asagidaki yapiyi kullanacagiz.

if(navigator.geolocation){
	//Geolocation  API destegei var
	//tespit islemlerini burda yapacagiz
}else{
	//Geolocation  destegi yok
}


Hemen en temel ornegimizi yaparak baslayalim.Aciklamari ornek uzerinde bulabilirsiniz.


<button onclick="konumGoster()">Konum Goster</button>

<script>
	function konumGoster(){

		//Tarayicinin Geolocation  API destegei varmi bakalim
		if(navigator.geolocation){

			//destek var
			navigator.geolocation.getCurrentPosition(basariDurumu,hataDurumu);

		}else{
			//destek yok
			alert("Geolocation Destegi yok");
		}
	}

	function basariDurumu(konum){
		var enlem=konum.coords.latitude;
		var boylam=konum.coords.longitude;

		alert("Enlem="+enlem+"\nBoylam="+boylam+"\ntimestamp="+konum.timestamp);
        
        //Ayrica 
        //konum.coords.altitude Rakim bilgisi (konuma ait yükseklik bilgisini)
        //konum.timestamp Konumun alindigi zamani verir
        //coords.speed,coords.heading,coords.altitudeAccuracy,coords.accuracy gibi degerleride merak edenler arastirabilir
	}
	function hataDurumu(hata){
		alert("Bir hata olustu");
	}
</script>




Yukardaki ornegimizde Geolocation API destegi var ve dogrudan kullanicinin konum bilgilerini almaya calistik ve hata durumunu cok basit sekilde inceledik.Hata durumu hakkinda biraz daha detayli bilgi verebiliriz. (zaman asimi,bilinmeyen hata,izin sorunu gibi).


<button onclick="konumBilgileri()">Konum Goster</button>

<script>
function konumBilgileri(){
	if(navigator.geolocation){
			//destek var
			navigator.geolocation.getCurrentPosition(basarili,hatali);
	}else{
		alert("Geolocation Destegi yok");
	}
}


function basarili(konum){
		var enlem=konum.coords.latitude;
		var boylam=konum.coords.longitude;

		alert("Enlem="+enlem+"\nBoylam="+boylam);

}

function hatali(hata){
		
		//gelen hata koduna gore mesajlar verelim
		var mesaj="";
		switch(hata.code){
			case hata.UNKNOWN_ERROR:
				mesaj="Bilinmeyen bir hata olustu hata kodu="+hata.UNKNOWN_ERROR;//0
				break;
			case hata.PERMISSION_DENIED:
				mesaj="Kullanici konumunu paylasmayi reddetti hata kodu="+hata.PERMISSION_DENIED;//1
				break;
			case hata.POSITION_UNAVAILABLE:
				mesaj="Konum tespit edilemedi hata kodu="+hata.POSITION_UNAVAILABLE;//2
				break;
			case hata.TIMEOUT:
				mesaj="Zaman Asimi hata kodu="+hata.TIMEOUT;//3
				break;
		}

		alert(mesaj);
}
</script>





Alinan konum degerlerinin bir harita uzerinde gosterilmesi sanirim daha hos olacaktir,simdiki ornegimizde ise konum bilgilerini google harita hizmetinden yararlanarak gosterelim.
Bu ornegi denedigim donemde benim sayfamda guvenli https baglantisi olmadigi icin chrome ve mozilla sorun cikardi fakat Microsoft Edge ile sorun cikarmadi.


<button onclick="konumuHaritadaGoster()">Konum Goster</button>

<div id="harita" style="width: 100%;height:300px;padding:20px;border:1px solid silver;">
	
</div>
<script>

var haritaAlani=document.getElementById("harita");

function konumuHaritadaGoster(){
	if(navigator.geolocation){
			navigator.geolocation.getCurrentPosition(successDurumu,errorDurumu);
	}else{
		alert("Geolocation Destegi yok");
	}
}



function successDurumu(konum){
	var lat=konum.coords.latitude;
	var long=konum.coords.longitude;

	haritadaGoster(lat,long);
}


function errorDurumu(hata){
	alert("Hata oldu ve hata kodu="+hata.code);
}

function haritadaGoster(lat,long){
	var konumum=new google.maps.LatLng(lat,long);

	var ayarlar={
    center:konumum,
    zoom:15,
};
var harita=new google.maps.Map(haritaAlani,ayarlar);


//marker da ekleyelim
  var marker = new google.maps.Marker({position:konumum});
  marker.setMap(harita);
}

</script>

//asagidaki API_KEY alanina size ozel anahtar girilmelidir.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=myMap"></script>





watchPosition() ve clearWatch()

watchPosition() getCurrentPosition() gibi calisir fakat onemli ve hos bir farki var "Kullanici konumu degistiginde guncel konumu getirmeye devam eder."
clearWatch() watchPosition() yontemini durdurmak icin kullanilir.
Burdaki izleme aktif ise diger konum islemlerinde gecikmeye neden olabilir!
<button onclick="izlemeyiDurdur()">Izlemeyi Durdur</button>
<div id="guncelSonuclar" style="border:1px solid silver;padding:20px;">
	
</div>
<script>

var sonucAlani=document.getElementById("guncelSonuclar");
var izleyici=null;
if(navigator.geolocation){
	 
		ayarlar={
		  enableHighAccuracy:true,
		  timeout:5000,
		  maximumAge:0
		};

		izleyici=navigator.geolocation.watchPosition(olumlu,olumsuz,ayarlar);


}else{
	sonucAlani.innerHTML ="Konum Destegi Yok :(";
}


function olumlu(konum){
	sonucAlani.innerHTML ="latitude="+konum.coords.latitude+"<br/>longitude="+konum.coords.longitude;
}

function olumsuz(hata){
	sonucAlani.innerHTML ="Hata oldu ve Hata Kodu="+hata.code;
}

function izlemeyiDurdur(){
	 if(izleyici!=null) {
            navigator.geolocation.clearWatch(izleyici);
            izleyici = null;
        }
}

</script>



Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com