- खास जानकारी
- लाइब्रेरी का इस्तेमाल करके
- DrawingManager विकल्प
- ड्रॉइंग टूल का कंट्रोल अपडेट करना
- ड्रॉइंग के इवेंट
खास जानकारी
DrawingManager
क्लास, उपयोगकर्ताओं को मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर बनाने के लिए, ग्राफ़िकल इंटरफ़ेस उपलब्ध कराता है.
लाइब्रेरी का इस्तेमाल करना
ड्रॉइंग टूल एक पूरी जानकारी वाली लाइब्रेरी है, जो मुख्य एपीआई एपीआई कोड से अलग होती है. इस लाइब्रेरी में मौजूद सुविधा का इस्तेमाल करने के लिए, आपको पहले इसे Maps API बूटस्ट्रैप यूआरएल में libraries
पैरामीटर का इस्तेमाल करके लोड करना होगा:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>
लाइब्रेरी पैरामीटर जोड़ने के बाद, DrawingManager
ऑब्जेक्ट इस तरह से बनाया जा सकता है:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
DrawingsManager के विकल्प
DrawingManager
कंस्ट्रक्टर, ऐसे विकल्पों का सेट लेता है जो दिखाए जाने वाले कंट्रोल के सेट, कंट्रोल की स्थिति, और ड्रॉइंग की शुरुआती स्थिति के बारे में बताते हैं.
DrawingManager
कीdrawingMode
प्रॉपर्टी, Drawings_Manager के शुरू होने की स्थिति के बारे में बताती है. इसमेंgoogle.maps.drawing.OverlayType
कॉन्सटेंट स्वीकार किया जाता है. डिफ़ॉल्टnull
होता है. इस मामले में, DrawingsManager शुरू किए जाने पर, कर्सर नॉन-ड्रॉ मोड में रहता है.DrawingManager
कीdrawingControl
प्रॉपर्टी से यह पता चलता है कि मैप पर ड्रॉइंग टूल चुनने वाला इंटरफ़ेस किसको दिख रहा है. यह बूलियन वैल्यू स्वीकार करता है.DrawingManager
कीdrawingControlOptions
प्रॉपर्टी का इस्तेमाल करके, कंट्रोल की पोज़िशन के बारे में भी बताया जा सकता है. साथ ही, यह भी बताया जा सकता है कि कंट्रोल किस तरह के ओवरले होने चाहिए.position
मैप पर ड्रॉइंग कंट्रोल की जगह के बारे में बताता है, औरgoogle.maps.ControlPosition
कॉन्सटेंट स्वीकार करता है.drawingModes
,google.maps.drawing.OverlayType
कॉन्सटेंट की श्रेणी है और आरेखण के आकार को चुनने के टूल में शामिल करने के लिए ओवरले के प्रकार तय करता है. हाथ का आइकॉन हमेशा मौजूद रहेगा, जिससे उपयोगकर्ता बिना ड्रॉइंग किए मैप से इंटरैक्ट कर सकेगा. नियंत्रण में टूल के क्रम का मिलान उस क्रम में होगा जिस क्रम में वे श्रेणी में बताए गए हैं.
- हर तरह के ओवरले को डिफ़ॉल्ट प्रॉपर्टी का एक सेट असाइन किया जा सकता है, जो पहली
बनाए जाने पर ओवरले की दिखावट को परिभाषित करता है. इन्हें उस ओवरले की
{overlay}Options
प्रॉपर्टी में दिखाया जाता है (जहां{overlay}
ओवरले टाइप को दिखाता है). उदाहरण के लिए, किसी सर्कल की फ़िल प्रॉपर्टी, स्ट्रोक प्रॉपर्टी, zइंडेक्स, और क्लिक करने की योग्यता कोcircleOptions
प्रॉपर्टी के साथ तय किया जा सकता है. साइज़, जगह या मैप की वैल्यू पास करने पर, उन्हें अनदेखा कर दिया जाता है. कौनसी प्रॉपर्टी सेट की जा सकती हैं, इसकी पूरी जानकारी के लिए, एपीआई के रेफ़रंस दस्तावेज़ देखें.
ध्यान दें: आकार बनाने के बाद, उपयोगकर्ता में बदलाव करने के लिए, उसकी editable
प्रॉपर्टी को true
पर सेट करें.
TypeScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, } ); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, 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, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example requires the Drawing library. Include the libraries=drawing // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, }); const drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, 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, google.maps.drawing.OverlayType.POLYLINE, google.maps.drawing.OverlayType.RECTANGLE, ], }, markerOptions: { icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", }, circleOptions: { fillColor: "#ffff00", fillOpacity: 1, strokeWeight: 5, clickable: false, editable: true, zIndex: 1, }, }); drawingManager.setMap(map); } window.initMap = initMap;
सैंपल आज़माएं
Drawings के टूल कंट्रोल को अपडेट करना
DrawingManager
ऑब्जेक्ट बन जाने के बाद, setOptions()
को कॉल करके और नई वैल्यू पास करके, उसे अपडेट किया जा सकता है.
drawingManager.setOptions({ drawingControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT, drawingModes: ['marker'] } });
ड्रॉइंग टूल का कंट्रोल छिपाने या दिखाने के लिए:
// To hide: drawingManager.setOptions({ drawingControl: false }); // To show: drawingManager.setOptions({ drawingControl: true });
map
ऑब्जेक्ट से ड्रॉइंग टूल कंट्रोल हटाने के लिए:
drawingManager.setMap(null);
ड्रॉइंग कंट्रोल को छिपाने पर, ड्रॉइंग टूल का कंट्रोल नहीं दिखता है. हालांकि, DrawingManager
क्लास की सभी सुविधाएं अब भी उपलब्ध हैं.
इस तरह से, आप चाहें तो अपने खुद के नियंत्रण को लागू कर सकते हैं. map
ऑब्जेक्ट से DrawingManager
को निकालने से सभी आरेखण फ़ंक्शन काम नहीं करते हैं; अगर ड्रॉइंग सुविधाओं को बहाल करना है, तो इसे drawingManager.setMap(map)
के साथ मैप पर या किसी नए DrawingManager
ऑब्जेक्ट के साथ फिर से अटैच किया जाना चाहिए.
ड्रॉइंग इवेंट
जब कोई आकार ओवरले बनाया जाता है, तो दो इवेंट सक्रिय किए जाते हैं:
{overlay}complete
इवेंट (जहां{overlay}
ओवरले जैसे,circlecomplete
,polygoncomplete
वगैरह दिखाता है). ओवरले का एक रेफ़रंस आर्ग्युमेंट के तौर पर पास किया जाता है.overlaycomplete
इवेंट. एक ऑब्जेक्ट लिटरल, जिसमेंOverlayType
शामिल हो और ओवरले की जानकारी हो, को एक आर्ग्युमेंट के तौर पर पास किया जाता है.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) { var radius = circle.getRadius(); }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { if (event.type == 'circle') { var radius = event.overlay.getRadius(); } });
ध्यान दें कि मैप पर ड्रॉइंग करते समय, google.maps.Map
इवेंट जैसे कि click
और mousemove
बंद होते हैं.