MapView
- React Native kursu
- İleri seviye
- Ders 26/83
- 5 dk
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.
Başlangıç kodu
import { MapView } from 'react-native-maps';
export default function App() {
// İstanbul merkezli haritayı döndür
return null;
}Örnek çözüm
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
/>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 initialRegion prop'unu yaz
<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} /><MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />Açıklama: initialRegion açılış konumunu belirler.
2 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 Doğru cevap
- Harita döner
- Harita kaybolur
Açıklama: Delta küçüldükçe yakınlaştırma artar.
3 Alanı anlamına eşle
| Kavram | Anlamı |
|---|---|
latitude |
Merkez enlem |
longutude |
Merkez boylam |
latitudeDelta |
Yakınlaştırma |
initialRegion |
Açılış konumu |