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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
  1. खास जानकारी
  2. लाइब्रेरी का इस्तेमाल करके
  3. DrawingManager विकल्प
  4. ड्रॉइंग टूल का कंट्रोल अपडेट करना
  5. ड्रॉइंग के इवेंट

खास जानकारी

DrawingManager क्लास, उपयोगकर्ताओं को मैप पर पॉलीगॉन, रेक्टैंगल, पॉलीलाइन, सर्कल, और मार्कर बनाने के लिए, ग्राफ़िकल इंटरफ़ेस उपलब्ध कराता है.

लाइब्रेरी का इस्तेमाल करना

ड्रॉइंग टूल एक पूरी जानकारी वाली लाइब्रेरी है, जो मुख्य एपीआई एपीआई कोड से अलग होती है. इस लाइब्रेरी में मौजूद सुविधा का इस्तेमाल करने के लिए, आपको पहले इसे 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);

DrawingsManager के विकल्प

DrawingManager कंस्ट्रक्टर, ऐसे विकल्पों का सेट लेता है जो दिखाए जाने वाले कंट्रोल के सेट, कंट्रोल की स्थिति, और ड्रॉइंग की शुरुआती स्थिति के बारे में बताते हैं.

  • DrawingManager की drawingMode प्रॉपर्टी, Drawings_Manager के शुरू होने की स्थिति के बारे में बताती है. इसमें google.maps.drawing.OverlayType कॉन्सटेंट स्वीकार किया जाता है. डिफ़ॉल्ट null होता है. इस मामले में, DrawingsManager शुरू किए जाने पर, कर्सर नॉन-ड्रॉ मोड में रहता है.
  • 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;
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
उदाहरण देखें

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

Drawings के टूल कंट्रोल को अपडेट करना

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 बंद होते हैं.