Yandex.Map 2.0 API का उपयोग करके उपयोगकर्ता नियंत्रण कार्ड बनाना

रम्बलर कार्ड में एक दिलचस्प डिजाइन समाधान होता है जो अन्य कार्ड में उपलब्ध नहीं होता है। यह मानचित्र के केंद्र का नियंत्रण है, जिसकी बदौलत यह पता चलता है कि मानचित्र का वर्तमान केंद्र किस दिशा में निर्देशित है। यह इस कार्यक्षमता के उदाहरण पर है कि मैं आपको अपनी साइट पर नक्शे के लिए अपना नियंत्रण बनाने के तरीके के बारे में बताना चाहूंगा।

नियंत्रण बनाना कई चरणों में विभाजित है।

चरण 1. लेआउट।

लेआउट, वह एक लेआउट है। यह इकाई नक्शे पर तत्व की उपस्थिति के लिए जिम्मेदार है। हमारे मामले में, यह एक क्रॉस है, जब आप इसके ऊपर मंडराते हैं, तो नक्शे के केंद्र के निर्देशांक दिखाए जाएंगे। हम विशेष फ़ैक्टरी टेम्प्लेट फ़ायलेटवर्क का उपयोग करके लेआउट बनाएंगे।

var CrossCenterLayout = ymaps.templateLayoutFactory.createClass('<div id="cross-center" style="left:$[options.position.left]px;top:$[options.position.top]px;">+</div>', { build: function() { CrossCenterLayout.superclass.build.call(this); this._controlListeners = this.events.group().add('mouseenter', this.onCenterEnter, this).add('mouseleave', this.onCenterLeave, this); //    ,     this._map = this.getData().map; }, clear: function() { this._controlListeners.removeAll(); CrossCenterLayout.superclass.clear.call(this); }, onCenterEnter: function() { var center = this._map.getCenter(); var lat = center[0].toFixed(2); var lng = center[1].toFixed(2); //          this._map.hint.show(center, { content: lat + ', ' + lng }); }, onCenterLeave: function() { //   this._map.hint.hide(); } }); 

कोड पर विस्तार से विचार करें। TemplateLayoutFactory फैक्ट्री 2 मापदंडों, एक भविष्य के लेआउट टेम्पलेट, और निर्मित लेआउट के लिए तरीकों की एक सूची को स्वीकार करती है जो मूल वर्ग के तरीकों को ओवरराइड कर सकती है।
हमारे मामले में, हम निर्माण और स्पष्ट तरीकों को फिर से परिभाषित करते हैं, और हमारे तरीकों को जोड़ते हैं onCenterEnter और onCenterLeave । निर्माण विधि में, इवेंट मैनेजर के कंटेनर में मूसलीव और माउसएंटर के लिए सदस्यताएँ जोड़ें।
स्पष्ट विधि में, हम इन सदस्यता से छुटकारा पाते हैं।

चरण 2. नियंत्रण वर्ग।

 var CrossCenter = function() { this.events = new ymaps.event.Manager(); this.options = new ymaps.option.Manager(); this.state = new ymaps.data.Manager(); }; CrossCenter.prototype = { setParent: function(parent) { this.parent = parent; if (parent) { var map = parent.getMap(); this.layout = new CrossCenterLayout({ //      ,         map: map, options: this.options }); //     pane  this.layout.setParentElement(map.panes.get('controls').getElement()); } else { this.layout.setParentElement(null); } }, getParent: function() { return this.parent; } }; 

यह शायद कोड का सबसे कठिन हिस्सा है। यहां हम IControl इंटरफ़ेस लागू करते हैं। पहले हम उचित घटना , विकल्प और डेटा प्रबंधकों का उपयोग करके आवश्यक फ़ील्ड सेट करते हैं। फिर हम सेटपेंट और गेटपेंट विधियों को लागू करते हैं। पहले वाले को एपीआई सोर्स कोड में जासूसी की गई थी, जिसकी वजह से डिबग मोड के लिए धन्यवाद, और दूसरा, मुझे लगता है, सवाल पैदा नहीं करता है।

चरण 3. कार्ड में जोड़ना

दर्जी शैली

 #cross-center{ font-size: 20px; cursor: pointer; position: absolute; z-index: 800; } 

और कंटेनर कार्ड

 <div id="map" style="height: 300px; width: 420px;"></div> 

एक नियंत्रण बनाएं और इसे मानचित्र के केंद्र में जोड़ें

 var crossCenter = new CrossCenter(); map.controls.add(crossCenter, { top: 140, left: 200 }); 

कार्य का परिणाम देखें।

PS इसे रामबलर की तरह बनाने के लिए, आप वर्तमान मानचित्र ज़ूम के आधार पर प्रकार पैरामीटर को बदलकर onCenterEnter विधि में रिवर्स जियोकोडिंग जोड़ सकते हैं।