Kullanıcının Bulunduğu Yer

Coğrafi Konum API'si, kullanıcının iznini aldıktan sonra 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ği coğrafi etiketlemek (ör. bir fotoğrafın çekildiği yeri işaretlemek) gibi işlemler için kullanabilirsiniz.

Coğrafi Konum API'si ayrıca kullanıcının nerede olduğunu görmenize ve bir kullanıcı yer değiştirdikçe her zaman kullanıcının izniyle (ve yalnızca sayfa açıkken) onu takip etmenize olanak tanır. Bu, kullanıcı yakınlardaysa siparişi teslim almaya hazır hale getirmek için arka uç sistemlerle entegrasyon gibi birçok ilginç kullanım alanı oluşturur.

Coğrafi Konum API'yi kullanırken birçok noktayı göz önünde bulundurmanız gerekir. Bu kılavuzda, yaygın kullanım alanları ve çözümler açıklanmaktadır.

Özet

  • Kullanıcıya fayda sağlayacağı durumlarda coğrafi konum bilgisini kullanın.
  • Kullanıcı hareketine net bir yanıt olarak izin isteyin.
  • Kullanıcının tarayıcısının coğrafi konumu desteklemediği durumlarda özellik algılamayı kullanın.
  • Yalnızca coğrafi konumun nasıl uygulanacağını öğ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 özelleştirmek için kullanıcının belirli bir fiziksel konuma en yakın konumu bulun.
  • Bilgileri (ör. haberler) kullanıcının konumuna göre uyarlama
  • Bir kullanıcının konumunu harita üzerinde gösterin.
  • Uygulamanızda oluşturulan verileri kullanıcının konumuyla etiketleyin (yani bir resmi coğrafi olarak etiketleyin).

Sorumluluk bilinciyle izin isteyin

Son kullanıcı çalışmaları, kullanıcıların sayfa yüklenirken konumlarını paylaşmalarını isteyen sitelere güvenmediğini göstermiştir. Peki en iyi uygulamalar nelerdir?

Kullanıcıların size konumlarını vermeyeceğini varsayın

Kullanıcılarınızın çoğu konum bilgisini paylaşmak istemez. Bu nedenle, savunmacı bir geliştirme stili benimsemeniz gerekir.

  1. Sitenizi bu koşula uyarlayabilmek için coğrafi konum API'sindeki tüm hataları giderin.
  2. Konum için ihtiyacınız konusunda net ve açık olun.
  3. Gerekirse bir yedek çözüm kullanın.

Coğrafi konum bilgisi gerekliyse yedek yöntemi kullanın

Sitenizin veya uygulamanızın, kullanıcının mevcut konumuna erişmesini gerektirmemesini öneririz. Ancak siteniz veya uygulamanız için kullanıcının mevcut konum bilgisi gerekiyorsa kullanıcının şu anda nerede olduğuna dair en iyi tahmini almanızı sağlayan üçüncü taraf çözümler vardır.

Bu çözümler genellikle kullanıcının IP adresine bakarak ve bu adresi RIPE veritabanına kayıtlı fiziksel adreslerle eşleştirerek çalışır. Bu konumlar genellikle çok doğru değildir ve genellikle kullanıcıya en yakın telekomünikasyon merkezinin veya cep telefonu kulesinin konumunu gösterir. Birçok durumda, özellikle kullanıcı VPN veya başka bir proxy hizmeti kullanıyorsa bu bilgiler o kadar da doğru olmayabilir.

Kullanıcı hareketinde her zaman konuma erişim iste

Kullanıcıların konumlarını neden istediğinizi ve bu durumdan nasıl faydalanacaklarını anladığından emin olun. Site yüklenirken ana sayfada hemen istek istemek, kullanıcı deneyimini olumsuz etkiler.

Mağaza bulma sayfasında izin isteyen bir site.
UYGULAYIN: Her zaman kullanıcı hareketi üzerinden konuma erişim isteyin.
Ana sayfada izin isteyen bir site.
YAPMAYIN: Site yüklenirken ana sayfada istek istemek, kullanıcı deneyimini olumsuz etkiler.

