गूगल मैप्स एपीआई और गूगल-मैप्स-रिएक्शन के साथ रिएक्ट ऐप्स

ब्लॉग

गूगल मैप्स एपीआई और गूगल-मैप्स-रिएक्शन के साथ रिएक्ट ऐप्स

गूगल मैप्स एपीआई और गूगल-मैप्स-रिएक्शन के साथ रिएक्ट ऐप्स

इस ट्यूटोरियल का उद्देश्य Google मैप्स एपीआई को आपके रिएक्ट घटकों में एकीकृत करना और आपको अपनी वेबसाइट पर मानचित्र प्रदर्शित करने में सक्षम बनाना है।



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

विषयसूची

रिएक्ट ऐप में Google मैप्स एपीआई को शामिल करना वास्तव में इसके समृद्ध होने के कारण अपेक्षा से कहीं अधिक आसान है प्रलेखन जिस पर मेरा अत्यधिक सुझाव है कि आप इस पर गौर करें, और एनपीएम पैकेज फुलस्टैक रिएक्ट द्वारा।



पूर्वापेक्षा:

आगे बढ़ो और अपनी एपीआई कुंजी पकड़ो यहां।

  1. बस गेट स्टार्टेड बटन पर क्लिक करें
  2. मैप्स चेकबॉक्स पर टिक करें
  3. एक नया प्रोजेक्ट बनाएं पर क्लिक करें
  4. एक बार जब आप अपनी परियोजना को नाम दे देते हैं (जो भी आप चाहते हैं) तो आप अपनी बिलिंग जानकारी सेट कर सकते हैं जो स्वचालित रूप से आपके एपीआई को सक्षम करेगी और एपीआई कुंजी उत्पन्न करेगी।

पुनश्च: अपनी बिलिंग जानकारी जोड़ने में संकोच न करें क्योंकि Google क्लाउड प्लेटफ़ॉर्म आपको 12 महीने की निःशुल्क परीक्षण अवधि प्रदान करता है और परीक्षण अवधि के बाद जब तक आप अपनी अनुमति नहीं देते, तब तक आपको बिल नहीं देगा।



परियोजना सेटअप

कुछ त्वरित सेटअप के लिए, हम facebook का उपयोग करने जा रहे हैं क्रिएट-रिएक्शन-ऐप जो हमें वेबपैक या बेबेल को कॉन्फ़िगर करने की परेशानी से बचाता है।

तो आगे बढ़ें और इस कमांड को रन करें

npm i -g create-react-app create-react-app my-googlemap cd my-googlemap

इससे पहले कि हम कोई कोड जोड़ें, चलिए आगे बढ़ते हैं और अपनी निर्भरता स्थापित करते हैं।

npm install --save google-maps-react

चलिए चलते हैं और अपना |_+_| . संपादित करते हैं फ़ोल्डर और उन फ़ाइलों और आयातों को हटा दें जिनकी हमें आवश्यकता नहीं है अर्थात

  1. बस गेट स्टार्टेड बटन पर क्लिक करें
  2. मैप्स चेकबॉक्स पर टिक करें
  3. एक नया प्रोजेक्ट बनाएं पर क्लिक करें
  4. एक बार जब आप अपनी परियोजना को नाम दे देते हैं (जो भी आप चाहते हैं) तो आप अपनी बिलिंग जानकारी सेट कर सकते हैं जो स्वचालित रूप से आपके एपीआई को सक्षम करेगी और एपीआई कुंजी उत्पन्न करेगी।

हमारे घटक बनाने का समय।

हमें अपना |_+_| . संपादित करना होगा फ़ाइल और इसके बजाय हमारा घटक है जो हमारे Google मानचित्र को लोड करेगा।

src

एक साधारण Google मानचित्र के लिए, यह वस्तुतः आपके लिए आवश्यक सभी कोड है। आगे बढ़ें और अपना ऐप चलाएं और सुनिश्चित करें कि नक्शा ब्राउज़र पर लोड हो।

नेटफ्लिक्स कॉम/एक्टिवेट

