- खास जानकारी
- लाइब्रेरी का इस्तेमाल करना
- DrawingManager के लिए विकल्प
- ड्रॉइंग टूल कंट्रोल को अपडेट करना
- ड्रॉइंग इवेंट
खास जानकारी
DrawingManager
क्लास, उपयोगकर्ताओं को ड्रॉइंग करने के लिए ग्राफ़िकल इंटरफ़ेस उपलब्ध कराती है
मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर.
लाइब्रेरी का इस्तेमाल करना
ड्रॉइंग टूल एक खुद की लाइब्रेरी है, जो मुख्य Maps से अलग है
API JavaScript कोड. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए,
आपको सबसे पहले इसे लोड करने के लिए, libraries
पैरामीटर का इस्तेमाल
Maps API बूटस्ट्रैप यूआरएल:
<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
वैल्यू होती है. इस स्थिति में कर्सर, ड्राफ़्ट के तौर पर नहीं दिखता है मोड चालू करें.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;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
ड्रॉइंग टूल कंट्रोल को अपडेट करना
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
जैसे इवेंट बंद होते हैं.