गूगल मैप्स एपि के आधार पर गो प्लानिंग प्लान करें

हाल ही में मैंने अपनी सुविधा के लिए एक आवेदन लिखा था, और पहले मैं इसके बारे में बात नहीं करना चाहता था। तब मैंने सोचा कि यह किसी और के काम आ सकता है। वास्तव में, यह ऑटोमोबाइल मार्गों की योजना बनाने के लिए एक सेवा है, जो तैयार-किए गए Google मानचित्र एपी घटकों से इकट्ठा की गई है। यह Google मैप्स इंजन का एक क्लोन है, लेकिन बाद के कष्टप्रद सीमाओं के बिना। नि: शुल्क, खुला स्रोत, सर्वर के बिना स्वच्छ दृश्यपटल, कोड को जीथब पर पोस्ट किया गया है।

डेमो

विचार

हर गर्मियों में मैं यूरोप में किसी तरह की सड़क यात्रा पर जाने की कोशिश करता हूं। मुझे छोटे शहरों की यात्रा करना पसंद है, कैंपों में रात बितानी चाहिए और होटलों में नहीं घूमना चाहिए। स्वाभाविक रूप से, प्रत्येक यात्रा की प्रत्याशा और योजना कुछ महीनों में शुरू होती है - मैं नक्शे और विकिपीडिया पर चढ़ता हूं, दिलचस्प स्थानों को चिह्नित करता हूं, और फिर योजना बना सकता हूं कि यह सब सफलतापूर्वक कैसे प्राप्त किया जाए। मैं दिन, प्रमुख दूरियों और समय की गणना द्वारा एक तालिका संकलित करता हूं। कुछ समय पहले तक, मुझे myplaces.google.com की सेवा का उपयोग करना था, लेकिन पुराना संस्करण अपने ग्लिच (मार्गों के टुकड़े गायब) के साथ निराशाजनक था, और नया एक आक्रामक रूप से कट गया था। और प्रो संस्करण में भी 20 + स्थानान्तरण में मेरी स्वैच्छिक यात्रा फिट नहीं है। इसी समय, नाम, स्वत: पूर्ण और रूटिंग द्वारा गलत खोज के साथ एक उत्कृष्ट Google मानचित्र एपी है। इसलिए मैंने उपलब्ध घटकों को ले लिया, परतों, संपादन, निर्यात को जोड़ा, और यात्रा योजना के लिए मेरी सेवा प्राप्त की।

हमारे पास क्या है?

लगभग 20 घंटे विकास पर खर्च किए गए, और एक प्रोटोटाइप प्राप्त किया गया जो मुझे सूट करता है। Google, बाइक रूट और पॉलीगॉन जैसे 100 प्रकार के आइकन नहीं हैं। लेकिन एक साधारण जोंस-ऑब्जेक्ट और एक असीमित संख्या में परतों और वस्तुओं के लिए बनाए गए नक्शे का निर्यात होता है। कोड एक क्लीन फ्रंटएंड है (सर्वर पर मार्गों को बचाने के लिए एक छोटा वैकल्पिक php), आरंभ करने के लिए, बस फाइलों को कॉपी करें और स्थानीय रूप से index.html खोलें। आपके डोमेन / सर्वर और होस्टिंग की आवश्यकता नहीं है, आपको केवल Google एपीआई तक पहुंचने की आवश्यकता है। Kasheftin.imtqy.com/RoutePlanner/ - यहाँ github पृष्ठों की मेजबानी (सर्वर के लिए मार्गों को बचाने / लोड करने के अलावा सब कुछ काम करता है) पर एक कार्यशील डेमो है।

तकनीकी बिंदु

किसी भी एपीआई का उपयोग करते हुए विकास का अर्थ है कि आपको इसके और बाकी कोड के बीच एक परत लिखने की आवश्यकता है। क्रमशः नॉकआउट का उपयोग किया गया था, मेरा अधिकांश कोड Google मानचित्र ऑब्जेक्ट्स और घटनाओं के साथ अवलोकन योग्य-नॉकआउट तंत्र का कनेक्शन है।

सबसे बड़ी समस्या थी google.maps.InfoWindow विंडो, जो गतिशील सामग्री के साथ अच्छी तरह से काम नहीं करती है। InfoWindow के साथ काम करने के लिए दो विकल्प हैं - डोम नोड को सामग्री के रूप में निर्दिष्ट करके और html-string के माध्यम से। पहले मामले में, हम मॉडल को एक बार html से जोड़ते हैं, और फिर वांछित नोड को इन्फोवॉन्डो कंटेंट ( उदाहरण देखें) के रूप में सेट करते हैं। दूसरे में, हम HTML स्ट्रिंग को सामग्री के रूप में सेट करते हैं, और हर बार खिड़की खोलने के बाद हम मॉडल के साथ बाइंडिंग को अपडेट करते हैं ( उदाहरण देखें)। पहला विकल्प निर्दयता से नोड से संबंधित है, और कई अलग-अलग विंडो खोलने पर इसे आसानी से हटा देता है। दूसरा गलत तरीके से सामग्री की ऊंचाई की गणना करता है, क्योंकि डेटा को मार्कअप में डाला जाता है। जब सामग्री का आकार बदल जाता है, तो दोनों विकल्प छोटे होते हैं, क्योंकि infoWindow आकार नहीं बदल सकता है।

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

for (var i in google.maps.InfoWindow.prototype) { if (typeof google.maps.InfoWindow.prototype[i] == "function") { (function(i) { var origMethod = google.maps.InfoWindow.prototype[i]; google.maps.InfoWindow.prototype[i] = function() { console.log("InfoWindow debug",i,this.arguments); return origMethod.apply(this.arguments); } })(i); } } 

इस कोड का उपयोग करते हुए, यह पता चलता है कि POI सामान्य जानकारी विंडो का उपयोग करता है, और जो आवश्यक है वह अंतिम विधि (जब आंतरिक सामग्री पहले ही उत्पन्न हो चुकी है) को बदलने के लिए है - वहां जो कुछ भी आवश्यक है उसे डालें। jsfiddle.net/kasheftin/935Km/ - इस उदाहरण में, मैंने प्रत्येक POI विंडो में एक "ऐड टू मैप" लिंक जोड़ा है, जिस पर क्लिक करके मैं स्थिति और सभी डेटा खींचता हूं।

भविष्य की योजना

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

सिस्टम के आगे विकास के लिए, दान करने का यह मेरा पहला प्रयास है। यदि कम से कम एक दान है, तो मैं एक और 10 घंटे बिताने का वादा करता हूं और:

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

गिथब पर परियोजना का लिंक: github.com/Kasheftin/RoutePlanner