Bu makalemizde sizlerle html 5 in API lerinden Geolocation inceleyeceğiz.
- Yazılım Uzmanları
- 14 Mayıs 2018
- 674 kez görüntülendi.
Bu makalemizde sizlerle html 5 in API lerinden Geolocation inceleyeceğiz. Web uygulamasında kullanıcı gps bilgilerini alabilmemiz için kullanıcının internet tarayıcısının Geolocation Apisini desteklemesi gerekmektedir. Bunun yöntemi aşağıdaki şekildedir.
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
Bu yöntem çağrıldığında kullanıcının tarayıcısından bilgiler başarılı bir şekilde alınırsa successCallback fonksiyonu tetiklenir. Bu metodu aşağıdaki şekilde kullanabiliriz.
interface Geolocation {
void getCurrentPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
long watchPosition(PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
void clearWatch(long watchId);
};
Aşağıdaki örnek kod kullanıcının gps bilgilerini almak için basit bir örnek. Bu verileri alabilmek için kullanıcının tarayıcısının bu apiyi desteklemesi gerektiğini unutmamak gerekir.
<html>
...
<input type="button" value="Konum Bul"
onclick="javascript:konumbul()" /> <br/>
Enlem: <span id="spnEnlem"></span> <br/>
Boylam: <span id="spnBoylam"></span>
...
</html>
function konumbul() {
// One-shot position request.
navigator.geolocation.getCurrentPosition(goruntule);
}
function goruntule(position) {
document.getElementById('spnEnlem').innerHTML = position.coords.latitude;
document.getElementById('spnBoylam').innerHTML = position.coords.longitude;
}
Geolocation Apı ile Google Maps entegrasyonu
Şimdi de gelen gps bilgilerini google maps kullanarak konumunu harita üzerinde nasıl görüntüleyebileceğimize bakalım.
Burada Konum Göster düğmesine tıklandığında javascriptten konumbul() fonksiyonu çağrılıyor. Bu konumbul() fonksiyonunda getCurrentPosition ile kullanıcının gps verileri alınıyor. Konum belirleme başarılı bir şekilde tamamlandığında haritadagoster() fonksiyonu tetiklenerek google maps e enlem ve boylam değerleri gönderilerek haritanın
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAejrKoadg-7qroD80ZudB2RTDWKK9gj-bOroEU5LCFBySKkcgaxSzyO9J5gv6xSnLjjiUqjxM0gpUqw" type="text/javascript"></script>
<script type="text/javascript">
var map=null;
function konumbul() {
navigator.geolocation.getCurrentPosition(haritadagoster, function(err) { alert(err.message); });
}
function haritadagoster(konum) {
var Enlem = konum.coords.latitude;
var Boylam = konum.coords.longitude;
document.getElementById('spnEnlem').innerHTML = Enlem;
document.getElementById('spnBoylam').innerHTML = Boylam;
var EnBoy = new GLatLng(Enlem, Boylam);
var marker = new GMarker(EnBoy, { draggable: false });
map.addOverlay(marker);
}
function initMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41.05, 28.89), 10);
map.addControl(new GSmallZoomControl());
}
}
</script>
</head>
<body onload="initMap()">
<center>
<input type="button" value="Haritada Konum Göster" onclick="javascript:konumbul()"/> <br/>
</center>
Enlem : <span id="spnEnlem"></span><br/>
Boylam : <span id="spnBoylam"></span>
<br/><br/>
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>
Bu konum bulma işlemi ADSL çıkışlarında bağlı olduğunuz Telekom Müdürlüğünü gösterebilir. Ancak gps özelliği olan cihazlarda başarılı bir şekilde konumu görüntüleyebiliyor.
Bu yazıya 0 yorum yapılmış.