ड्रॉइंग लेयर (लाइब्रेरी)

  1. खास जानकारी
  2. लाइब्रेरी का इस्तेमाल करना
  3. DrawingManager के विकल्प
  4. ड्रॉइंग टूल के कंट्रोल को अपडेट करना
  5. ड्रॉइंग इवेंट

खास जानकारी

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 कन्स्ट्रक्टर, विकल्पों का एक सेट लेता है. इससे, दिखाए जाने वाले कंट्रोल का सेट, कंट्रोल की पोज़िशन, और ड्रॉइंग की शुरुआती स्थिति तय होती है.

  • DrawingManager की drawingMode प्रॉपर्टी, DrawingManager की शुरुआती खींची गई स्थिति तय करती है. यह google.maps.drawing.OverlayType के लिए एक वैल्यू स्वीकार करता है. डिफ़ॉल्ट रूप से, null सेट होता है. इस मामले में, DrawingManager के शुरू होने पर कर्सर, ड्रॉइंग मोड में नहीं होता.
  • DrawingManager की drawingControl प्रॉपर्टी से यह तय होता है कि मैप पर, ड्रॉइंग टूल चुनने के इंटरफ़ेस को दिखना है या नहीं. यह बोलियन वैल्यू स्वीकार करता है.
  • DrawingManager की drawingControlOptions प्रॉपर्टी का इस्तेमाल करके, कंट्रोल की पोज़िशन और कंट्रोल में दिखाए जाने वाले ओवरले के टाइप भी तय किए जा सकते हैं.
    • position, मैप पर ड्रॉइंग कंट्रोल की पोज़िशन तय करता है और google.maps.ControlPosition के लिए एक कॉन्स्टेंट स्वीकार करता है.
    • drawingModes, google.maps.drawing.OverlayType कॉन्स्टेंट का कलेक्शन है. साथ ही, यह ड्रॉइंग कंट्रोल के आकार के पिकर में शामिल करने के लिए, ओवरले टाइप तय करता है. हाथ का आइकॉन हमेशा मौजूद रहेगा. इससे उपयोगकर्ता, ड्रॉ किए बिना मैप के साथ इंटरैक्ट कर सकता है. कंट्रोल में टूल का क्रम, उसी क्रम से मेल खाएगा जिस क्रम में उन्हें ऐरे में दिखाया गया है.
  • हर तरह के ओवरले को डिफ़ॉल्ट प्रॉपर्टी का एक सेट असाइन किया जा सकता है. इससे, ओवरले को पहली बार बनाते समय उसके दिखने का तरीका तय होता है. इन्हें उस ओवरले की {overlay}Options प्रॉपर्टी में तय किया जाता है. यहां {overlay}, ओवरले के टाइप को दिखाता है. उदाहरण के लिए, circleOptions प्रॉपर्टी की मदद से, सर्कल की फ़िल प्रॉपर्टी, स्ट्रोक प्रॉपर्टी, zIndex, और क्लिक करने की सुविधा के बारे में बताया जा सकता है. अगर साइज़, जगह या मैप की कोई वैल्यू दी जाती है, तो उसे अनदेखा कर दिया जाता है. कौनसी प्रॉपर्टी सेट की जा सकती हैं, इसकी पूरी जानकारी के लिए एपीआई का रेफ़रंस दस्तावेज़ देखें.

ध्यान दें: किसी आकार को बनाने के बाद, उसे उपयोगकर्ता के लिए बदलाव करने लायक बनाने के लिए, उसकी 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;
index.ts

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;
index.js
उदाहरण देखें

सैंपल आज़माएं

ड्रॉइंग टूल कंट्रोल को अपडेट करना

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 जैसे इवेंट बंद रहते हैं.