Custom marker
- React Native kursu
- İleri seviye
- Ders 29/83
- 5 dk
Ö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.
Başlangıç kodu
import { MapView, Marker } from 'react-native-maps';
import { View } from 'react-native';
export default function App() {
// özel daire imleç oluştur
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 }}>
<View style={{ width: 30, height: 30, backgroundColor: 'tomato', borderRadius: 15 }} />
</Marker>
</MapView>
);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Marker çocuğunu yaz
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}>____</Marker><Marker coordinate={{ latitude: 41.0, longitude: 28.9 }}><View style={{ width: 30, height: 30, backgroundColor: 'tomato' }} /></Marker>Açıklama: View çocuğu özel imleci çizer.
2 Marker'a özel görünüm vermek için ne yapılır?
<Marker coordinate={...}>???</Marker>- Bir çocuk bileşen verilir Doğru cevap
- Yalnızca title prop verilir
- Yalnızca description prop verilir
- Harita yeniden yüklenir
Açıklama: Marker'a çocuk bileşen verilerek özel görünüm oluşturulur.
3 Çocuğu amacına eşle
| Kavram | Anlamı |
|---|---|
View |
Renkli daire imleç |
Image |
Özel simge |
Text |
Metin imleç |
coordinate |
İmleç yeri |