React Bileşenlerinde Geolocation API

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) cihazın konumunu bir kez ister. Başarılı sonuç geri çağrımı bir GeolocationPosition nesnesi alır. Bu yöntem, hareketi sürekli izlemek yerine düğmeye tıklandığında en yakın mağazayı bulmak gibi konuma yalnızca bir kez ihtiyaç duyduğunuz durumlar için uygundur.

navigator.geolocation.watchPosition(successCallback, errorCallback, options), cihazın konumu her değiştiğinde geri çağrımı sürekli olarak çalıştırır. Sayısal bir watchId döndürür. Bu yöntem, konumun güncel kalması gereken teslimat takibi veya adım adım navigasyon gibi gerçek zamanlı kullanım alanları için uygundur.

GeolocationPosition nesnesi, latitude, longitude ve metre cinsinden accuracy özelliklerini içeren bir coords özelliğine sahiptir. İsteğe bağlı ek alanlar arasında altitude, altitudeAccuracy, heading ve speed bulunur. timestamp alanı, konumun ne zaman alındığını kaydeder.

Hata geri çağrımı, sayısal bir code özelliğine sahip GeolocationPositionError nesnesini alır. 1 kodu PERMISSION_DENIED (kullanıcı reddetti), 2 kodu POSITION_UNAVAILABLE (donanım veya ağ hatası) ve 3 kodu TIMEOUT (isteğin tamamlanması çok uzun sürdü) anlamına gelir. Her zaman bu üç durumun tamamını ele alın.

Bir watchPosition dinleyicisi siz durdurana kadar süresiz olarak çalışır. useEffect içinde, navigator.geolocation.clearWatch(watchId) yöntemini çağıran bir temizleme işlevi döndürün. Temizlemeyi unutursanız izleyici, bileşen kaldırıldıktan sonra da çalışmaya devam eder; bu durum pili tüketir ve kaldırılmış durumun güncellenmesine yol açabilir.

useGeolocation kancası, dört olası değere sahip bir durum bilgisini yönetir: idle (henüz istenmedi), loading (istek sürüyor), success (konum alındı) ve error (başarısız). Ayrıca position ile errorMessage değerlerini de durum içinde tutar. Bileşenler temiz ve tutarlı bir arayüz alır.

Kullanıcı coğrafi konum iznini reddettiğinde, özelliğin konum erişimine neden ihtiyaç duyduğunu ve tarayıcı ayarlarından bu erişimin nasıl yeniden etkinleştirileceğini açıklayan yararlı bir mesaj gösterin. Kullanıcılara hiçbir zaman ham hata kodu göstermeyin. Özelliğin konum izni olmadan da kullanılabilmesi için manuel adres girme alternatifi sunun.

Çoğu güçlü tarayıcı API'si gibi coğrafi konum da güvenli bağlamlarla sınırlıdır. navigator.geolocation, düz HTTP sayfalarında undefined olur. localhost üzerinde geliştirme yaparken HTTPS olmadan çalışır. Üretimde uygulamanızın HTTPS üzerinden sunulduğundan her zaman emin olun; aksi takdirde kullanıcılardan hiçbir zaman izin istenmez.

getCurrentPosition ve watchPosition yöntemlerinin isteğe bağlı üçüncü bağımsız değişkeni bir seçenekler nesnesi kabul eder. enableHighAccuracy: true, daha fazla güç tüketimi karşılığında GPS düzeyinde hassasiyet ister. timeout, beklenecek en uzun milisaniye süresini belirler. maximumAge, belirlenen milisaniye süresi içinde alınmışsa önbelleğe alınmış bir konumun kullanılmasına izin verir.

Coğrafi konum; "yakınımdaki mağazayı bul", teslimat görevlisini harita üzerinde izleme, mevcut şehre göre hava durumu, konum etiketli gönderiler ve kullanıcı ile hedef arasındaki mesafe hesaplamaları gibi özellikleri mümkün kılar. İzin istemeden önce uygulamanızın konumlarına neden ihtiyaç duyduğunu kullanıcılara her zaman açıkça anlatın.

Chrome DevTools, sahte bir cihaz konumu ayarlamanıza olanak tanır. DevTools'u açın, üç noktalı menüye gidin, Diğer araçlar'ı ve ardından Sensörler'i seçin. Herhangi bir konumu taklit etmek için enlem ve boylam koordinatlarını girebilirsiniz. Bu yöntem, konuma bağlı özellikleri sınamak için fiziksel olarak başka bir yere gitmekten çok daha hızlıdır.

GeolocationPositionError nesnesinin 1 kodu ne anlama gelir?

Tek seferlik okuma için getCurrentPosition, sürekli izleme için watchPosition kullanın. useEffect temizleme işlevinde her zaman clearWatch çağrısı yapın. idle, loading, success ve error durumlarına sahip bir useGeolocation kancası oluşturun. İzin reddini uygun biçimde ele alın ve coğrafi konumun üretimde HTTPS gerektirdiğini unutmayın.