Table of Contents

प्रतिक्रियात्मक मूल ऐप्स में मानचित्र और जियोलोकेशन की विशेषताएं एकीकृत करना

स्थान-अवधि मोबाइल एप्लिकेशन मानक बन गए हैं, उपयोगकर्ताओं को व्यक्तिगत, प्रासंगिक अनुभवों की पेशकश करते हैं। प्रतिक्रियात्मक मूल, इसकी क्रॉस-प्लेटफॉर्म क्षमताओं के साथ, ऐसे ऐप के निर्माण के लिए एक मजबूत आधार प्रदान करता है। मानचित्र और भू-स्थान को एकीकृत करना न केवल उपयोगकर्ता सगाई को बढ़ाता है बल्कि नेविगेशन, स्थान-आधारित अधिसूचनाओं और निकटता खोज जैसी सुविधाओं को भी अनलॉक करता है। यह लेख प्रतिक्रियात्मक मूल में मानचित्रों और एक्सेसिंग डिवाइस स्थान को एम्बेड करने के लिए एक व्यापक गाइड प्रदान करता है, जिसमें आवश्यक पुस्तकालयों, कार्यान्वयन पैटर्न, मंच-विशिष्ट विचार और प्रदर्शन सर्वोत्तम प्रथाओं को शामिल किया गया है।

कोर अवधारणाएं: नक्शे और जियोलोकेशन इन रिएक्ट नेटिव

मोबाइल ऐप में मानचित्र भौगोलिक डेटा के इंटरैक्टिव दृश्य प्रतिनिधित्व के रूप में काम करते हैं। प्रतिक्रियात्मक मूल में, मानचित्र आमतौर पर प्लेटफ़ॉर्म-विशिष्ट मानचित्र SDKs (Android पर Google मानचित्र, iOS पर Apple मानचित्र, या कस्टम प्रदाताओं के माध्यम से Google मानचित्र) द्वारा समर्थित मूल घटकों के रूप में प्रस्तुत किए जाते हैं। जियोलोकेशन जीपीएस, वाई-फाई या सेलुलर नेटवर्क का उपयोग करके डिवाइस के वास्तविक दुनिया के निर्देशांक ( अक्षांश, देशांतर) प्राप्त करने की क्षमता को संदर्भित करता है।

साथ में, ये सुविधाओं में उपयोग के मामलों की एक विस्तृत सरणी को शक्ति प्रदान की जाती है: सवारी-शेरिंग डिस्प्ले, रेस्तरां खोजकर्ता, फिटनेस ट्रैकर्स और डिलीवरी ट्रैकिंग। रीएक्ट नेटिव इन क्षमताओं को सामुदायिक-निर्मित पुस्तकालयों के माध्यम से उजागर करता है जो मूल SDK को जावास्क्रिप्ट घटकों में ब्रिज करता है।

मानचित्र और भू-स्थान के लिए लोकप्रिय पुस्तकालय

प्रतिक्रियात्मक-नेटिव-मैप

React Native में मानचित्रों को एम्बेड करने के लिए de facto मानक। यह एक एकीकृत एपीआई के माध्यम से Google मानचित्र और Apple मैप्स दोनों का समर्थन करता है। इसकी विशेषताओं में अनुकूलन मार्कर, कॉलआउट, बहुभुज, पॉलीलाइन, हीटमैप और अंतर्निहित इशारा हैंडलिंग शामिल हैं। पुस्तकालय सक्रिय रूप से बनाए रखा गया है और व्यापक रूप से अपनाया गया है।

प्रतिक्रिया-मूल- भूस्थानिक सेवा

जबकि रीएक्ट नेटिव का कोर एपीआई अभी भी उपलब्ध है, यह deprecated है और ठीक-grained नियंत्रण की कमी है। react-native-geolocation-service विन्यास सटीकता, टाइमआउट और अनुमति हैंडलिंग के साथ एक आधुनिक, वादे आधारित प्रतिस्थापन प्रदान करता है। यह उचित मूल एकीकरण के साथ iOS और Android के दौरान लगातार काम करता है।

एक्सपो-लोकेशन

एक्सपो प्रबंधित परियोजनाओं के लिए, expo-location एक सुव्यवस्थित एपीआई प्रदान करता है जो बॉक्स से अनुमतियों, स्थान ट्रैकिंग और जियोकोडिंग को संभालता है। यह विकास प्रक्रिया को सरल बनाता है लेकिन मूल कोड अनुकूलन के लिए पहुंच को सीमित करता है - प्रोटोटाइप या ऐप के लिए आदर्श जो गहरे मंच एकीकरण की आवश्यकता नहीं है।

