React Native
Marker
Marker ile konum işaretleme öğrenirsin.
Marker
Marker haritada belirli bir koordinata imleç (pin) koyar. Bileşenin coordinate prop'u imlecin yerini belirler; bu prop bir nesne alır: { latitude, longitude }. Marker, bir MapView içinde yer almalıdır.
Örnek: <MapView><Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} /></MapView>. Bu, İstanbul'a bir imleç koyar. Marker'a title ve description prop'ları da verilebilir; kullanıcı imlece dokununca bir balon açılır ve bu metinler gösterilir. Birden çok Marker kullanarak birden çok noktayı işaretleyebilirsin.
title ve description
Bir Marker'a title ve description prop'ları verebilirsin. Kullanıcı imlece dokununca bir balon açılır; balonun başlığında title, alt başlığında description gösterilir. Bu, kullanıcının imlecin neyi temsil ettiğini anlamasını sağlar.
Örnek: <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="İstanbul" description="Tarihi yarımada" />. Birden çok imleç olduğunda her birine anlamlı başlık vermek haritayı okunur kılar. title balonun ana metni, description ise ikincil açıklamasıdır. Bu prop'lar isteğe bağlıdır; ancak gerçek uygulamalarda her zaman kullanılır.
Uygulama İstanbul'a imleç koy
Boş App bileşenini tamamla. <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}}> aç. İçine <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="İstanbul" /> ekle. MapView'i kapat.
Örnek çözümü göster
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
>
<Marker
coordinate={{ latitude: 41.0082, longitude: 28.9784 }}
title="İstanbul"
/>
</MapView>
);
Kendini test et
-
coordinate prop'unu yaz
<Marker ____={{ latitude: 41.0, longitude: 28.9 }} />
Cevabı göster
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }} />
-
Marker'ın coordinate prop'u ne alır?
<Marker coordinate={???} />
- Bir dize adres
- Bir sayı: yalnız latitude
- Bir nesne: latitude ve longutude
- Bir dizi: koordinat listesi
Cevabı göster
Bir nesne: latitude ve longutude — coordinate bir nesne alır; latitude ve longutude taşır.
-
Prop'u amacına eşle
- coordinate
- İmlecin yeri
- title
- Balon başlığı
- description
- Balon açıklaması
- MapView
- Harita kabı
Sıradaki ders: onRegionChange
