Coğrafi Konum API'si, kullanıcının izniyle kullanıcının konumunu keşfetmenize olanak tanır.
Coğrafi Konum API'si, kullanıcının izniyle kullanıcının konumunu keşfetmenize olanak tanır. Bu işlevi, kullanıcıyı hedefine yönlendirmek ve kullanıcı tarafından oluşturulan içeriğe coğrafi etiket uygulamak (ör. fotoğrafın çekildiği yeri işaretlemek) için kullanabilirsiniz.
Coğrafi Konum API'si ayrıca kullanıcının nerede olduğunu görmenize ve kullanıcılar etrafta gezinirken her zaman (ve yalnızca sayfa açıkken) kullanıcının izniyle onları takip etmenize olanak tanır. Bu durum, kullanıcı yakındaysa koleksiyon için sipariş hazırlamak amacıyla arka uç sistemleriyle entegrasyon gibi pek çok ilginç kullanım alanı oluşturur.
Coğrafi Konum API'sini kullanırken birçok noktayı bilmeniz gerekir. Bu kılavuzda yaygın kullanım alanları ve çözümler açıklanmaktadır.
Özet
- Coğrafi konumu, kullanıcıya fayda sağladığında kullanın.
- Kullanıcı hareketine net bir yanıt olarak izin isteyin.
- Kullanıcının tarayıcısı coğrafi konumu desteklemiyorsa özellik algılamayı kullanın.
- Coğrafi konumu nasıl uygulayacağınızı öğrenmekle kalmayın; coğrafi konumu kullanmanın en iyi yolunu da öğrenin.
- Coğrafi konumu sitenizle test edin.
Coğrafi konum ne zaman kullanılır?
- Kullanıcı deneyimini uyarlamak için kullanıcının belirli bir fiziksel konuma en yakın olduğu yeri bulun.
- Bilgileri (haberler gibi) kullanıcının konumuna göre uyarlayın.
- Kullanıcının konumunu haritada gösterin.
- Uygulamanızda oluşturulan verileri kullanıcının konumuyla etiketleyin (yani bir resmi coğrafi olarak etiketleyin).
Sorumlu bir şekilde izin isteyin
Kısa süre önce yapılan kullanıcı araştırmaları, kullanıcıların sayfa yüklenirken sadece kendi konumlarını belli etmelerini isteyen sitelere hiç güvenmediklerini göstermiştir. Peki en iyi uygulamalar nelerdir?
Kullanıcıların size konum bilgisi vermeyeceğini varsayın
Kullanıcılarınızın çoğu size konumlarını vermek istemez, bu yüzden savunma geliştirme tarzı benimsemeniz gerekir.
- Sitenizi bu koşula uyarlayabilmek için coğrafi konum API'si dışındaki tüm hataları giderin.
- Konuma ihtiyacınız konusunda açık ve net olun.
- Gerekirse bir yedek çözüm kullanın.
Coğrafi konum gerekliyse yedek kullanın
Sitenizin veya uygulamanızın, kullanıcının mevcut konumuna erişim gerektirmemesini öneririz. Bununla birlikte, siteniz veya uygulamanız kullanıcının mevcut konumunu gerektiriyorsa, kullanıcının o anda nerede olduğunu en iyi şekilde tahmin etmenizi sağlayan üçüncü taraf çözümleri vardır.
Bu çözümler genellikle kullanıcının IP adresine bakarak ve bu adresi RIPE veritabanında kayıtlı fiziksel adreslerle eşleyerek işe yarar. Bu konumlar genellikle çok doğru olmaz ve normalde kullanıcıya en yakın telekomünikasyon merkezinin veya baz istasyonunun konumunu verir. Birçok durumda, özellikle de kullanıcı VPN veya başka bir proxy hizmetini kullanıyorsa bu değerler bile doğru olmayabilir.
Kullanıcı hareketinde her zaman konuma erişim iste
Kullanıcıların konumlarını neden istediğinizi ve kendilerine ne gibi bir avantaj sağlayacağını anladıklarından emin olun. Site yüklendiği sırada ana sayfada bu kodu istemek kötü bir kullanıcı deneyimine neden olur.
![Mağaza bulma sayfasında izin isteyen bir site.](https://web.dev/static/articles/user-location/image/a-site-requesting-permiss-7da80ad474ecf.png?authuser=5&hl=tr)
![Ana sayfada izin isteyen bir site.](https://web.dev/static/articles/user-location/image/a-site-requesting-permiss-de9fb69ac4117.png?authuser=5&hl=tr)
Bunun yerine, kullanıcıya net bir harekete geçirici mesaj veya bir işlemin kullanıcının konumuna erişmesi gerektiğine dair bir gösterge sağlayın. Böylece kullanıcı, erişim için sistem istemini az önce başlatılan işlemle daha kolay bir şekilde ilişkilendirebilir.
Bir işlemin kullanıcının konum bilgisini isteyeceğini net bir şekilde belirtin
Google Ads ekibi tarafından yapılan bir araştırmada, kullanıcıdan belirli bir otel sitesinde yapılacak bir konferans için Boston'da otel odası rezervasyonu yapması istendiğinde, ana sayfadaki "Bul ve Rezervasyon Yap" harekete geçirici mesajına dokunduktan hemen sonra kullanıcıdan GPS konumunu paylaşması istenmiştir.
Bazı durumlarda kullanıcı, Boston'da oda ayırtmak istediğinde kendisine neden San Francisco'daki otellerin gösterildiğini anlamadığı için hayal kırıklığına uğramıştır.
Kullanıcıların kendilerinden konumlarını neden istediğinizi anlamalarını sağlamak daha iyi bir deneyimdir. Telemetre bulucu veya "Yakınımda Bul" gibi açık bir harekete geçirici mesaj gibi tüm cihazlarda yaygın olarak kullanılan bir işaretleyici ekleyin.
![Telemetre bulucu.](https://web.dev/static/articles/user-location/image/a-range-finder-318d55f8a5009.png?authuser=5&hl=tr)
![Yakınımda bul düğmesi içeren bir form.](https://web.dev/static/articles/user-location/image/a-form-a-find-near-butt-9d544025fb506.png?authuser=5&hl=tr)
Konumlarına izin vermeleri için kullanıcılara nazikçe izin verme
Kullanıcıların yaptığı hiçbir şeye erişiminiz yok. Kullanıcıların konumlarına erişime izin vermediğini kesin olarak bilirsiniz, ancak size ne zaman erişim verdiklerini bilmezsiniz; yalnızca sonuçlar görüntülendiğinde erişim elde ettiğinizi bilirsiniz.
İşlemi tamamlamaları gerekiyorsa kullanıcıları harekete geçmeye "yönlendirmek" iyi bir uygulamadır.
Önerilerimiz:
- Kısa bir süre sonra tetiklenen bir zamanlayıcı ayarlayın. 5 saniye iyi bir değerdir.
- Hata mesajı alırsanız kullanıcıya bir mesaj gösterin.
- Olumlu bir yanıt alırsanız zamanlayıcıyı devre dışı bırakıp sonuçları işleyin.
- Zaman aşımı süresi dolduktan sonra olumlu bir yanıt almadıysanız kullanıcıya bildirim gösterin.
- Yanıt daha sonra geliyorsa ve bildirim hâlâ mevcutsa bildirimi ekrandan kaldırın.
button.onclick = function () {
var startPos;
var nudge = document.getElementById('nudge');
var showNudgeBanner = function () {
nudge.style.display = 'block';
};
var hideNudgeBanner = function () {
nudge.style.display = 'none';
};
var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
var geoSuccess = function (position) {
hideNudgeBanner();
// We have the location, don't display banner
clearTimeout(nudgeTimeoutId);
// Do magic with location
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
switch (error.code) {
case error.TIMEOUT:
// The user didn't accept the callout
showNudgeBanner();
break;
}
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Tarayıcı desteği
Tarayıcıların çoğu artık Geolocation API'yi desteklemektedir ancak herhangi bir işlem yapmadan önce desteği her zaman kontrol etmek iyi bir uygulamadır.
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.');
}
Kullanıcının mevcut konumunu belirleme
Coğrafi Konum API'si, kullanıcının konumunu elde etmek için basit, "tek seferlik" bir yöntem sunar: getCurrentPosition()
. Bu yönteme yapılan bir çağrı, kullanıcının mevcut konumunu eşzamansız olarak raporlar.
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
navigator.geolocation.getCurrentPosition(geoSuccess);
};
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 verilmesini veya izin verilmemesini sağlayan tercihler de olabilir. Bu durumda onay işlemi atlanır.
Tarayıcınızın kullandığı konum cihazına bağlı olarak, konum nesnesi gerçekte enlem ve boylamdan çok daha fazlasını (örneğin, bir rakım veya yön) içerebilir. Konum sisteminin verileri gerçekten döndürmeden hangi ekstra bilgileri kullandığını bilemezsiniz.
Kullanıcının konumunu izleme
Geolocation API, tek bir getCurrentPosition()
çağrısıyla kullanıcının konumunu (kullanıcı izniyle) almanıza olanak tanır.
Kullanıcının konumunu sürekli olarak izlemek istiyorsanız watchPosition()
Geolocation API yöntemini kullanın. getCurrentPosition()
ile benzer şekilde çalışır, ancak konumlandırma yazılımından birden çok kez tetiklenir:
- Kullanıcıya daha doğru bir kilitlenme sağlar.
- Kullanıcının konumunun değişmekte olduğunu belirler.
var watchId = navigator.geolocation.watchPosition(function (position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
Kullanıcının konumunu izlemek için coğrafi konum ne zaman kullanılır?
- Kullanıcı konumu üzerinde daha hassas bir kilit elde etmek istiyorsanız.
- Uygulamanızın, kullanıcı arayüzünü yeni konum bilgilerine göre güncellemesi gerekir.
- Kullanıcı belirli bir tanımlanmış alt bölgeye girdiğinde uygulamanızın iş mantığını güncellemesi gerekir.
Coğrafi konum kullanımıyla ilgili en iyi uygulamalar
Her zaman temizleyin ve pili tasarruflu tutun
Coğrafi konumda yapılan değişiklikleri izlemek ücretsiz bir işlem değildir. İşletim sistemleri, uygulamaların coğrafi alt sisteme bağlanmasını sağlayan platform özelliklerini kullanıma sunuyor olsa da bir web geliştiricisi olarak kullanıcı cihazının, kullanıcı konumunu izleme konusunda nasıl bir destek sağladığına dair hiçbir fikriniz olmaz. Bir konumu izlerken de cihazla ilgili pek çok ek işlem yapmak zorunda kalırsınız.
Kullanıcının konumunu artık izlemeniz gerekmediğinde, coğrafi konum sistemlerini kapatmak için clearWatch
numaralı telefonu arayın.
Hataları sorunsuz şekilde ele alın
Ne yazık ki konum aramalarının tümü başarılı değildir. Belki de GPS konumu bulunamamıştır veya kullanıcı aniden konum aramalarını devre dışı bırakmıştır. Hata olması durumunda, geri çağırmanın içindeki kullanıcıyı bilgilendirebilmeniz için getCurrentPosition()
için ikinci bir isteğe bağlı bağımsız değişken çağrılır:
window.onload = function () {
var startPos;
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
Coğrafi konum donanımını başlatma ihtiyacını azaltma
Çoğu kullanım alanında kullanıcının en güncel konumunu gerekmez, yalnızca kaba bir tahmine ihtiyacınız olur.
Tarayıcıya, yakın zamanda alınan bir coğrafi konum sonucunu kullanmasını bildirmek için isteğe bağlı maximumAge
özelliğini kullanın. Bu, yalnızca kullanıcı daha önce veri isteğinde
bulunduğunda daha hızlı sonuç almakla kalmaz, aynı zamanda tarayıcının Kablosuz üçgenleme veya GPS gibi coğrafi konum donanım arayüzlerini başlatmasını da engeller.
window.onload = function () {
var startPos;
var geoOptions = {
maximumAge: 5 * 60 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Kullanıcıyı bekletmeyin, zaman aşımı ayarlayın
Zaman aşımı ayarlamazsanız mevcut konum isteğiniz bir daha asla geri dönmeyebilir.
window.onload = function () {
var startPos;
var geoOptions = {
timeout: 10 * 1000,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Ayrıntılı bir konum yerine yaklaşık konumu tercih edin
Kullanıcıya en yakın mağazayı bulmak istiyorsanız 1 metre hassasiyete ihtiyacınız yoktur. API, mümkün olduğunca hızlı döndürülen bir yaklaşık konum sağlamak için tasarlanmıştır.
Yüksek bir hassasiyet düzeyine ihtiyacınız varsa enableHighAccuracy
seçeneğiyle varsayılan ayarı geçersiz kılabilirsiniz. Bunu dikkatli kullanın: Çözümü daha yavaştır ve daha fazla pil kullanır.
window.onload = function () {
var startPos;
var geoOptions = {
enableHighAccuracy: true,
};
var geoSuccess = function (position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
};
var geoError = function (error) {
console.log('Error occurred. Error code: ' + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from location provider)
// 3: timed out
};
navigator.geolocation.getCurrentPosition(geoSuccess, geoError, geoOptions);
};
Chrome Geliştirici Araçları ile coğrafi konum emülasyonu
![Geliştirici Araçları'ndaki sensör sekmesi.](https://web.dev/static/articles/user-location/image/the-sensor-tab-devtools-99f58f9bf1aac.png?authuser=5&hl=tr)
Coğrafi konumu ayarladıktan sonra:
- Uygulamanızın farklı coğrafi konumlarda nasıl çalıştığını test edin.
- Coğrafi konum kullanılamadığında uygulamanızın sorunsuz şekilde azaldığını doğrulayın.
Bu iki seçeneği de Chrome Geliştirici Araçları'ndan yapabilirsiniz.
- Chrome Geliştirici Araçları'nı açın.
- Esc için Esc tuşuna basın.
- Konsol çekmecesi menüsünü aç
- Sensörler sekmesini görmek için Sensörler seçeneğini tıklayın.
Buradan konumu geçersiz kılabilir, önceden ayarlanmış bir büyük şehir olarak belirtebilir, özel bir konum girebilir veya geçersiz kılma ayarını Konum kullanılamıyor olarak ayarlayarak coğrafi konumu devre dışı bırakabilirsiniz.