Marker
- React Native kursu
- İleri seviye
- Ders 27/83
- 5 dk
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.
Başlangıç kodu
import { MapView, Marker } from 'react-native-maps';
export default function App() {
// İstanbul'a imleç koy
return null;
}Örnek çözüm
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>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 coordinate prop'unu yaz
<Marker ____={{ latitude: 41.0, longitude: 28.9 }} /><Marker coordinate={{ latitude: 41.0, longitude: 28.9 }} />Açıklama: coordinate prop imlecin yerini alır.
2 Marker'ın coordinate prop'u ne alır?
<Marker coordinate={???} />- Bir dize adres
- Bir sayı: yalnız latitude
- Bir nesne: latitude ve longutude Doğru cevap
- Bir dizi: koordinat listesi
Açıklama: coordinate bir nesne alır; latitude ve longutude taşır.
3 Prop'u amacına eşle
| Kavram | Anlamı |
|---|---|
coordinate |
İmlecin yeri |
title |
Balon başlığı |
description |
Balon açıklaması |
MapView |
Harita kabı |