पुनश्च: अपनी बिलिंग जानकारी जोड़ने में संकोच न करें क्योंकि Google क्लाउड प्लेटफ़ॉर्म आपको 12 महीने की निःशुल्क परीक्षण अवधि प्रदान करता है और परीक्षण अवधि के बाद जब तक आप अपनी अनुमति नहीं देते, तब तक आपको बिल नहीं देगा।
|_+_| बस एक है उच्च आदेश घटक (HOC) जो Google API के आसपास आवरण प्रदान करता है। वैकल्पिक रूप से, GoogleApiWrapper HOC को एक फ़ंक्शन पास करके कॉन्फ़िगर किया जा सकता है जिसे लिपटे हुए घटक के प्रॉप्स के साथ बुलाया जाएगा और कॉन्फ़िगरेशन ऑब्जेक्ट को इस तरह वापस करना चाहिए।

App.js

मार्कर और जानकारीविंडो

क्या यह रोमांचक नहीं होगा निशान और एक जानकारीविंडो हमारे मानचित्र पर हमारी सेट प्रारंभिक केंद्र स्थिति दिखा रहा है? तो चलिए इस कार्यक्षमता को हमारे कोड में जोड़ते हैं।

सबसे पहले हमें |_+_| . आयात करने की आवश्यकता है और |_+_| दोनों की लोडिंग हासिल करने में हमारी मदद करने के लिए google-maps-react लाइब्रेरी के घटक।

import React, { Component } from 'react'; import { Map, GoogleApiWrapper } from 'google-maps-react'; const mapStyles = { width: '100%', height: '100%' }; export class MapContainer extends Component { render() { return ( ); } } export default GoogleApiWrapper({ apiKey: 'YOUR_GOOGLE_API_KEY_GOES_HERE' })(MapContainer);

ध्यान दें कि हमारा घटक पहले स्टेटलेस था?, हमें राज्य प्रबंधन के लिए राज्य जोड़ने की जरूरत है।

GoogleApiWrapper

इसके बाद, जब मानचित्र और मार्कर पर क्लिक किया जाता है, तो हमें ईवेंट हैंडलर जोड़ने की आवश्यकता होती है।

क्या आप कॉइनबेस पर बिटकॉइन को छोटा कर सकते हैं
export default GoogleApiWrapper( (props) => ({ apiKey: props.apiKey } ))(MapContainer)

पुनश्च: अपनी बिलिंग जानकारी जोड़ने में संकोच न करें क्योंकि Google क्लाउड प्लेटफ़ॉर्म आपको 12 महीने की निःशुल्क परीक्षण अवधि प्रदान करता है और परीक्षण अवधि के बाद जब तक आप अपनी अनुमति नहीं देते, तब तक आपको बिल नहीं देगा।* पूर्वापेक्षा:

हमारे रेंडर विधि में हमारे मार्कर और इन्फोविंडो घटकों को जोड़कर हमारे घटक को पूरा करें

Marker

अपना ऐप चलाएं और सुनिश्चित करें कि क्लिक करने पर आपके पास infoWindow वाला एक मार्कर है।

ब्राउज़र का वर्तमान स्थान

आइए हमारे मानचित्र को हमारे ब्राउज़र के वर्तमान स्थान को चुनने के द्वारा चीजों को मसाला दें। हम उपयोग करेंगे नाविक जो केवल पढ़ने के लिए गुण है जो एक जियोलोकेशन ऑब्जेक्ट देता है जो वेब सामग्री को डिवाइस के स्थान तक पहुंच प्रदान करता है।

हमारे में |_+_| फ़ोल्डर एक नई फ़ाइल बनाएँ और उसे नाम दें |_+_| और नाम का एक घटक बनाएं |_+_| यह वह जगह है जहां हमारे ब्राउज़र के स्थान को चुनने की हमारी सारी कार्यक्षमता निहित होगी।

हम अपने |_+_| . में कुछ डिफ़ॉल्ट प्रॉप्स जोड़कर शुरुआत करेंगे घटक, चूंकि हमें मानचित्र को एक केंद्र के साथ सेट करने की आवश्यकता होगी यदि वर्तमान स्थान प्रदान नहीं किया गया है। यह बूलियन प्रोप द्वारा नियंत्रित किया जाता है |_+_|

infoWindow

इसके बाद, हमें अपने कंपोनेंट को स्टेटफुल बनाने की जरूरत है,

import { GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';

आइए हमारे CurrentLocation घटक को भी अपडेट करते हैं, उदाहरण के लिए जब नक्शा पहली बार लोड किया जाता है क्योंकि हम पूरी तरह से Google API पर हमेशा उपलब्ध होने पर निर्भर नहीं हो सकते हैं, इसलिए हमें यह जांचने की आवश्यकता है कि यह लोड है या नहीं। और यह भी जांचें कि क्या ब्राउज़र का वर्तमान स्थान प्रदान किया गया है और इसके लिए मानचित्र को पुन: प्रस्तुत करें।

[...] export class MapContainer extends Component { state = { showingInfoWindow: false, //Hides or the shows the infoWindow activeMarker: {}, //Shows the active marker upon click selectedPlace: {} //Shows the infoWindow to the selected place upon a marker };

आइए |_+_| . को परिभाषित करें फ़ंक्शन जो केवल तभी कॉल किया जाता है जब घटक की स्थिति में वर्तमान स्थान अपडेट किया जाता है और |_+_| . का उपयोग करता है मानचित्र के केंद्र को बदलने के लिए google.maps.Map उदाहरण पर विधि।

onMarkerClick = (props, marker, e) => this.setState({ selectedPlace: props, activeMarker: marker, showingInfoWindow: true }); onClose = props => { if (this.state.showingInfoWindow) { this.setState({ showingInfoWindow: false, activeMarker: null }); } };

अगला, हमें उस उदाहरण को संभालने की आवश्यकता है जब नक्शा पहले ही लोड हो चुका हो। इसे |_+_| . द्वारा नियंत्रित किया जाएगा जीवनचक्र विधि जो वर्तमान स्थान को लाने के लिए कॉल बैक सेट करेगी।

render() { return (

{this.state.selectedPlace.name}

); } } [...]

नोटिस |_+_| समारोह? आइए आगे बढ़ते हैं और इसे परिभाषित करते हैं।

src

मूल रूप से, |_+_| फ़ंक्शन को केवल घटक प्रदान किए जाने के बाद ही कॉल किया जाता है और DOM घटक के संदर्भ को पकड़ लेता है जहां हम चाहते हैं कि हमारा नक्शा रखा जाए।

हमारा CurrentLocation घटक लगभग ऊपर की ओर देख रहा है, लेकिन हमें यह सुनिश्चित करने की आवश्यकता है कि हमारा पिछला मार्कर हमारे वर्तमान स्थान यानी ब्राउज़र की वर्तमान स्थिति को चुनता है और इसलिए हमें |_+_| विधि जो वास्तव में बाल घटक पर विधि को कॉल करने के लिए ज़िम्मेदार होगी।

अभिभावक-बाल संचार के बारे में और पढ़ें यहां

Map.js

और अंत में, अपना |_+_| . जोड़ें तरीका

मेरे ईपीएसन प्रिंटर को वाईफाई से कैसे कनेक्ट करें
CurrentLocation

अंत में, समाप्त होने से पहले हमें अपने |_+_| . को अपडेट करना होगा हमारे नए परिवर्तनों को शामिल करने के लिए घटक। तो चलिए इसे इसमें बदलते हैं

CurrentLocation

अपना ऐप चलाएं; हमारे ब्राउज़र पर जाने के बाद, हमारा नक्शा पहले हमारे |_+_| . के साथ लोड होना चाहिए फिर इस स्थान पर स्थित मार्कर के साथ हमारे ब्राउज़र के वर्तमान स्थान को चुनने के लिए पुनः लोड करें और Voilà हम कर चुके हैं।

निष्कर्ष

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

बीजाणु फोकस प्रदर्शन कहां से खरीदें

और अधिक जानें

मैं फुल स्टैक डेवलपर्स: वह सब कुछ जो आपको जानना आवश्यक है

मैं शुरुआती के लिए रिएक्ट हुक ट्यूटोरियल: रिएक्ट हुक के साथ शुरुआत करना

मैं जानें React.js शुरुआती के लिए

मैं रिएक्ट सीखें - रिएक्ट क्रैश कोर्स 2019 - उदाहरणों के साथ रिएक्ट ट्यूटोरियल

मैं रिएक्ट राउटर: नेविगेशन की शक्ति जोड़ें

मैं प्रतिक्रिया - पूरा गाइड (हुक, रिएक्ट राउटर, रेडक्स सहित)

मैं Redux के साथ आधुनिक प्रतिक्रिया [2019 अद्यतन]

मैं रिएक्ट नेटिव - द प्रैक्टिकल गाइड

#reactjs #google-maps