react-native-maps - Mapy

Wyświetlaj interaktywne mapy w aplikacji!

Instalacja

npx expo install react-native-maps

Podstawowa mapa

import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

function AtlantisMap() {
  const initialRegion = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  };

  return (
    <MapView
      style={{ flex: 1 }}
      provider={PROVIDER_GOOGLE}
      initialRegion={initialRegion}
      showsUserLocation
      showsMyLocationButton
    >
      <Marker
        coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        title="Pałac Posejdona"
        description="Siedziba władcy mórz"
      />
    </MapView>
  );
}

Markery i callout

import { Marker, Callout } from 'react-native-maps';

const locations = [
  { id: '1', lat: 37.78, lng: -122.43, title: 'Świątynia Neptuna' },
  { id: '2', lat: 37.79, lng: -122.42, title: 'Arena Trytonów' },
];

function MarkersMap() {
  return (
    <MapView style={{ flex: 1 }}>
      {locations.map((loc) => (
        <Marker
          key={loc.id}
          coordinate={{ latitude: loc.lat, longitude: loc.lng }}
        >
          <Callout>
            <View style={styles.callout}>
              <Text style={styles.calloutTitle}>{loc.title}</Text>
              <Pressable onPress={() => navigateTo(loc.id)}>
                <Text>Szczegóły</Text>
              </Pressable>
            </View>
          </Callout>
        </Marker>
      ))}
    </MapView>
  );
}

Polyline i Polygon

import { Polyline, Polygon } from 'react-native-maps';

// Trasa
<Polyline
  coordinates={[
    { latitude: 37.78, longitude: -122.43 },
    { latitude: 37.79, longitude: -122.42 },
    { latitude: 37.80, longitude: -122.41 },
  ]}
  strokeColor="#1a5276"
  strokeWidth={3}
/>

// Obszar
<Polygon
  coordinates={[...]}
  fillColor="rgba(26, 82, 118, 0.3)"
  strokeColor="#1a5276"
/>

import React from 'react';
import { StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const locations = [
  { id: '1', latitude: 37.785, longitude: -122.432, title: 'Świątynia Posejdona' },
  { id: '2', latitude: 37.790, longitude: -122.425, title: 'Arena Trytonów' },
  { id: '3', latitude: 37.788, longitude: -122.420, title: 'Targ Pereł' },
];

export default function App() {
  return (
    <MapView
      style={styles.map}
      // TODO: dodaj prop showsUserLocation, aby pokazać pozycję gracza
      initialRegion={{
        latitude: 37.788,
        longitude: -122.426,
        // TODO: uzupełnij latitudeDelta i longitudeDelta (np. 0.02), aby ustawić zoom
      }}
    >
      {/* TODO: przejdź przez tablicę locations metodą .map() i zwróć <Marker> dla każdej lokacji */}
      {/* Każdy Marker potrzebuje: key={loc.id}, coordinate={{ latitude, longitude }} oraz title={loc.title} */}

    </MapView>
  );
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});