Bunun yerine, kullanıcıya net bir harekete geçirici mesaj veya bir işlemin konumuna erişmesi gerekeceğini belirten bir gösterge verin. Kullanıcı, erişim isteğinde bulunan sistem istemiyle yeni başlatılan işlemi daha kolay ilişkilendirebilir.

Bir işlemin kullanıcının konumunu isteyeceğini açıkça belirtin

Google Ads ekibinin yaptığı bir araştırmada, bir kullanıcıdan belirli bir otel sitesindeki yaklaşan bir konferans için Boston'da bir otel odası rezervasyonu yapması istendiğinde, ana sayfadaki "Bul ve Rezervasyon Yap" harekete geçirici mesaja dokunduktan hemen sonra GPS konumunu paylaşması istendi.

Bazı durumlarda kullanıcı, Boston'da oda rezervasyonu yapmak istediği halde neden San Francisco'daki otellerin gösterildiğini anlamadığı için rahatsız oluyordu.

Kullanıcıların konumlarını neden istediğinizi anladığından emin olmak, daha iyi bir deneyim sunmanıza yardımcı olur. Cihazlar arasında yaygın olarak kullanılan iyi bilinen bir işaretçi (ör. menzil bulucu) veya "Yakınımda Bul" gibi açık bir harekete geçirici mesaj ekleyin.

Aralık bulucu.
Mesafe bulucu kullanın
"Yakınımdakileri bul" düğmesi içeren bir form.
Yakınımda bulmak için belirli bir harekete geçirici mesaj

Kullanıcıları konum izni vermeye nazikçe teşvik etme

Kullanıcıların yaptığı hiçbir işleme erişiminiz yoktur. Kullanıcıların konumlarına erişime ne zaman izin verdiğini tam olarak bilirsiniz ancak ne zaman erişim izni verdiklerini bilemezsiniz. Erişim iznini yalnızca sonuçlar göründüğünde almış olursunuz.

Kullanıcıların işlemi tamamlamasını istiyorsanız onları işlem yapmaya "yönlendirmek" iyi bir uygulamadır.

Önerilerimiz:

  1. Kısa bir süre sonra tetiklenecek bir zamanlayıcı ayarlayın. 5 saniye iyi bir değerdir.
  2. Hata mesajı alırsanız kullanıcıya bir mesaj gösterin.
  3. Olumlu bir yanıt alırsanız zamanlayıcıyı devre dışı bırakın ve sonuçları işleyin.
  4. Zaman aşımı süresi sonunda olumlu bir yanıt almadıysanız kullanıcıya bir bildirim gösterin.
  5. Yanıt daha sonra gelirse ve bildirim hâlâ mevcutsa 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 her zaman destek olup olmadığını kontrol etmek iyi bir uygulamadır.

Coğrafi konum nesnesinin varlığı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

Geolocation API, kullanıcının konumunu almak için basit ve "tek seferlik" bir yöntem sunar: getCurrentPosition(). Bu yöntemin çağrısı, kullanıcının mevcut konumunu ayarsız olarak bildirir.

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 uygulamanın izin istemesi ilk kezse tarayıcı genellikle kullanıcı iznini kontrol eder. Tarayıcıya bağlı olarak, izin aramalarına her zaman izin verme veya izin vermeme tercihleri de olabilir. Bu durumda, onay işlemi atlanır.

Tarayıcınızın kullandığı konum cihazına bağlı olarak, konum nesnesi yalnızca enlem ve boylamdan çok daha fazlasını içerebilir. Örneğin, rakım veya yön içerebilir. Konum sistemi, verileri gerçekten döndürene kadar hangi ek bilgileri kullandığını bilemezsiniz.

Kullanıcının konumunu izleme

Coğrafi Konum API'si, tek bir getCurrentPosition() çağrısı yaparak kullanıcının konumunu almanıza (kullanıcı izniyle) olanak tanır.

