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

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

खास जानकारी

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

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

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

ध्यान दें: TypeScript और 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 को TypeScript स्निपेट से कंपाइल किया जाता है.

उदाहरण देखें

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

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

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 को मैप पर बनाते समय बंद कर दिया गया है.