Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when safe_mode is enabled or an open_basedir is set in /home/serpito/public_html/wp-content/plugins/amp-plus/amp-plus.php on line 200
HTML5 Geolocation Uygulaması | - Demo Uygulama - Serpito | www.serpito.com - AMP tarafı | Hızlandırılmış Mobil Sayfa

HTML5 Geolocation Uygulaması | - Demo Uygulama - Serpito

HTML5 Geolocation Uygulaması | - Demo Uygulama - Serpito | Quelle: www.serpito.com
HTML5 Geolocation Uygulaması Posted on 04 Mayıs 201304 Mayıs 2013 by Atilla Akoğlu

 HTML5 teknolojisi ile gelen Geolocation  özelliği, tarayıcıdan alınan kullanıcı izni ile, konum tesbiti ve konumu artık çok basit.

GeoLocation API güvenilir web siteleri ile konumunuzu paylaşmanızı sağlar.

Tarayıcınız konum belirleme desteklemiyor ise, mobil cihazınızda GPS ünitesi var ise, Firefox’un eski sürümleri için Firefox’un en yeni sürümü veya bir geolocation  addon kullanabilirsiniz.

navigator.geolocation.getCurrentPosition(showPosition);

Yukarıdaki kod betiğinde yer alan getCurrentPosition ön tanımlı fonksiyon ile, kullanıcının konumu tesbit edebiliyoruz.

Uyumlu tarayıcılar

 

Şimdi kodlara geçelim;

 <span id="status">geolocation açılıyor...</span> <script> function success(position) { var s = document.querySelector(\'#status\'); if (s.className == \'success\') { // not sure why we\'re hitting this twice in FF, I think it\'s to do with a cached result coming back return; } s.innerHTML = "Güncel konumunuz!"; s.className = \'success\'; var mapcanvas = document.createElement(\'div\'); mapcanvas.id = \'mapcanvas\'; mapcanvas.style.height = \'550px\'; mapcanvas.style.width = \'650px\'; document.querySelector(\'article\').appendChild(mapcanvas); var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title:"Buralardasınız! ( "+position.coords.accuracy+" meter radius)" }); } function error(msg) { var x = document.querySelector(\'#status\'); x.innerHTML = typeof msg == \'string\' ? msg : "failed"; x.className = \'fail\'; switch(error.code){ case error.PERMISSION_DENIED: x.innerHTML="Kullanıcı Geolocation isteğini reddetti." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Konum bilgileri kullanılamıyor." break; case error.TIMEOUT: x.innerHTML="Kullanıcı yerini almak için yapılan istek zaman aşımına uğradı." break; case error.UNKNOWN_ERROR: x.innerHTML="Bilinmeyen bir hata oluştu." break; } // console.log(arguments); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error(\'not supported\'); } </script> <div id="mapcanvas"></div> 

 

Demo Download

This entry was posted in Demo Uygulama, jQuery and tagged , , , , , , , . Bookmark the permalink.
Baskı
Içerikten sorumlu:
www.serpito.com
AMP eklentisi aracılığıyla mobil sayfa:
amp-cloud.de
Gizlilik ve Kullanım Şartları:
www.serpito.com
AMP-Update:
27.05.2018 - 17:56:53