React Native
MapView
MapView bileşeni ve initialRegion öğrenirsin.
MapView ve initialRegion
MapView haritayı ekranda gösterir. Bileşenin initialRegion prop'u haritanın açılış konumunu belirler. Bu prop bir nesne alır; latitude, longitude, latitudeDelta ve longitudeDelta alanları taşır. İlk ikisi merkezi, son ikisi yakınlaştırma seviyesini belirler.
Örnek: <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} />. Bu, İstanbul merkezli bir harita açar. latitudeDelta ve longitudeDelta ne kadar küçükse yakınlaştırma o kadar yüksek olur. style prop'u haritanın ekran boyutunu ayarlar; flex: 1 tüm ekranı kaplar.
Delta ve yakınlaştırma
latitudeDelta ve longitudeDelta haritanın yakınlaştırma seviyesini belirler. Delta küçüldükçe yakınlaştırma artar; daha dar bir alan görünür. Örneğin 0.05 şehir merkezini, 0.5 tüm şehri, 5 ülkeyi gösterebilir.
Haritada kullanıcı kaydırdığında region değişir; ancak initialRegion yalnızca ilk açılışta kullanılır. Kullanıcının kaydırmasını izlemek için onRegionChange prop kullanılır. Bu prop bir işlev alır; her bölge değişiminde çağrılır. Bölge bilgisi parametre olarak gelir. Bu derste delta kavramını; sonraki derste onRegionChange'i göreceğiz.
Uygulama Haritayı İstanbul'da aç
Boş App bileşenini tamamla. <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} /> döndür.
Örnek çözümü göster
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
/>
);
Kendini test et
-
initialRegion prop'unu yaz
<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />
Cevabı göster
<MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />
-
latitudeDelta küçüldükçe ne olur?
latitudeDelta: 0.05 // karşılaştır: 0.5
- Uzaklaştırma artar
- Yakınlaştırma artar
- Harita döner
- Harita kaybolur
Cevabı göster
Yakınlaştırma artar — Delta küçüldükçe yakınlaştırma artar.
-
Alanı anlamına eşle
- latitude
- Merkez enlem
- longutude
- Merkez boylam
- latitudeDelta
- Yakınlaştırma
- initialRegion
- Açılış konumu
Sıradaki ders: Marker
