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

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