- खास जानकारी
- लाइब्रेरी का इस्तेमाल करना
- DrawingManager के विकल्प
- ड्रॉइंग टूल के कंट्रोल को अपडेट करना
- ड्रॉइंग इवेंट
खास जानकारी
DrawingManager
क्लास एक ग्राफ़िकल इंटरफ़ेस उपलब्ध कराती है. इससे उपयोगकर्ता, मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर बना सकते हैं.
लाइब्रेरी का इस्तेमाल करना
ड्रॉइंग टूल, अपने-आप में पूरी जानकारी वाली लाइब्रेरी होती है. यह मुख्य Maps API JavaScript कोड से अलग होती है. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए,
आपको पहले 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);
ड्रॉइंग मैनेजर के विकल्प
DrawingManager
कंस्ट्रक्टर, विकल्पों का एक ऐसा सेट लेता है जो दिखाए जाने वाले कंट्रोल के सेट, कंट्रोल की पोज़िशन, और ड्रॉइंग की शुरुआती स्थिति के बारे में बताता है.
DrawingManager
कीdrawingMode
प्रॉपर्टी, ड्रॉइंग मैनेजर की शुरुआती ड्रॉइंग की स्थिति बताती है. यहgoogle.maps.drawing.OverlayType
कॉन्सटेंट स्वीकार करता है. डिफ़ॉल्ट तौर पर यहnull
पर सेट होती है. इस स्थिति में, ड्रॉइंग मैनेजर शुरू किए जाने पर, कर्सर न बनाने वाले मोड में होता है.DrawingManager
कीdrawingControl
प्रॉपर्टी बताती है कि मैप पर ड्रॉइंग टूल चुनने वाले इंटरफ़ेस की 'किसको दिखे' सुविधा दिखेगी. यह बूलियन वैल्यू को स्वीकार करता है.DrawingManager
कीdrawingControlOptions
प्रॉपर्टी का इस्तेमाल करके, कंट्रोल की जगह और कंट्रोल में दिखाए जाने वाले ओवरले के टाइप भी तय किए जा सकते हैं.position
, मैप पर ड्रॉइंग कंट्रोल की जगह बताता है और उसेgoogle.maps.ControlPosition
कॉन्सटेंट स्वीकार करता है.drawingModes
,google.maps.drawing.OverlayType
कॉन्सटेंट की कैटगरी है और ड्रॉइंग कंट्रोल के शेप पिकर में शामिल करने के लिए, ओवरले टाइप के बारे में बताता है. हैंड आइकॉन हमेशा मौजूद रहेगा, जिससे उपयोगकर्ता बिना ड्रॉइंग किए मैप से इंटरैक्ट कर सकेगा. कंट्रोल में मौजूद टूल का क्रम, उस क्रम से मेल खाएगा जिसमें उन्हें अरे में बताया गया है.
- हर तरह के ओवरले को डिफ़ॉल्ट प्रॉपर्टी का एक सेट असाइन किया जा सकता है. ये प्रॉपर्टी, पहली बार बनाए जाने पर ओवरले की दिखावट के बारे में बताती हैं. इनके बारे में उस ओवरले की
{overlay}Options
प्रॉपर्टी में बताया जाता है (जहां{overlay}
, ओवरले टाइप को दिखाता है). उदाहरण के लिए, किसी सर्कल की फ़िल प्रॉपर्टी, स्ट्रोक प्रॉपर्टी, zIndex और क्लिक करने की जगह को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;
नमूना आज़माएं
ड्रॉइंग टूल के कंट्रोल को अपडेट करना
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(); } });
ध्यान रखें कि मैप पर ड्रॉ करते समय, click
और mousemove
जैसे google.maps.Map
के इवेंट बंद रहते हैं.