Ενσωματώνοντας χάρτες και χαρακτηριστικά γεωεντοπισμού στην Αντιδραστική Native Apps

Άλλες Αξιοσημείωτες Βιβλιοθήκες

• αντιδρούν-native-google-places: Παρέχει αυτόματη συμπλήρωση και τοποθετεί λεπτομέρειες από το API του Google Places.
• react-native-mapbox-gl: Προσφορές προσαρμοσμένων στυλ χάρτη και εκτός σύνδεσης πλακιδίων (λιγότερο ενεργά συντηρημένα).
• αντιδραστικός-χάρτης-σούπερ-σλούστερ: Προσθέτει αποτελεσματική συσπείρωση δεικτών σε αντιδραστικούς-χάρτες.

Για λεπτομερή σύγκριση, ανατρέξτε στην επίσημη τεκμηρίωση των χαρτών για την αντιδραστική δράση και της υπηρεσίας για την αντιδραστική ενέργεια .

Χάρτες εφαρμογής στην εφαρμογή σας

Εγκατάσταση και ⁇

Ξεκινήστε εγκαθιστώντας τη βιβλιοθήκη και διαμορφώνοντας τις εξαρτήσεις της πλατφόρμας.

npm install react-native-maps
cd ios && pod install

Εάν χρησιμοποιείτε χάρτες Google στο Android, προσθέστε το πλήκτρο API σας στο :

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

Για iOS με Google Maps, προσθέστε το ίδιο κλειδί σε ή . Εναλλακτικά, οι Apple Maps λειτουργούν έξω από το κουτί χωρίς κανένα κλειδί API.

Βασικό συστατικό χάρτη

Το βασικό συστατικό είναι , το οποίο δέχεται ένα στήριγμα για τον καθορισμό της αρχικής ορατής περιοχής:

import MapView from 'react-native-maps';

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

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

Οι και ελέγχουν το επίπεδο εστίασης. Μεγαλύτερες τιμές δείχνουν μια ευρύτερη περιοχή.

Προσθήκη δεικτών και κλήσεων

Οι δείκτες εντοπίζουν τις τοποθεσίες στο χάρτη. Μπορούν να περιλαμβάνουν έναν τίτλο και περιγραφή, που εμφανίζεται ως κλήση όταν ενεργοποιηθεί:

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

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

Προσαρμοσμένοι δείκτες και συσσωμάτωση

Αντικατάσταση της προεπιλεγμένης καρφίτσας με προσαρμοσμένη προβολή με τη χρήση του προωθητικού :

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

Όταν ασχολείστε με εκατοντάδες ή χιλιάδες δείκτες, χρησιμοποιήστε συσπειρώσεις για να βελτιώσετε τις επιδόσεις. Βιβλιοθήκες όπως [[LFT:14]] χειρίζονται την ομαδοποίηση και τη διαχείριση σε επίπεδο ζουμ αυτόματα.

Σχήματα σχεδίασης: Πολυγραμμές και Πολύγωνα

Για διαδρομές ή όρια, χρησιμοποιήστε τα στοιχεία και :

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

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

Αναπαραγωγή του Χάρτη

Προγραμματικά μετακινήστε την κάμερα χρησιμοποιώντας ή :

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

Πρόσβαση στη θέση χρήστη

Εγκατάσταση υπηρεσίας αντίδρασης-εναλλακτικής-γεωεντοπισμού

npm install react-native-geolocation-service
cd ios && pod install

Για το Android 6+, ζητήστε άδεια λειτουργίας χρησιμοποιώντας [[LFT:22]]] ή μια ειδική βιβλιοθήκη όπως [[LFT:23]]. Στο iOS, συμπεριλάβετε το [[LFT:24]] ή [[LFT:25]] κλειδί στο [[LFT:26]].

Λήψη ενιαίας θέσης

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

Συνεχής εντοπισμός τοποθεσίας

Για μετακίνηση σε πραγματικό χρόνο (π.χ. παρακολούθηση φυσικής κατάστασης), χρήση :

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

Τοποθεσία φόντου

Για εφαρμογές που χρειάζονται ενημερώσεις τοποθεσίας ακόμη και όταν στο παρασκήνιο (π.χ. παρακολούθηση παράδοσης), απαιτούνται επιπλέον βήματα:

• iOS: Ενεργοποίηση της δυνατότητας Background Modes και έλεγχος “Ενημέρωση θέσης”. Χρήση για ενημερώσεις φιλικές προς τις μπαταρίες.
• Ανδροειδές: Χρησιμοποιήστε μια υπηρεσία πρωτοπόρων με μια επίμονη ειδοποίηση. Η βιβλιοθήκη παρέχει ] και κοινής ωφέλειας.

Πάντοτε να αποκτάτε την κατάλληλη άδεια πριν να ενεργοποιήσετε την παρακολούθηση του ιστορικού και να ενημερώνετε τους χρήστες ότι συμμορφώνονται σαφώς με τις οδηγίες των καταστημάτων εφαρμογών.

Αδειές Χειρισμού Βέλτιστων Πρακτικών

Καλέστε τις αιτήσεις άδειας μετά το περιεχόμενο του χρήστη για το γιατί απαιτείται η τοποθεσία. Χρησιμοποιήστε μια βιβλιοθήκη όπως για να διαχειριστείτε τις άδειες cross-platform:

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

