React Native
Custom marker
Özel marker tasarımını öğrenirsin.
Özel imleç
Varsayılan imleç kırmızı bir pindir. Kendi görünümünü kullanmak için Marker'a çocuk bileşen verirsin. Bu çocuk bir View, Image veya herhangi bir bileşen olabilir. Çocuk, imlecin görünümünü değiştirir.
Örnek: <Marker coordinate={{{ latitude: 41.0, longitude: 28.9 }}}><View style={{{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }}} /></Marker>. Bu, kırmızı bir daire imleç koyar. Çocuk bileşen stilleriyle istediğin görünümü yaratabilirsin; simge, daire, fotoğraf, animasyonlu şekil. Image ile özel bir simge de kullanabilirsin: source={{ uri: 'https://example.com/icon.png' }}.
Image ile simge
Bir Image çocuğu ile özel simge kullanabilirsin. Image'in source prop'u bir nesne alır: { uri: '...' } veya { require('...') }. Bu, marka logosu, kategori simgesi veya avatar gibi görselleri imleç olarak gösterir.
Örnek: <Marker coordinate={{{ latitude: 41.0, longitude: 28.9 }}}><Image source={{{ uri: 'https://example.com/icon.png' }}}} style={{{ width: 32, height: 32 }}} /></Marker>. Bu, belirtilen görseli imleç olarak gösterir. style ile görselin boyutunu ayarlarsın. Özel imleçler haritayı markanla kişiselleştirmenin güçlü bir yoludur; kafe, mağaza, etkinlik gibi kategorileri ayırt etmeyi sağlar.
Uygulama Özel daire imleç oluştur
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 }}}><View style={{{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }}} /></Marker> 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 }}>
<View style={{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }} />
</Marker>
</MapView>
);
Kendini test et
-
Marker çocuğunu yaz
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}>____</Marker>
Cevabı göster
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}><View style={{ width: 30, height: 30, backgroundColor: 'tomato' }} /></Marker>
-
Marker'a özel görünüm vermek için ne yapılır?
<Marker coordinate={...}>???</Marker>
- Bir çocuk bileşen verilir
- Yalnızca title prop verilir
- Yalnızca description prop verilir
- Harita yeniden yüklenir
Cevabı göster
Bir çocuk bileşen verilir — Marker'a çocuk bileşen verilerek özel görünüm oluşturulur.
-
Çocuğu amacına eşle
- View
- Renkli daire imleç
- Image
- Özel simge
- Text
- Metin imleç
- coordinate
- İmleç yeri
Sıradaki ders: Özet - Haritalar