Kullanıcının konumunu sürekli olarak izlemek istiyorsanız watchPosition() coğrafi konum API yöntemini kullanın. getCurrentPosition()'e benzer şekilde çalışır ancak yerleşim yazılımı olarak birden çok kez tetiklenir:

  1. Kullanıcı için daha doğru bir kilit oluşturulmasını sağlar.
  2. Kullanıcının konumunun değiştiğini 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ının konumuyla ilgili daha hassas bir kilit elde etmek istiyorsunuz.
  • Uygulamanızın, kullanıcı arayüzünü yeni konum bilgilerine göre güncellemesi gerekiyor.
  • Kullanıcı belirli bir bölgeye girdiğinde uygulamanızın iş mantığını güncellemesi gerekir.

Coğrafi konumu kullanmayla ilgili en iyi uygulamalar

Her zaman temizleyin ve pili tasarruf edin

Coğrafi konumdaki değişiklikleri izlemek ücretsiz bir işlem değildir. İşletim sistemleri, uygulamaların coğrafi alt sisteme bağlanmasına olanak tanıyan platform özellikleri sunsa da web geliştiricisi olarak kullanıcının cihazının kullanıcının konumunu izlemek için ne tür bir destek sunduğunu bilemezsiniz. Ayrıca, bir konumu izlerken cihazı çok fazla ek işleme tabi tutarsınız.

Kullanıcının konumunu izlemeniz gerekmediğinde coğrafi konum sistemlerini kapatmak için clearWatch'ü arayın.

Hataları incelikle ele alın

Maalesef tüm konum aramaları başarılı olmaz. GPS bulunamamış veya kullanıcı aniden konum aramalarını devre dışı bırakmış olabilir. Bir hata durumunda, geri çağırmanın içindeki kullanıcıya bilgi verebilmeniz için getCurrentPosition() için isteğe bağlı ikinci bir 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ın başlatılması ihtiyacını azaltma

Birçok kullanım alanında, kullanıcının en güncel konumuna değil, kabaca bir tahmine ihtiyacınız vardır.

Tarayıcıya yakın zamanda elde edilen bir coğrafi konum sonucunu kullanmasını söylemek için maximumAge isteğe bağlı mülkünü kullanın. Bu, kullanıcının verileri daha önce istemiş olması durumunda yalnızca daha hızlı yanıt vermekle kalmaz, aynı zamanda tarayıcının kablosuz üçgenleme veya GPS gibi coğrafi konum donanım arayüzlerini başlatmasını da önler.

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 geçerli konum için yaptığınız istek hiçbir zaman geri gelmeyebilir.

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 bir konum tercih edin

Bir 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ı geri dönen yaklaşık bir konum sağlamak için tasarlanmıştır.

Yüksek düzeyde hassasiyete ihtiyacınız varsa varsayılan ayarı enableHighAccuracy seçeneğiyle geçersiz kılabilirsiniz. Bu seçeneği 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.

Coğrafi konumu ayarladıktan sonra şunları yapmanız gerekir:

  • Uygulamanızın farklı coğrafi konumlarda nasıl çalıştığını test edin.
  • Coğrafi konum kullanılamadığında uygulamanızın sorunsuz bir şekilde işlevini azalttığını doğrulayın.

Her ikisini de Chrome Geliştirici Araçları'ndan yapabilirsiniz.

  1. Chrome Geliştirici Araçları'nı açın.
  2. Konsol çekmecesini açmak için Esc tuşuna basın.
  3. Konsol çekmecesi menüsünü aç
  4. Sensörler sekmesini göstermek için Sensörler seçeneğini tıklayın.

Buradan, konumu önceden ayarlanmış bir büyük şehre geçersiz kılabilir, özel bir konum girebilir veya geçersiz kılma ayarını Konum kullanılamıyor olarak ayarlayarak coğrafi konumu devre dışı bırakabilirsiniz.

Geri bildirim