React Native Maps Ve Geolocation Kullanımı

Bu yazıda react native maps ve geolocation kullanımını anlatacağım. Harita için react-native-maps pluginini geolocation api içinde web özelliklerini kullanacağız (bkz). Haritadan başlayalım; terminal aracılığı ile plugini projemize kuralım.

 

Projeye plugini kurduk kullanmaya başlayabiliriz; öncelikle plugini import ediyoruz sonra map view i oluşturuyoruz.

 

 

Yukarıdaki kodda en temel kullanımı görüyoruz plugini import edilmiş render kısmında mapview oluşturulmuş ve iki tane temel parametre almış style stil için,  initialRegion da ilk açıldığında gösterilecek konum. initialRegion parametresini daha iyi incelersek 4 tane özellik var  latitude(enlem) X konumu longitude(boylam) Y konumu yazılmaktadır. Deltalar ise görünüm alanının yakınlığını ayarlar.

Uygulamamızda artık istediğimiz bir bölgeyi haritada gösterebiliyoruz şimdi haritada bir alanı nasıl pinleriz ona bakalım. Oldukça basit haritamızı belirliyoruz sonra içinde istediğimiz kadar istediğimiz stilde pin gösterebiliyoruz.

 

 

Pini gösterebilmek için MapiView.Marker kullandık pinlenecek yeri cordinate te obje ile belirledik diğer title ve description ise pine dokunulduğunda gözükecek bilgilerdir ve opsiyoneldir.

react native pinleme

Makalenin ilerleyen kısımlarında tekrar map marker a döneceğim şimdi geolocation a geçelim bu apinin 5 tane özelliği bulunmaktadır watchPosition vs. ben getCurrentPosition yani şuanki pozisyonu almamızı sağlayan özelliği anlatacağım.

 

 

Kullanım yukarıdaki gibi geolocation ın getCurrentPosition özelliği ile position objecisindeki x ve y datalarını bir değişkene kaydedip bir state time set ettim. Şimdi daha gelişmiş bir örnek yapalım haritamıza bir marker koyalım geolocation ile aldığımız datayla sonra foreach ile x y si olan json pinlerini de atalım marker imajlarını da değişik ayarlarız.

 

 

Mapi oluşturduk görünecek default pozisyonu ayarladık sonra içine 2 tane marker yazdık biri statik diğeri json dataya göre foreach ile yükleniyor.

react native dinamik marker

Notlar: Eğer android de geliştime yapıyorsanız aşağıdaki adımları gerçkleştirmeyi unutmayın yoksa adım başı hata alırsınız.

Yukarıdaki sdk larında yüklü olması gerekiyor.

Makaleyi özet geçmek gerekirse: react native maps ile belirlediğimiz konumda harita oluşturduk, haritanın üzerinde marker(pin) oluşturduk bu marker ların görüntüsünü değiştirdik, geolocation ile şuanki pozisyon datasını alıp marker olarak yerleştirdik son olarak ta foreach ile haritaya birden fazla marker yerleştirdik.

By Batuhan Akkaya
25 Temmuz 2017