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

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&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;
index.ts

ध्यान दें: टाइपस्क्रिप्ट और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

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

ध्यान दें: JavaScript को टाइपस्क्रिप्ट स्निपेट से इकट्ठा किया जाता है.

उदाहरण देखें

नमूना आज़माएं

JSFiddle.net Google क्लाउड शेल

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

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