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

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

खास जानकारी

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

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

ड्रॉइंग टूल एक खुद की लाइब्रेरी है, जो मुख्य Maps से अलग है API JavaScript कोड. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए, आपको सबसे पहले इसे लोड करने के लिए, libraries पैरामीटर का इस्तेमाल Maps API बूटस्ट्रैप यूआरएल:

<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 वैल्यू होती है. इस स्थिति में कर्सर, ड्राफ़्ट के तौर पर नहीं दिखता है मोड चालू करें.
  • 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
उदाहरण देखें

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

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

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 जैसे इवेंट बंद होते हैं.