React Native uygulaman\u0131za harita eklemek g\u00f6z\u00fcn\u00fczde b\u00fcy\u00fcyor mu? Konum takibi, i\u015faret\u00e7iler veya \u00f6zel harita stilleri gibi \u00f6zelliklerle u\u011fra\u015f\u0131rken zorlan\u0131yor musunuz? Bu kapsaml\u0131 rehberle ad\u0131m ad\u0131m haritalar\u0131 entegre etmeyi, \u00f6zelle\u015ftirmeyi ve performans sorunlar\u0131n\u0131 \u00e7\u00f6zmeyi \u00f6\u011frenin, b\u00f6ylece kullan\u0131c\u0131lar\u0131n\u0131za kusursuz bir deneyim sunabilirsiniz.<\/p>\n
Mobil uygulamalar, navigasyon, teslimat platformlar\u0131 veya sosyal a\u011flar gibi bir\u00e7ok alanda haritalar kritik bir rol oynar. Ancak, React Native gibi platformlar aras\u0131 bir \u00e7er\u00e7evede harita entegrasyonu, hem iOS hem de Android’in farkl\u0131 yerel harita API’leriyle (Google Maps ve Apple Maps) uyum sa\u011flamas\u0131 gerekti\u011fi i\u00e7in zorlay\u0131c\u0131 olabilir. Geli\u015ftiriciler genellikle API anahtarlar\u0131n\u0131n al\u0131nmas\u0131, izinlerin y\u00f6netilmesi, harita g\u00f6r\u00fcn\u00fcm\u00fcn\u00fcn \u00f6zelle\u015ftirilmesi ve b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken performans optimizasyonu gibi konularda \u00e7e\u015fitli engellerle kar\u015f\u0131la\u015fabilirler. Bu karma\u015f\u0131kl\u0131k, geli\u015ftirme s\u00fcrecini uzatabilir ve uygulaman\u0131n kalitesini d\u00fc\u015f\u00fcrebilir. Neyse ki, React Native toplulu\u011fu bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcmler sunuyor. Bu rehber, sizi bu engelleri a\u015fman\u0131z ve React Native uygulaman\u0131za sorunsuz bir \u015fekilde haritalar eklemeniz i\u00e7in ad\u0131m ad\u0131m y\u00f6nlendirecek. \u0130ster basit bir konum g\u00f6sterimi yap\u0131n, ister karma\u015f\u0131k navigasyon rotalar\u0131 \u00e7izin, buradaki bilgilerle harita tabanl\u0131 \u00f6zelliklerinizi bir \u00fcst seviyeye ta\u015f\u0131yabileceksiniz. Dolay\u0131s\u0131yla, art\u0131k haritalarla m\u00fccadele etmeyi b\u0131rak\u0131n ve bu rehberle React Native harita entegrasyonunun inceliklerini ke\u015ffedin.<\/p>\n
React Native’de haritalarla \u00e7al\u0131\u015fmaya ba\u015flamadan \u00f6nce, bu teknolojinin temel ta\u015flar\u0131n\u0131 anlamak \u00f6nemlidir. Mobil uygulamalarda haritalar genellikle Android i\u00e7in Google Haritalar ve iOS i\u00e7in Apple Haritalar taraf\u0131ndan desteklenir. React Native, platformlar aras\u0131 bir \u00e7er\u00e7eve oldu\u011fu i\u00e7in, bu iki farkl\u0131 yerel harita API’sini tek bir kod taban\u0131 \u00fczerinden y\u00f6netebilmek i\u00e7in \u00f6zel k\u00fct\u00fcphanelere ihtiya\u00e7 duyar. \u0130\u015fte tam da bu noktada, topluluk taraf\u0131ndan geli\u015ftirilen k\u00fct\u00fcphaneler devreye girer. Bu k\u00fct\u00fcphaneler, yerel harita bile\u015fenlerini React Native bile\u015fenleri gibi kullanmam\u0131z\u0131 sa\u011flayarak geli\u015ftirme s\u00fcrecini basitle\u015ftirir. Bu b\u00f6l\u00fcmde, harita entegrasyonu i\u00e7in en pop\u00fcler k\u00fct\u00fcphane olan React Native’de harita entegrasyonu denince akla gelen ilk ve en yayg\u0131n kullan\u0131lan k\u00fct\u00fcphane \u015f\u00fcphesiz Haritalar\u0131 uygulaman\u0131za entegre etmenin ilk ad\u0131m\u0131, ilgili harita servis sa\u011flay\u0131c\u0131lar\u0131ndan API anahtarlar\u0131 almakt\u0131r. Android i\u00e7in Google Haritalar SDK’s\u0131n\u0131 kullanmak \u00fczere Google Cloud Console \u00fczerinden bir API anahtar\u0131 olu\u015fturman\u0131z gerekir. Bu anahtar, uygulaman\u0131z\u0131n Google Haritalar hizmetlerine eri\u015fimini yetkilendirecektir. iOS i\u00e7in ise genellikle Apple Maps i\u00e7in \u00f6zel bir API anahtar\u0131 gerekmez; ancak, harita tabanl\u0131 konum hizmetleri i\u00e7in uygulaman\u0131z\u0131n konum izinlerini do\u011fru bir \u015fekilde talep etmesi ve y\u00f6netmesi \u00e7ok \u00f6nemlidir. Hem iOS hem de Android’de, kullan\u0131c\u0131n\u0131n konumuna eri\u015fmek i\u00e7in uygulaman\u0131z\u0131n manifest veya Info.plist dosyalar\u0131na belirli izinleri eklemeniz gerekir. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n mevcut konumunu harita \u00fczerinde g\u00f6stermek veya ger\u00e7ek zamanl\u0131 konum takibi yapmak istiyorsan\u0131z, React Native uygulaman\u0131za harita ekleme s\u00fcreci, do\u011fru ad\u0131mlar\u0131 izledi\u011finizde olduk\u00e7a basittir. \u00d6ncelikle, projenize \u0130lk olarak, projenizin k\u00f6k dizininde terminali a\u00e7\u0131n ve <\/code><\/p>\n Kurulum tamamland\u0131ktan sonra, \u00e7o\u011fu yeni React Native projesinde otomatik ba\u011flant\u0131 (autolinking) devreye girer. Ancak eski projelerde veya emin olmak i\u00e7in manuel ba\u011flant\u0131 gerekebilir:<\/p>\n <\/code><\/p>\n Bu ad\u0131mlar, k\u00fct\u00fcphanenin JavaScript taraf\u0131n\u0131 ve yerel bile\u015fenlerini projenize ekler. As\u0131l i\u015fleme platforma \u00f6zg\u00fc yap\u0131land\u0131rmalarla ba\u015flar\u0131z. \u00d6zellikle Google Haritalar kullanacaksan\u0131z, Google Cloud Console'dan ald\u0131\u011f\u0131n\u0131z API anahtar\u0131n\u0131 hem Android hem de iOS projenize eklemeniz gerekecektir. Bu entegrasyon, harita hizmetlerinin d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131 i\u00e7in zorunludur ve genellikle birka\u00e7 k\u00fc\u00e7\u00fck, ama kritik dosyada de\u011fi\u015fiklik yapmay\u0131 gerektirir. Do\u011fru ad\u0131mlar\u0131 izlemek, uygulaman\u0131z\u0131n haritalar\u0131 h\u0131zl\u0131 ve verimli bir \u015fekilde y\u00fcklemesine yard\u0131mc\u0131 olurken, ayn\u0131 zamanda olas\u0131 hatalar\u0131 ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 da \u00f6nleyecektir.<\/p>\n Android i\u00e7in Google Haritalar API anahtar\u0131n\u0131z\u0131 <\/code><\/p>\n Konum eri\u015fimi i\u00e7in <\/code><\/p>\n Projenizin <\/code><\/p>\n iOS i\u00e7in Apple Haritalar varsay\u0131lan olarak kullan\u0131l\u0131r. Konum izinlerini <\/code><\/p>\n Google Haritalar kullanmak isterseniz, Uygulaman\u0131za temel bir harita entegre ettikten sonra, haritay\u0131 interaktif hale getirmek ve ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirmek \u00f6nem kazan\u0131r. Harita \u00fczerindeki belirli noktalar\u0131 belirtmek i\u00e7in genellikle marker'lar kullan\u0131l\u0131r. Bir marker eklemek olduk\u00e7a basittir. <\/code><\/p>\n G\u00f6rsel betimleme olarak, bir harita \u00fczerinde k\u0131rm\u0131z\u0131 bir i\u011fne (pin) ile i\u015faretlenmi\u015f \"Buraday\u0131m!\" yazan bir marker ve \u00fczerine t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan, i\u00e7inde \"Merhaba D\u00fcnyal\u0131!\" yazan k\u00fc\u00e7\u00fck bir beyaz kutu d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n Haritan\u0131z\u0131n g\u00f6rsel esteti\u011fi, uygulaman\u0131z\u0131n genel kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir. Bir teslimat firmas\u0131, s\u00fcr\u00fcc\u00fclerinin en k\u0131sa ve en verimli rotalar\u0131 takip etmesini sa\u011flamak amac\u0131yla mobil uygulamas\u0131na dinamik rota \u00e7izim \u00f6zelli\u011fi eklemek istedi. Problem, birden fazla teslimat noktas\u0131n\u0131 harita \u00fczerinde g\u00f6stermek ve s\u00fcr\u00fcc\u00fcn\u00fcn mevcut konumu ile bir sonraki teslimat noktas\u0131 aras\u0131ndaki en uygun rotay\u0131 anl\u0131k olarak \u00e7izmekti. Bu senaryoda B\u00fcy\u00fck ve karma\u015f\u0131k harita tabanl\u0131 uygulamalar geli\u015ftirirken, performans ve kullan\u0131c\u0131 etkile\u015fimi, uygulaman\u0131z\u0131n ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6neme sahiptir. \u00c7ok say\u0131da marker, poligon veya s\u00fcrekli konum g\u00fcncellemeleri, uygulaman\u0131n yava\u015flamas\u0131na, tak\u0131lmas\u0131na veya pil \u00f6mr\u00fcn\u00fc h\u0131zla t\u00fcketmesine neden olabilir. Bu durum, \u00f6zellikle d\u00fc\u015f\u00fck \u00f6zellikli cihazlarda kullan\u0131c\u0131 deneyimini olumsuz etkiler. Bu b\u00f6l\u00fcmde, Harita bile\u015fenleri, \u00f6zellikle \u00e7ok say\u0131da interaktif \u00f6\u011fe i\u00e7erdi\u011finde performans darbo\u011fazlar\u0131na neden olabilir. Bunu a\u015fmak i\u00e7in \u00e7e\u015fitli optimizasyon teknikleri mevcuttur. \u0130lk olarak, Harita \u00fczerindeki kullan\u0131c\u0131 etkile\u015fimlerini (t\u0131klamalar, s\u00fcr\u00fcklemeler, yak\u0131nla\u015ft\u0131rmalar) do\u011fru bir \u015fekilde y\u00f6netmek, interaktif bir kullan\u0131c\u0131 deneyimi i\u00e7in elzemdir. Bir turizm uygulamas\u0131, d\u00fcnya genelindeki y\u00fcz binlerce ilgi \u00e7ekici noktay\u0131 harita \u00fczerinde g\u00f6stermek istiyordu. Uygulama ilk ba\u015flarda, ayn\u0131 anda binlerce marker'\u0131 render etmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in ciddi performans sorunlar\u0131 ya\u015f\u0131yordu: harita donuyor, zoom i\u015flemleri \u00e7ok yava\u015f ger\u00e7ekle\u015fiyordu. Bu sorunu \u00e7\u00f6zmek i\u00e7in marker k\u00fcmelenmesi (marker clustering) y\u00f6ntemi uyguland\u0131. react-native-maps<\/code>‘i tan\u0131yacak ve haritalar\u0131 uygulaman\u0131za eklemek i\u00e7in gerekli olan API anahtarlar\u0131 ve izinler gibi temel kavramlar\u0131 inceleyece\u011fiz. Bu, sadece bir harita g\u00f6r\u00fcnt\u00fcs\u00fc g\u00f6stermekten \u00e7ok daha fazlas\u0131n\u0131 ba\u015farabilmenizi sa\u011flayacak g\u00fc\u00e7l\u00fc bir temel olu\u015fturacakt\u0131r.<\/p>\nReact Native Harita Entegrasyonu \u0130\u00e7in Hangi K\u00fct\u00fcphaneyi Se\u00e7melisiniz?<\/h3>\n
react-native-maps<\/code><\/a>‘tir. Bu k\u00fct\u00fcphane, Google Haritalar ve Apple Haritalar’\u0131n yerel harita g\u00f6r\u00fcn\u00fcmlerini do\u011frudan React Native uygulamalar\u0131n\u0131za entegre etmenizi sa\u011flar. Bu sayede, platforma \u00f6zel kod yazma ihtiyac\u0131n\u0131 minimuma indirerek tek bir kod taban\u0131yla her iki platformda da sorunsuz bir harita deneyimi sunabilirsiniz. K\u00fct\u00fcphane, marker’lar (i\u015faret\u00e7iler), poligonlar, polilinler, daireler gibi \u00e7e\u015fitli harita katmanlar\u0131n\u0131 destekler ve harita g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc yak\u0131nla\u015ft\u0131rma, kayd\u0131rma, d\u00f6nd\u00fcrme gibi kullan\u0131c\u0131 etkile\u015fimlerini kolayca y\u00f6netmenize olanak tan\u0131r. Ayr\u0131ca, harita stillerini \u00f6zelle\u015ftirmek, belirli bir b\u00f6lgeyi g\u00f6stermek veya kullan\u0131c\u0131n\u0131n mevcut konumunu takip etmek gibi geli\u015fmi\u015f \u00f6zellikler i\u00e7in de geni\u015f bir API sunar. Alternatif olarak Mapbox gibi di\u011fer harita sa\u011flay\u0131c\u0131lar\u0131n\u0131n React Native SDK’lar\u0131 da bulunsa da, react-native-maps<\/code> sundu\u011fu esneklik ve geni\u015f topluluk deste\u011fi nedeniyle \u00e7o\u011fu proje i\u00e7in varsay\u0131lan tercih haline gelmi\u015ftir. Bu k\u00fct\u00fcphane, sadece harita g\u00f6stermekle kalmaz, ayn\u0131 zamanda rota \u00e7izme, co\u011frafi \u00e7it (geofencing) olu\u015fturma ve karma\u015f\u0131k konum tabanl\u0131 algoritmalar geli\u015ftirme gibi ileri d\u00fczey senaryolar i\u00e7in de sa\u011flam bir temel sunar.<\/p>\nAPI Anahtarlar\u0131 ve Gerekli \u0130zinler Nas\u0131l Al\u0131n\u0131r?<\/h3>\n
ACCESS_FINE_LOCATION<\/code> (Android) ve NSLocationWhenInUseUsageDescription<\/code> (iOS) gibi izinleri istemelisiniz. Bu izinleri eklerken, kullan\u0131c\u0131lara neden konum bilgilerine ihtiya\u00e7 duydu\u011funuzu a\u00e7\u0131klayan bilgilendirici mesajlar eklemek, kullan\u0131c\u0131 g\u00fcvenini art\u0131r\u0131r ve izin reddi oranlar\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr. \u0130zinler olmadan, harita bile\u015feni do\u011fru \u015fekilde \u00e7al\u0131\u015fmayacak veya kullan\u0131c\u0131n\u0131n konumunu g\u00f6steremeyecektir. Dolay\u0131s\u0131yla, API anahtarlar\u0131n\u0131 do\u011fru yap\u0131land\u0131rmak ve gerekli izinleri kullan\u0131c\u0131 dostu bir \u015fekilde istemek, ba\u015far\u0131l\u0131 bir harita entegrasyonunun temelini olu\u015fturur. Bu ad\u0131mlar, uygulaman\u0131z\u0131n yasal ve teknik gerekliliklere uygun olmas\u0131n\u0131 da sa\u011flar.<\/p>\nAd\u0131m Ad\u0131m Kurulum: React Native Uygulaman\u0131za Harita Nas\u0131l Eklenir?<\/h2>\n
react-native-maps<\/code> k\u00fct\u00fcphanesini entegre etmeniz gerekir. Bu entegrasyon, platforma \u00f6zg\u00fc baz\u0131 yap\u0131land\u0131rmalar i\u00e7erir ve hem iOS hem de Android geli\u015ftirme ortamlar\u0131 i\u00e7in dikkatli bir \u015fekilde uygulanmal\u0131d\u0131r. Bu b\u00f6l\u00fcmde, k\u00fct\u00fcphanenin nas\u0131l kurulaca\u011f\u0131n\u0131, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131n nas\u0131l eklenece\u011fini ve her iki platform i\u00e7in de API anahtarlar\u0131n\u0131n ve izinlerin nas\u0131l ayarlanaca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. Bu ad\u0131mlar, uygulaman\u0131z\u0131n sorunsuz bir \u015fekilde haritalar\u0131 g\u00f6r\u00fcnt\u00fcleyebilmesi ve kullan\u0131c\u0131n\u0131n konum verilerine eri\u015febilmesi i\u00e7in kritik \u00f6neme sahiptir. Modern React Native projelerinde otomatik ba\u011flant\u0131 (autolinking) \u00e7o\u011fu kurulumu basitle\u015ftirse de, haritalar gibi yerel ba\u011f\u0131ml\u0131l\u0131klar\u0131 olan k\u00fct\u00fcphanelerde manuel ad\u0131mlar hala gerekebilir. Bu ad\u0131mlar\u0131 dikkatlice takip ederek, projenizin harita bile\u015fenini ba\u015far\u0131yla \u00e7al\u0131\u015f\u0131r hale getirebilir ve bir sonraki ad\u0131ma, yani harita \u00f6zelliklerini ve \u00f6zelle\u015ftirmelerini ke\u015ffetmeye haz\u0131r olabilirsiniz.<\/p>\nProjeye
react-native-maps<\/code> K\u00fct\u00fcphanesini Entegre Etme<\/h3>\nreact-native-maps<\/code> k\u00fct\u00fcphanesini NPM veya Yarn kullanarak kurun:<\/p>\n\nnpm install react-native-maps --save\n# veya\nyarn add react-native-maps\n <\/pre>\n\nnpx react-native link react-native-maps\n <\/pre>\niOS ve Android Platformlar\u0131 \u0130\u00e7in Konfig\u00fcrasyon Ayarlar\u0131<\/h3>\n
Android Konfig\u00fcrasyonu:<\/h4>\n
android\/app\/src\/main\/AndroidManifest.xml<\/code> dosyan\u0131zdaki \nAndroidManifest.xml<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki izinleri ekleyin (e\u011fer kullan\u0131c\u0131 konumuna eri\u015fmek istiyorsan\u0131z):<\/p>\n\nandroid\/build.gradle<\/code> dosyas\u0131nda Google Play Services ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 kontrol edin:<\/p>\n\nbuildscript {\n ext {\n \/\/ ...\n googlePlayServicesVersion = \"18.1.0\" \/\/ veya daha g\u00fcncel versiyon\n }\n dependencies {\n \/\/ ...\n classpath 'com.google.gms:google-services:4.3.10' \/\/ veya daha g\u00fcncel versiyon\n }\n}\n <\/pre>\niOS Konfig\u00fcrasyonu:<\/h4>\n
ios\/YourProjectName\/Info.plist<\/code> dosyan\u0131za eklemeniz \u00f6nemlidir:<\/p>\n\nPodfile<\/code> i\u00e7ine GoogleMaps<\/code> podunu ekleyip cd ios && pod install<\/code> komutunu \u00e7al\u0131\u015ft\u0131rman\u0131z ve API anahtar\u0131n\u0131z\u0131 uygulaman\u0131z\u0131n ba\u015flat\u0131lmas\u0131 s\u0131ras\u0131nda ayarlaman\u0131z gerekir.<\/p>\nHarita \u00d6zellikleri ve \u00d6zelle\u015ftirmeler: Marker'lar, Poligonlar ve Daha Fazlas\u0131 Nas\u0131l Y\u00f6netilir?<\/h2>\n
react-native-maps<\/code> k\u00fct\u00fcphanesi, harita \u00fczerinde \u00e7e\u015fitli \u00f6\u011feler (markers, polylines, polygons, circles) eklemenize ve dinamik olarak y\u00f6netmenize olanak tan\u0131r. Bu \u00f6zellikler, bir restoran bulma uygulamas\u0131nda mekanlar\u0131 i\u015faretlemekten, bir teslimat uygulamas\u0131nda rotalar\u0131 \u00e7izmeye veya co\u011frafi s\u0131n\u0131rlar belirlemeye kadar geni\u015f bir kullan\u0131m alan\u0131na sahiptir. Marker'lar, belirli konumlar\u0131 vurgulamak i\u00e7in kullan\u0131l\u0131rken, polilinler iki veya daha fazla nokta aras\u0131ndaki yollar\u0131 g\u00f6stermek i\u00e7in idealdir. Poligonlar ise belirli bir alan\u0131 kapsamak veya b\u00f6lgeleri g\u00f6rselle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Harita g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, yak\u0131nla\u015ft\u0131rma seviyesini ve hatta haritan\u0131n temas\u0131n\u0131 (stilini) de\u011fi\u015ftirmek de m\u00fcmk\u00fcnd\u00fcr. Bu \u00f6zelle\u015ftirmeler, uygulaman\u0131z\u0131n kullan\u0131c\u0131 deneyimini zenginle\u015ftirerek daha bilgilendirici ve etkile\u015fimli hale gelmesini sa\u011flar. Bu b\u00f6l\u00fcmde, bu \u00f6zelliklerin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla peki\u015ftirece\u011fiz.<\/p>\nKonum \u0130\u015faret\u00e7ileri (Markers) ve Bilgi Pencereleri (Callouts) Eklemek<\/h3>\n
MapView<\/code> bile\u015feni i\u00e7ine MapView.Marker<\/code> bile\u015fenini yerle\u015ftirmeniz yeterlidir. Her marker'\u0131n, \u00fczerinde durdu\u011fu konumu belirten bir coordinate<\/code> \u00f6zelli\u011fi olmal\u0131d\u0131r. Ayr\u0131ca, marker'a bir ba\u015fl\u0131k (title<\/code>) ve a\u00e7\u0131klama (description<\/code>) ekleyebilir, hatta kendi \u00f6zel simgenizi (image<\/code>) kullanabilirsiniz. Marker'lara t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan bilgi pencereleri (Callouts), kullan\u0131c\u0131lara i\u015faretlenen nokta hakk\u0131nda ek bilgiler sunar. Bu pencereleri de tamamen \u00f6zelle\u015ftirebilir, React Native bile\u015fenleri ile zengin i\u00e7erikler olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir teslimat uygulamas\u0131nda, teslimat noktalar\u0131n\u0131 i\u015faretlemek ve her bir marker'a t\u0131kland\u0131\u011f\u0131nda paketin durumu gibi bilgileri g\u00f6steren bir pencere a\u00e7mak isteyebilirsiniz. A\u015fa\u011f\u0131daki \u00f6rnek, temel bir marker'\u0131n nas\u0131l eklenece\u011fini g\u00f6stermektedir:<\/p>\n\nimport React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport MapView, { Marker, Callout } from 'react-native-maps';\n\nconst App = () => {\n const initialRegion = {\n latitude: 37.78825,\n longitude: -122.4324,\n latitudeDelta: 0.0922,\n longitudeDelta: 0.0421,\n };\n\n return (\n Harita Stillerini ve B\u00f6lgesel G\u00f6r\u00fcn\u00fcm\u00fc \u00d6zelle\u015ftirmek<\/h3>\n
react-native-maps<\/code>, harita stillerini kolayca \u00f6zelle\u015ftirmenize olanak tan\u0131r. Google Haritalar i\u00e7in, Google Cloud Console'da \u00f6zel bir harita stili olu\u015fturabilir ve bu stili bir JSON nesnesi olarak uygulaman\u0131za aktarabilirsiniz. Apple Haritalar i\u00e7in ise harita t\u00fcr\u00fcn\u00fc (standart, uydu, karma vb.) de\u011fi\u015ftirerek veya tintColor<\/code> gibi \u00f6zelliklerle basit \u00f6zelle\u015ftirmeler yapabilirsiniz. Ayr\u0131ca, haritan\u0131n ba\u015flang\u0131\u00e7taki g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirlemek i\u00e7in initialRegion<\/code> veya region<\/code> \u00f6zelliklerini kullanabilirsiniz. Bu \u00f6zellikler, haritan\u0131n hangi enlem\/boylamda ortalanaca\u011f\u0131n\u0131 ve ne kadar geni\u015f bir alan\u0131 g\u00f6sterece\u011fini belirleyen latitudeDelta<\/code> ve longitudeDelta<\/code> de\u011ferlerini i\u00e7erir. Belirli bir alana odaklanmak veya kullan\u0131c\u0131n\u0131n mevcut konumunu otomatik olarak ortalamak i\u00e7in bu \u00f6zellikler olduk\u00e7a i\u015flevseldir. \u00d6rne\u011fin, bir emlak uygulamas\u0131nda, kullan\u0131c\u0131lar\u0131n arama yapt\u0131klar\u0131 b\u00f6lgeyi do\u011frudan harita \u00fczerinde g\u00f6stermek i\u00e7in b\u00f6lgesel g\u00f6r\u00fcn\u00fcm\u00fc dinamik olarak ayarlayabilirsiniz. Bu sayede, uygulaman\u0131z daha ki\u015fiselle\u015ftirilmi\u015f bir deneyim sunar.<\/p>\nVaka Analizi: Bir Teslimat Uygulamas\u0131 \u0130\u00e7in Dinamik Yol \u00c7izimi<\/h4>\n
react-native-maps<\/code> k\u00fct\u00fcphanesi, MapView.Polyline<\/code> bile\u015feni ile kullan\u0131ld\u0131. Her bir teslimat noktas\u0131 MapView.Marker<\/code> olarak i\u015faretlendi. S\u00fcr\u00fcc\u00fcn\u00fcn GPS konum verileri (react-native-geolocation-service<\/code> ile) s\u00fcrekli al\u0131narak, mevcut konum ve bir sonraki hedef aras\u0131ndaki koordinatlar bir rota \u00e7izme API'sine (\u00f6rne\u011fin, Google Directions API) g\u00f6nderildi. API'den d\u00f6nen rota verileri daha sonra MapView.Polyline<\/code> bile\u015feni kullan\u0131larak harita \u00fczerine \u00e7izildi. Rotan\u0131n rengi ve geni\u015fli\u011fi, s\u00fcr\u00fcc\u00fcn\u00fcn kolayca g\u00f6rebilece\u011fi \u015fekilde \u00f6zelle\u015ftirildi. Bu dinamik yakla\u015f\u0131m, s\u00fcr\u00fcc\u00fclerin trafik durumuna g\u00f6re anl\u0131k rota de\u011fi\u015fikliklerini g\u00f6rmelerini sa\u011flad\u0131 ve teslimat verimlili\u011fini %15 art\u0131rarak yak\u0131t maliyetlerinde tasarruf sa\u011flad\u0131.<\/p>\n<\/p><\/div>\nGeli\u015fmi\u015f Harita Kullan\u0131m\u0131: Performans ve Etkile\u015fim Nas\u0131l Optimize Edilir?<\/h2>\n
react-native-maps<\/code> ile harita performans\u0131n\u0131 nas\u0131l optimize edebilece\u011finizi, gereksiz yeniden render'lar\u0131 nas\u0131l \u00f6nleyebilece\u011finizi ve kullan\u0131c\u0131n\u0131n harita ile olan etkile\u015fimlerini (t\u0131klamalar, s\u00fcr\u00fcklemeler, yak\u0131nla\u015ft\u0131rmalar) nas\u0131l verimli bir \u015fekilde y\u00f6netebilece\u011finizi inceleyece\u011fiz. Ak\u0131ll\u0131 bile\u015fen yap\u0131s\u0131, veri y\u00f6netimi stratejileri ve platforma \u00f6zg\u00fc optimizasyon teknikleri kullanarak, uygulaman\u0131z\u0131n harita \u00f6zelliklerinin h\u0131zl\u0131, ak\u0131c\u0131 ve duyarl\u0131 kalmas\u0131n\u0131 sa\u011flayabilirsiniz. Ayr\u0131ca, harita \u00fczerinde \u00e7ok say\u0131da veri g\u00f6sterirken kar\u015f\u0131la\u015f\u0131lan \"marker k\u00fcmelenmesi\" gibi yayg\u0131n sorunlara y\u00f6nelik \u00e7\u00f6z\u00fcmler de sunaca\u011f\u0131z. Bu ipu\u00e7lar\u0131 ve teknikler, uygulaman\u0131z\u0131n sadece \u00e7al\u0131\u015fmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131lar taraf\u0131ndan keyifle kullan\u0131lmas\u0131n\u0131 da sa\u011flayacakt\u0131r.<\/p>\nPerformans Sorunlar\u0131n\u0131 Giderme: Render Optimizasyonlar\u0131<\/h3>\n
MapView.Marker<\/code> gibi bile\u015fenlerin gereksiz yere yeniden render olmas\u0131n\u0131 engellemek i\u00e7in React'in shouldComponentUpdate<\/code> veya fonksiyonel bile\u015fenlerde React.memo<\/code> ve useCallback<\/code> hook'lar\u0131n\u0131 kullanabilirsiniz. \u00d6rne\u011fin, yaln\u0131zca marker'\u0131n konumu de\u011fi\u015fti\u011finde yeniden render olmas\u0131n\u0131 sa\u011flayarak performans\u0131 art\u0131rabilirsiniz. \u0130kinci olarak, \u00e7ok say\u0131da marker'\u0131 ayn\u0131 anda haritada g\u00f6stermek yerine, \"marker k\u00fcmelenmesi\" (marker clustering) tekniklerini kullanmak, haritan\u0131n daha okunakl\u0131 ve h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar. Bu teknik, yak\u0131n konumdaki marker'lar\u0131 tek bir k\u00fcme halinde g\u00f6sterir ve kullan\u0131c\u0131 yak\u0131nla\u015ft\u0131rd\u0131\u011f\u0131nda k\u00fcmeyi a\u00e7arak detayl\u0131 marker'lar\u0131 ortaya \u00e7\u0131kar\u0131r. react-native-maps<\/code> ile uyumlu \u00e7al\u0131\u015fan \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphaneler (\u00f6rne\u011fin, react-native-maps-super-cluster<\/code>) bu konuda olduk\u00e7a yard\u0131mc\u0131d\u0131r. Son olarak, harita verilerini optimize etmek ve yaln\u0131zca ihtiya\u00e7 duyulan veriyi \u00e7ekmek de performans i\u00e7in kritik \u00f6neme sahiptir.<\/p>\nKullan\u0131c\u0131 Etkile\u015fimlerini Yakalama ve Y\u00f6netme (T\u0131klamalar, S\u00fcr\u00fcklemeler)<\/h3>\n
react-native-maps<\/code> k\u00fct\u00fcphanesi, bu etkile\u015fimleri yakalamak i\u00e7in \u00e7e\u015fitli olay i\u015fleyicileri (event handlers) sunar. \u00d6rne\u011fin, onPress<\/code> \u00f6zelli\u011fi ile haritan\u0131n herhangi bir yerine t\u0131kland\u0131\u011f\u0131nda tetiklenecek bir fonksiyon tan\u0131mlayabilirsiniz. Marker'lar i\u00e7in de kendi onPress<\/code> olaylar\u0131 bulunur, b\u00f6ylece belirli bir markere t\u0131kland\u0131\u011f\u0131nda \u00f6zel i\u015flemler ger\u00e7ekle\u015ftirebilirsiniz. Marker'lar\u0131n s\u00fcr\u00fcklenip b\u0131rak\u0131lmas\u0131na izin vermek i\u00e7in draggable<\/code> \u00f6zelli\u011fini true<\/code> olarak ayarlayabilir ve onDragEnd<\/code> olay\u0131 ile marker'\u0131n yeni konumunu alabilirsiniz. Harita b\u00f6lgesi de\u011fi\u015fti\u011finde (yak\u0131nla\u015ft\u0131rma veya kayd\u0131rma sonucu) tetiklenen onRegionChangeComplete<\/code> gibi olaylar, uygulaman\u0131z\u0131n harita \u00fczerindeki g\u00fcncel g\u00f6r\u00fcn\u00fcm\u00fc dinamik olarak izlemesine olanak tan\u0131r. Bu sayede, kullan\u0131c\u0131 belirli bir b\u00f6lgeye yak\u0131nla\u015ft\u0131\u011f\u0131nda o b\u00f6lgedeki yeni verileri y\u00fckleyebilir veya kullan\u0131c\u0131 arama kutusunu harita g\u00f6r\u00fcn\u00fcm\u00fcne g\u00f6re g\u00fcncelleyebilir. Bu olay i\u015fleyicileri, uygulaman\u0131z\u0131n harita ile kullan\u0131c\u0131 aras\u0131ndaki dinamik ba\u011f\u0131 kurmas\u0131n\u0131 sa\u011flar ve uygulaman\u0131za ger\u00e7ekten \"canl\u0131\" bir his katar.<\/p>\nVaka Analizi: B\u00fcy\u00fck Veri Setleriyle \u00c7al\u0131\u015f\u0131rken Harita Performans\u0131 Nas\u0131l Korunur?<\/h4>\n
react-native-maps-super-cluster<\/code><\/a> k\u00fct\u00fcphanesi entegre edildi. Bu k\u00fct\u00fcphane, harita \u00fczerindeki g\u00f6r\u00fcn\u00fcm alan\u0131na g\u00f6re yak\u0131n konumdaki marker'lar\u0131 otomatik olarak bir araya getirip tek bir k\u00fcme marker'\u0131 olarak g\u00f6sterdi. Kullan\u0131c\u0131 haritay\u0131 yak\u0131nla\u015ft\u0131rd\u0131\u011f\u0131nda, k\u00fcmeler ayr\u0131larak detayl\u0131 marker'lar\u0131 ortaya \u00e7\u0131kard\u0131. Ayr\u0131ca, uygulaman\u0131n yaln\u0131zca g\u00f6r\u00fcn\u00fcr durumdaki marker'lar\u0131 render etmesini sa\u011flayan bir optimizasyon da yap\u0131ld\u0131. Veri \u00e7ekme i\u015flemleri de, sadece kullan\u0131c\u0131n\u0131n mevcut harita g\u00f6r\u00fcn\u00fcm\u00fcndeki noktalar\u0131 getirecek \u015fekilde optimize edildi (lazy loading). Bu optimizasyonlar sayesinde, uygulama performans\u0131 g\u00f6zle g\u00f6r\u00fcl\u00fcr \u015fekilde iyile\u015fti. Y\u00fcz binlerce nokta bile harita \u00fczerinde ak\u0131c\u0131 bir \u015fekilde y\u00f6netilebildi, kullan\u0131c\u0131lar herhangi bir donma veya yava\u015flama ya\u015famadan d\u00fcnya genelindeki ilgi \u00e7ekici noktalar\u0131 ke\u015ffedebildiler. Bu vaka, b\u00fcy\u00fck veri setleriyle harita entegrasyonunda performans optimizasyonunun ne kadar kritik oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<\/p><\/div>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: Konum Takibi ve Co\u011frafi B\u00f6lge Tan\u0131ma Nas\u0131l Uygulan\u0131r?<\/h2>\n