- खास जानकारी
- लाइब्रेरी का इस्तेमाल करना
- DrawingManager के विकल्प
- ड्रॉइंग टूल के कंट्रोल को अपडेट करना
- ड्रॉइंग इवेंट
खास जानकारी
DrawingManager
क्लास, उपयोगकर्ताओं को ग्राफ़िकल इंटरफ़ेस देती है. इसकी मदद से, वे मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर बना सकते हैं.
लाइब्रेरी का इस्तेमाल करना
ड्रॉइंग टूल, पूरी जानकारी वाली लाइब्रेरी होती है, जो Maps API के मुख्य JavaScript कोड से अलग होती है. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए, आपको सबसे पहले इसे Maps API बूटस्ट्रैप यूआरएल में libraries
पैरामीटर का इस्तेमाल करके लोड करना होगा:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=drawing&callback=initMap">
</script>
लाइब्रेरी पैरामीटर जोड़ने के बाद, इस तरह से DrawingManager
ऑब्जेक्ट बनाया जा सकता है:
var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map);
ड्रॉइंग मैनेजर के विकल्प
DrawingManager
कंस्ट्रक्टर, विकल्पों का एक ऐसा सेट लेता है जो दिखाए जाने वाले कंट्रोल के सेट, कंट्रोल की पोज़िशन, और ड्रॉइंग की शुरुआती स्थिति को तय करता है.
DrawingManager
कीdrawingMode
प्रॉपर्टी, ड्रॉइंग मैनेजर की शुरुआती ड्रॉइंग की स्थिति तय करती है. यहgoogle.maps.drawing.OverlayType
कॉन्सटेंट को स्वीकार करता है. डिफ़ॉल्ट तौर पर यहnull
पर सेट होती है. इस स्थिति में, DrawingsManager को शुरू किए जाने पर, कर्सर नॉन-ड्रॉइंग मोड में होता है.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
इवेंट बंद रहते हैं.