अन्य उल्लेखनीय पुस्तकालय

  • ]React-native-google-places: Google Places API से स्वत: पूर्ण और स्थान विवरण प्रदान करता है।
  • ]React-native-mapbox-gl]: कस्टम मानचित्र शैलियों और ऑफ़लाइन टाइल्स (कम से कम सक्रिय रूप से बनाए रखा) प्रदान करता है।
  • ]]react-native-maps-super-cluster: प्रतिक्रिया-native-maps के लिए कुशल मार्कर क्लस्टरिंग जोड़ता है।

विस्तृत तुलना के लिए, ]] के आधिकारिक दस्तावेज का उल्लेख करें, प्रतिक्रियात्मक-मूल-न-मैप और ]]react-native-geolocation-service]]].

अपने ऐप में मानचित्र लागू करना

स्थापना और सेटअप

पुस्तकालय स्थापित करके और मंच-विशिष्ट निर्भरता को कॉन्फ़िगर करके शुरू करें।

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

यदि आप Android पर Google मानचित्र का उपयोग कर रहे हैं, तो अपने API कुंजी को में जोड़ें:

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

Google मानचित्र के साथ आईओएस के लिए, या ] के लिए एक ही कुंजी जोड़ें। वैकल्पिक रूप से, एप्पल मैप्स किसी भी एपीआई कुंजी के बिना बॉक्स से बाहर काम करते हैं।

बेसिक मानचित्र घटक

मूल घटक ] है, जो प्रारंभिक दृश्य क्षेत्र को परिभाषित करने के लिए एक prop को स्वीकार करता है:

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>

कस्टम मार्करों और क्लस्टरिंग

prop:

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

जब सैकड़ों या हजारों मार्करों से निपटने के लिए, प्रदर्शन में सुधार के लिए क्लस्टरिंग का उपयोग करें। पुस्तकालयों जैसे स्वचालित रूप से समूहन और ज़ूम-स्तरीय प्रबंधन संभाल लें।

ड्राइंग आकार: पॉलीलाइन और पॉलीगोन

मार्गों या सीमाओं के लिए, और ] घटकों का उपयोग करें:

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

पुस्तकालय को दोनों प्लेटफार्मों पर अनुमति सेटअप की आवश्यकता होती है। एंड्रॉइड 6+ के लिए, का उपयोग करके रनटाइम अनुमतियों का अनुरोध करें।

एक एकल स्थिति प्राप्त करना

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 Mode]] क्षमता और जांच “स्थान अद्यतन” बैटरी के अनुकूल अद्यतन के लिए ] का उपयोग करें।
  • Android:] एक सतत अधिसूचना के साथ एक अग्रभूमि सेवा का उपयोग करें। पुस्तकालय प्रदान करता है ] और उपयोगिताओं.

हमेशा उपयुक्त प्राप्त करने के लिए पृष्ठभूमि ट्रैकिंग सक्षम करने से पहले अनुमति, और उपयोगकर्ताओं को स्पष्ट रूप से एप्लिकेशन स्टोर दिशानिर्देशों का पालन करने के लिए सूचित करें।

सर्वश्रेष्ठ अभ्यासों को संभालने की अनुमति

उपयोगकर्ता के लिए अनुरोध करने के बाद कॉल अनुमति अनुरोध क्यों स्थान की आवश्यकता है। क्रॉस-प्लेटफॉर्म अनुमतियों का प्रबंधन करने के लिए ] जैसे पुस्तकालय का उपयोग करें:

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;
};

संभालना denial gracefully-जैसे, एक चेतावनी दिखाने के लिए कि स्थान की आवश्यकता क्यों है और उपयोगकर्ता को सिस्टम सेटिंग्स के लिए मार्गदर्शन करता है।

त्रुटि हैंडलिंग और एज मामले

  • Permission denied: एक डिफ़ॉल्ट क्षेत्र में वापस गिरें या उपयोगकर्ता को सेटिंग्स से स्थान सक्षम करने के लिए प्रेरित करें।
  • Location unavailable: जब जीपीएस संकेत घर के अंदर खो गया है, का उपयोग कैश डेटा स्वीकार करने के लिए। "Locating..." सूचक दिखाएं।
  • Network त्रुटियों: नक्शे लोड हो रहा है अगर वहाँ कोई इंटरनेट है विफल हो सकता है। एक placeholder या ऑफ़लाइन संदेश प्रस्तुत करें।
  • Timeouts: एक उचित सेट (उदाहरण के लिए, 15 सेकंड) और उपयोगकर्ता को सूचित करें।

