Yandex कोणीय के लिए नक्शे। Js

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

Git डेमो रिपॉजिटरी
पहली बार इस लेख के प्रकाशन के परिणामस्वरूप, मुझे मूल्यवान रचनात्मक टिप्पणियां मिलीं, जिन्हें आप नीचे, टिप्पणियों में देख सकते हैं। हर किसी के लिए धन्यवाद जो मुझे मन की बात सिखाने के लिए तैयार था, और इसके बारे में क्या आया, अब हम देखेंगे।
आइए सबसे सरल से शुरू करें, कार्य एक मानचित्र प्रदर्शित करना है। समाधान:

<ya-map ya-zoom="8" ya-center="[37.64,55.76]"></ya-map> 

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

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-geo-object ya-source="geoObject"></ya-geo-object> </ya-map> 

 $scope.geoObjects= { geometry: { type: 'Circle', coordinates: [37.60,55.76], radius: 10000 }, properties: { balloonContent: "  - 10 ", hintContent: " " } }; 

एक जियो जोड़ना। संग्रह करने के लिए वस्तु:

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-collection> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-collection> </ya-map> 

क्लस्टरिंग में एक बिंदु जोड़ना:

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-cluster> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-cluster> </ya-map> 

यह स्पष्ट है कि geoObject को अब एक बिंदु पर इंगित करना चाहिए।
सभी मानचित्र घटनाओं के लिए समर्थित समर्थन। किसी ईवेंट की सदस्यता लेने के लिए, ya-event[-target]-eventname । यहां हां-इवेंट वह उपसर्ग है जो यह निर्धारित करता है कि यह एक इवेंट सबस्क्रिप्शन है, यदि निर्दिष्ट किया गया है, तो लक्ष्य, उस तत्व के अंदर की संपत्ति जिसे हम ईवेंट को सब्सक्राइब करना चाहते हैं, ईवेंटनेम उस इवेंट का नाम है जिसे हम सब्सक्राइब कर रहे हैं। Yandex के नक्शे का मूल ईवेंट ऑब्जेक्ट $event पैरामीटर के माध्यम से ईवेंट हैंडलर को दिया जाता है। आप $event.get('target') माध्यम से ईवेंट को उठाने वाली वस्तु प्राप्त कर सकते हैं। तो, चलिए मैप click इवेंट और geoObjects मैप प्रॉपर्टी add इवेंट की सदस्यता geoObjects हैं।

 <ya-map ya-zoom="10" ya-event-click="click($event)" ya-event-geo-objects-add="added($event)"></ya-map> 

 $scope.click = function(e){ //-      }; $scope.added=function(e){ //-       }; 

नक्शे में नियंत्रण जोड़ना उतना ही आसान है। yaToolbar निर्देश का उपयोग करके मानक नियंत्रण जोड़े जाते हैं, और यदि आप अपना स्वयं का पैनल बनाना चाहते हैं (या किसी मौजूदा को अपग्रेड करना चाहते हैं), तो yaControl निर्देशों को इसके अंदर रखा जाता है। एक उदाहरण:

 <ya-map ya-zoom="8" ya-center="[37.64,55.76]"> <!--    --> <ya-toolbar ya-name="zoomControl"></ya-toolbar> <!--    --> <ya-toolbar ya-name="toolBar"> <ya-control ya-type="button" ya-params=": balloonHeader" ya-event-select="balloonHeader($event)" ya-event-deselect="balloonHeader($event)"></ya-control> </ya-toolbar> </ya-map> 

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