Google मैप्स एपीआई V3 में नई ड्राइंग लाइब्रेरी

हाल ही में, Google मैप्स API V3 में एक नई ड्रॉइंग लाइब्रेरी सामने आई है। यह उन उपकरणों का एक सेट प्रदान करता है जिसके साथ उपयोगकर्ता मानचित्र पर विभिन्न स्थानों को उजागर करने के लिए मानचित्र पर मार्कर, रेखाएँ, वृत्त, आयत, बहुभुज रख सकते हैं।



इन उपकरणों का उपयोग उपयोगकर्ताओं से विभिन्न जानकारी एकत्र करने के लिए किया जा सकता है। कोई एप्लिकेशन ईवेंट्स को सुन सकता है और तदनुसार प्रतिक्रिया कर सकता है, उदाहरण के लिए, किसी डेटाबेस में खोज क्वेरी या भंडारण जानकारी बनाकर।

Google मैप्स को जोड़ते समय ड्राइंग लाइब्रेरी के साथ काम करने के लिए, लाइब्रेरीज़ = ड्राइंग पैरामीटर जोड़ें:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script> 

DrawingManager:

इस लाइब्रेरी से DrawingManager वर्ग उपयोगकर्ताओं के लिए एक ग्राफिकल इंटरफ़ेस प्रदान करता है। इसमें पॉलीगॉन, आयताकार, टूटी हुई रेखाएं, वृत्त और मानचित्र पर मार्कर शामिल हैं।

एक DrawingManager इस प्रकार बनाया जाता है:

 var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map); 

अब, मानचित्र पर कस्टम ड्राइंग टूल दिखाई दिए हैं।

विकल्प:

हम ठीक से कॉन्फ़िगर कर सकते हैं कि हम उपयोगकर्ता को कौन से उपकरण प्रदान करना चाहते हैं, साथ ही मानचित्र और दृश्य पर उनकी स्थिति क्या है:
ड्राइंगकंट्रोल - मानचित्र पर उपकरणों की दृश्यता निर्धारित करता है। यह बूलियन को सच / झूठ लगता है।

DrawingControlOptions - नक्शे पर टूल की स्थिति, साथ ही उन टूल की सूची निर्धारित करता है जिन्हें आप शामिल करना चाहते हैं।
- स्थिति - ड्राइंग टूल्स की स्थिति। डिफ़ॉल्ट TOP_LEFT है।
- DrawingModes - प्रदर्शित करने और उनके आदेश के लिए उपकरण। हाथ आइकन हमेशा उपलब्ध है और यह इस सरणी में इंगित नहीं किया गया है। डिफ़ॉल्ट [MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON] है।

रेखाचित्र - परिभाषित करता है कि कौन सा उपकरण डिफ़ॉल्ट रूप से चुना जाएगा।

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

आप यह भी निर्दिष्ट कर सकते हैं कि उपयोगकर्ता निर्माण के बाद आकार को संपादित करने में सक्षम होंगे या नहीं। ऐसा करने के लिए, संपादन योग्य विकल्प को सही पर सेट करें।

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

 var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON] }, drawingMode: google.maps.drawing.OverlayType.MARKER, markerOptions: { icon: new google.maps.MarkerImage('http://www.example.com/icon.png') }, circleOptions: { fillColor: '#ffffff', fillOpacity: 1, strokeWeight: 5, clickable: false, zIndex: 1, editable: true } }); 

विकल्प बदलें:

जब DrawingManager बनाया जाता है, तो इसे setOptions () फ़ंक्शन का उपयोग करके अपडेट किया जा सकता है।
उदाहरण के लिए, आप टूल के लिए एक नई स्थिति सेट कर सकते हैं:

 drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT } }); 

या हलकों का रंग भरें:

 drawingManager.setOptions({ circleOptions: { fillColor: '#000000' } }); 

या, उदाहरण के लिए, बटन पर क्लिक करके, टूलबार छिपाएँ या दिखाएँ:

 // To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true }); 

टूलबार प्रकट होने के बाद, इसके लिए आपके द्वारा निर्धारित सभी विकल्प सहेजे जाते हैं।

यदि आप टूलबार को पूरी तरह से हटाना चाहते हैं, तो आपको कॉल करने की आवश्यकता है:

 drawingManager.setMap(null); 

घटनाक्रम:

जब कोई उपयोगकर्ता किसी मानचित्र पर आकर्षित होता है, तो एक मार्कर सेट करता है, दो घटनाओं को ट्रिगर किया जाता है:
1) {ओवरले} पूरा - जहां {ओवरले} ऑब्जेक्ट का प्रकार है जिसे उपयोगकर्ता ने बनाया है, उदाहरण के लिए सर्कलकम्प्लीट, पॉलीगोनकंप्लीट, आदि)। इस ऑब्जेक्ट का एक संदर्भ एक तर्क के रूप में पारित किया जाता है।
2) overlaycomplete - ओवरले टाइप और बनाई गई ऑब्जेक्ट के लिए एक लिंक एक तर्क के रूप में पारित किया जाता है।

उदाहरण के लिए, जब कोई उपयोगकर्ता एक मार्कर सेट करता है, तो हम निर्देशांक प्राप्त कर सकते हैं और उन्हें प्रदर्शित कर सकते हैं या डेटाबेस में सहेज सकते हैं।

 google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) { console.log(marker.getPosition().toString()) }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == google.maps.drawing.OverlayType.MARKER) { console.log(' ') } }); 

संदर्भ:

पुस्तकालय संचालन उदाहरण
प्रलेखन