निष्पादन अनुकूलन

अनावश्यक पुन: प्रस्तुतकर्ता को कम करें

  • ] और ]]]] वस्तुओं को हर राज्य में परिवर्तन पर पुनः प्रस्तुत करने से रोकने के लिए।
  • ]] का प्रयोग बाल घटकों जैसे कस्टम मार्करों के लिए किया जाता है।
  • ]] कॉलबैक में थ्रोटल या डिबॉउन लोकेशन अपडेट।

सीमित मानचित्र अद्यतन

  • ] का प्रयोग केवल अद्यतन करने के लिए जब उपयोगकर्ता न्यूनतम दूरी पर जाता है।
  • मार्कर डेटा को में रखते हुए पूरे मानचित्र को फिर से प्रस्तुत करने से बचें, जब मार्कर सेट बदल नहीं जाता है।

प्रबंधन

कई मार्करों को प्रदर्शित करते समय क्लस्टरिंग को सक्षम करें या केवल मार्करों को लोड करें जो वर्तमान व्यूपोर्ट में प्रदर्शित होते हैं ].

मंच-विशिष्ट विचार

आईओएस

  • Apple Maps को API कुंजी की आवश्यकता नहीं है, लेकिन इसमें कुछ Google Maps फीचर्स जैसे 3D भवन और इनडोर नेविगेशन की कमी है।
  • iOS पर Google मानचित्र के लिए, आपको API कुंजी को में जोड़ना होगा और Google मानचित्र SDK को लिंक करना होगा।
  • स्थानीयकरण के लिए ] को सेट करना याद रखें।

Android

  • Google मानचित्र को प्रकट करने में एक वैध एपीआई कुंजी की आवश्यकता होती है। इसे Google क्लाउड कंसोल से प्राप्त करें और इसे "एंड्रॉइड के लिए मैप्स एसडीके" सक्षम करें।
  • कुछ उपकरणों पर, नकली स्थान हस्तक्षेप कर सकते हैं- उपयोग करने के लिए का पता लगाने के लिए।
  • पृष्ठभूमि स्थान के लिए अग्रभूमि सेवाओं का उपयोग करें। ऐप को जीवित रहने के लिए एक अधिसूचना प्रदर्शित करनी चाहिए।

परीक्षण स्थान

  • नक्शे और नकली स्थानों का परीक्षण करने के लिए सिम्युलेटर का उपयोग करें। Xcode में, किसी भी निर्देशन को सेट करने के लिए "स्थान को अलग करें" सक्षम करें।
  • एंड्रॉइड स्टूडियो के लिए, जीपीएस डेटा भेजने के लिए "Extended Control" का उपयोग करें।
  • वास्तविक उपकरणों पर परीक्षण जीपीएस सटीकता, अनुमति संवाद और पृष्ठभूमि ट्रैकिंग व्यवहार को सत्यापित करने के लिए।
  • अनुमति के लिए इकाई परीक्षण लिखें तर्क और यूआई परीक्षण उपकरण के साथ ] या ]]]।

बाह्य संसाधन

निष्कर्ष

प्रतिक्रियात्मक मूल ऐप में मानचित्र और भू-स्थानांतरण को एकीकृत करने से स्थैतिक इंटरफेस को गतिशील, स्थान-जारी अनुभवों में बदल दिया जाता है। प्रतिक्रिया-मूल-मैप और प्रतिक्रिया-मूल- भू-स्थानांतरण-सेवा जैसे मजबूत पुस्तकालयों का लाभ उठाकर, डेवलपर्स सुविधा युक्त मानचित्र, वास्तविक समय उपयोगकर्ता ट्रैकिंग और निर्बाध अनुमति हैंडलिंग जोड़ सकते हैं। मंच मतभेदों, प्रदर्शन अनुकूलन और उपयोगकर्ता गोपनीयता पर ध्यान देना एक पॉलिश, विश्वसनीय अनुप्रयोग सुनिश्चित करता है। यहां उल्लिखित पैटर्न और सर्वोत्तम प्रथाओं के साथ, आप उत्पादन-पढ़ाने वाले स्थान-आधारित सुविधाओं के निर्माण से लैस हैं जो उपयोगकर्ताओं को प्रसन्न करते हैं।