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

  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}, ओवरले टाइप को दिखाता है. उदाहरण के लिए, किसी सर्कल की फ़िल प्रॉपर्टी, स्ट्रोक प्रॉपर्टी, 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;
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.