Χειριστείτε την άρνηση με χάρη ⁇ π.χ., εμφανίστε μια ειδοποίηση εξηγώντας γιατί η τοποθεσία είναι απαραίτητη και καθοδηγήστε το χρήστη στις ρυθμίσεις του συστήματος.

Σφάλμα χειρισμού και περιπτώσεων άκρων

• Αρνήθηκε η άδεια: Υποχώρηση σε μια προκαθορισμένη περιοχή ή παρακινήστε το χρήστη να ενεργοποιήσει την τοποθεσία από τις ρυθμίσεις.
• Τοποθεσία μη διαθέσιμη: Όταν το σήμα GPS χάνεται σε εσωτερικούς χώρους, χρησιμοποιήστε για να δεχτείτε τα δεδομένα που είναι κρυμμένα. Εμφάνιση ενός δείκτη “Εντοπισμός...”.
• Σφάλματα δικτύου: Η φόρτωση του χάρτη μπορεί να αποτύχει αν δεν υπάρχει διαδίκτυο. Αποδώστε ένα μήνυμα χρήστη ή εκτός σύνδεσης.
• Χρονοδιαλείμματα: Ορίστε ένα λογικό (π.χ., 15 δευτερόλεπτα) και ενημερώστε τον χρήστη.

Βελτιστοποίηση απόδοσης

Μείωση των περιττών ανασταλτικών

• Μεθοδέψτε τα και αντικείμενα για να αποτρέψουν την επανεμφάνιση σε κάθε αλλαγή πολιτείας.
• Χρήση για συστατικά για παιδιά όπως οι προσαρμοσμένοι δείκτες.
• Ενημερώσεις τοποθεσίας με το στροφόμετρο ή την αποπομπή σε callbacks.

Όριο ενημερώσεων χάρτη

• Χρησιμοποιήστε για να ενημερώσετε μόνο όταν ο χρήστης μετακινείται σε ελάχιστη απόσταση.
• Αποφύγετε την επαναδιατύπωση ολόκληρου του χάρτη κρατώντας τα δεδομένα δεικτών σε ένα [[LFT:44]] όταν το σύνολο δεικτών δεν αλλάζει.

Διαχείριση συστάδων

Κατά την εμφάνιση πολλών δεικτών, ενεργοποιήστε τη συσπειρωμάτωση ή φορτώστε μόνο τους δείκτες που είναι ορατοί στην τρέχουσα θύρα προβολής χρησιμοποιώντας [[LFT:45]]].

Ειδικές εκτιμήσεις για την πλατφόρμα

iOS

• Οι χάρτες Apple δεν απαιτούν ένα κλειδί API, αλλά δεν διαθέτει κάποια χαρακτηριστικά Google Maps όπως τα 3D κτίρια και την εσωτερική πλοήγηση.
• Για τους χάρτες Google στο iOS, πρέπει να προσθέσετε το κλειδί API στο και να συνδέσετε τους χάρτες Google SDK.
• Θυμηθείτε να ρυθμίσετε για τον εντοπισμό.

Ανδροειδές

• Το Google Maps απαιτεί ένα έγκυρο κλειδί API σε δηλωτικό. Αποκτήστε το από την κονσόλα Google Cloud και ενεργοποιήστε το “Χάρτης SDK για Android”.
• Σε ορισμένες συσκευές, οι τοποθεσίες που αναπαράγονται μπορούν να παρεμβαίνουν ⁇ να χρησιμοποιούν για να ανιχνεύσουν.
• Χρήση υπηρεσιών προσκηνίου για την τοποθεσία του φόντου. Η εφαρμογή πρέπει να εμφανίζει μια ειδοποίηση για να παραμείνει ζωντανή.

Χαρακτηριστικά τοποθεσίας δοκιμής

• Χρησιμοποιήστε προσομοιωτές για να δοκιμάσετε χάρτες και τοποθεσίες mock. Σε Xcode, ενεργοποιήστε “Επίδειξη τοποθεσίας” για να ορίσετε οποιαδήποτε συντεταγμένη.
• Για Android Studio, χρησιμοποιήστε τα “Εξαιρετικά Έλεγχοι” για να στείλετε δεδομένα GPS.
• Δοκιμή σε πραγματικές συσκευές για να επαληθεύσει την ακρίβεια GPS, διαλόγους άδειας, και συμπεριφορά εντοπισμού φόντου.
• Γράψτε μονάδες δοκιμών για τη λογική της άδειας και δοκιμές UI με εργαλεία όπως ή .

Εξωτερικοί πόροι

• αντιδραστήριο-native-maps GitHub Αποθετήριο
• αντιδραστήριο-εναλλακτική-geoloocation-service GitHub Repository
• ] Πλατφόρμα χαρτών Google Τεκμηρίωση
• Χάρτης εφαρμογώνKit Τεκμηρίωση

Συμπέρασμα

Η ενσωμάτωση χαρτών και γεωτοποθεσίας σε εφαρμογές React Native μετατρέπει τις στατικές διεπαφές σε δυναμικές, τις εμπειρίες εντοπισμού τοποθεσίας. Με τη μόχλευση στιβαρών βιβλιοθηκών όπως οι αντιδρώντες-εναλλακτικοί χάρτες και η υπηρεσία αντιδρών-εναλλακτικής-γεωτόπευσης, οι προγραμματιστές μπορούν να προσθέσουν πλούσιους χάρτες, την παρακολούθηση χρηστών σε πραγματικό χρόνο και τον απρόσκοπτο χειρισμό αδειών.