रामब्लर मैप्स एपीआई में विजेट

इस लेख में, हम रामबलर मैप्स एपीआई की सबसे होनहार विशेषताओं में से एक के बारे में बात करेंगे - कस्टम विजेट को जोड़ने।

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

फिलहाल, हमने पहले से ही चार विजेट विकसित किए हैं: "रूटिंग" , "रूलर" , "ट्रैफिक जाम" और "कैमरा" । उनके उदाहरण का उपयोग करना, यह अंदाजा लगाना काफी संभव है कि रामब्लर-कार्ट एपीआई विजेट क्या हैं, उनकी आवश्यकता क्यों है और वे कैसे काम करते हैं। वैसे, आप हमें अपने स्वयं के विजेट भेज सकते हैं और हम उन्हें साइट पर पोस्ट करेंगे ताकि हर कोई उनका उपयोग कर सके!

चलो व्यापार के लिए नीचे उतरो इसके बाद, हम एक सरल कार्य करने वाले एक नए विजेट के निर्माण का विश्लेषण करेंगे: स्विच ऑन करने के बाद, इसके (कर्सर) भौगोलिक निर्देशांक के साथ कर्सर के पास एक संकेत प्रदर्शित करें, मैप को रिवर्स जियोकोड पर क्लिक करें और इस संकेत में क्लिक का पता दिखाएं, और इसे बंद करने के बाद सब कुछ छिपाएं।

इसलिए, एक विजेट बनाएं। इसके संचालन के लिए आवश्यक सब कुछ तर्क द्वारा RMap.registerWidget विधि द्वारा पारित किया गया है। पहला तर्क विजेट का नाम है (इसके बाद की पहुंच के लिए), दूसरा पैरामीटर के साथ एक ऑब्जेक्ट है, जिसे हम विस्तार से बताएंगे।

सबसे पहले आपको आउटपुट असाइन करने की आवश्यकता है: लेखक, विजेट और संस्करण संख्या का संक्षिप्त विवरण निर्दिष्ट करें।

RMap.registerWidget('Location', { author: 'Alex.', about: 'location tooltip', version: '0.0.1', 

तब - नियंत्रण पैरामीटर, विजेट नियंत्रणों की एक सरणी। हमारे मामले में, यह एक स्विच बटन (स्विचबटन) है। नियंत्रण ऑब्जेक्ट के गुणों के बीच, यह स्विचऑन और स्विचऑफ से मिलकर महत्वपूर्ण फ़िक्सेस को हाइलाइट करने के लायक है - ये फ़ंक्शन हैं जो बटन चालू और बंद होने पर काम करते हैं। यहां उनके नाम बताना पर्याप्त है, हम बाद में उनके पास लौट आएंगे।

  controls: [{ type: ['SwitchButton'], id: 'control', groupId: 'loc', style: { /*  .  Location.js */ }, funcs: { switchOn: 'switchOn', switchOff: 'switchOff' }, params: { autoSwitch: false, autoSwitchCall: false }, parent: 'map.controls.groups.loc' }], 

कर्सर पैरामीटर आपको यह निर्दिष्ट करने की अनुमति देता है कि कुछ स्थितियों में किस कर्सर का उपयोग करना है। कहते हैं, हमारे विजेट के लिए, सटीक स्थिति के लिए एक क्रॉसहेयर कर्सर पर्याप्त है।

  cursors: { crosshair: { cur: false, def: "crosshair" } }, 

अगला वैकल्पिक पैरामीटर ईवेंटटाइप्स है - विजेट ईवेंट प्रकार जिनका उपयोग किया जा सकता है, उदाहरण के लिए, अन्य विजेट के साथ बातचीत करने के लिए।

  eventTypes: { TURN_ON: "turn on", TURN_OFF: "turn off" }, 

हैंडलर पैरामीटर घटनाओं और उनके हैंडलर के बीच संबंध निर्धारित करता है। हमारे विजेट में चार हैंडलर हैं: शो (कर्सर के मैप पर होने पर एक संकेत दिखाता है), मूव (कर्सर के बाद हिंट को मूव करता है), हाइड को छिपाता है (जब कर्सर मैप को छोड़ देता है या बटन बंद हो जाता है) और जियोकोड (एड्रेस को कोऑर्डिनेट करता है)। विजेट के भीतर से, घटनाओं को तब तक इस प्रकार एक्सेस किया जा सकता है। इस प्रकार। ("चालू करें", [{डेटा: ...}]]); अतिरिक्त डेटा एक साथ प्रेषित होता है।

  handlers: { show: { type: ["mousemove"], handler: "show", isObject: true, sleeped: true } //   .  Location.js }, 

उपकरण पैरामीटर एपीआई पुस्तकालयों की एक सूची है जो विजेट में उपयोग किया जाता है। वैसे, मैं आपको याद दिलाता हूं कि आप विजेट में उपलब्ध किसी भी एपीआई तरीके का उपयोग कर सकते हैं।

  tools: ["JSON", "Events", "util"], 

और अंत में, विजेट के चर और कार्य।

  // topP: 5, leftP: 5, tt: false, h: false, //,    show: function(e) { //  // .  Location.js }, move: function(e) { //  //  .  Location.js }, hide: function() { //  this.tt.style.display = 'none' }, geocode: function(e) { //    // .  Location.js }, //  switchOn  switchOff switchOn: function() { this.handlers.show.activate(); this.handlers.hide.activate(); this.handlers.geocode.activate(); this.cursors.crosshair.show(); }, switchOff: function() { this.handlers.show.sleep(); this.handlers.geocode.sleep(); this.hide(); this.cursors.crosshair.hide(); }, //     turnOn: function() { this.controls.control.switchOn(); }, turnOff: function() { this.controls.control.switchOff(); } 

एक उपयोगी टिप्पणी यह ​​है कि विजेट के किसी भी सार्वजनिक कार्य, उदाहरण के लिए, ऊपर वर्णित टर्नऑन या टर्नऑफ , को मैप में दर्शाया जा सकता है, जैसे कि map.widgets.Location.turnOn ()।

विजेट का निर्माण पूरा हो गया है। इसके अलावा, जेनरेट किए गए कोड को सीधे पेज की बॉडी में रखा जा सकता है, लेकिन (!) इसे एक अलग JS-मॉड्यूल में सहेजना और API के साथ कनेक्ट करना कहीं अधिक सुविधाजनक है। फिर, विजेट को कॉल करने के लिए getWidget विधि का उपयोग किया जाता है, और पृष्ठ पर स्क्रिप्ट को केवल कुछ पंक्तियों में घटाया जाता है।

 <script type="text/javascript"> //     - var map = new RMap('myMap', {widgets: false}); //  map.getWidget("Location", function () {this.init()} ); </script> 

पूर्ण उदाहरण कोड http://maps.rambler.ru/api/examples/TutorialWidget.html पर उपलब्ध है