Özet - Haritalar

MapView, Marker ve onRegionChange'i birleştirerek bir harita uygulaması yazarsın.

Özet - Haritalar

Bu grupta react-native-maps paketini kurmayı, MapView ile harita göstermeyi, Marker ile imleç koymayı, onRegionChange ile bölge değişimini izlemeyi ve özel imleç oluşturmayı gördün. Bir harita uygulamasının çekirdeği bu beş parçadan oluşur.

Özette haritayı, imleci ve bölge izlemeyi tek bir uygulamada birleştireceğiz. Bu üç parça birlikte gerçek bir harita ekranı oluşturur. Şimdi bunları birleştirelim.

Uygulama Özet - İ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>
);

Uygulama Özet - Bölge değişimini izle

Boş App bileşenini tamamla. <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}} onRegionChange={(region) => console.log(region.latitude)} /> döndür.

Örnek çözümü göster

return (
  <MapView
    style={{ flex: 1 }}
    initialRegion={{
      latitude: 41.0082,
      longitude: 28.9784,
      latitudeDelta: 0.05,
      longitudeDelta: 0.05,
    }}
    onRegionChange={(region) => console.log(region.latitude)}
  />
);

Kendini test et

initialRegion prop'unu yaz

<MapView style={{ flex: 1 }} ____={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />

Cevabı göster

<MapView style={{ flex: 1 }} initialRegion={{ latitude: 41.0, longitude: 28.9, latitudeDelta: 0.05, longitudeDelta: 0.05 }} />

Akış parçasını rolüne eşle

MapView

Harita görünümü
Marker

İmleç koyar
onRegionChange

Bölge izler
initialRegion

Açılış konumu

Sıradaki ders: NetInfo

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler