ग्राउंड ओवरले

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript
  1. शुरुआती जानकारी
  2. ग्राउंड ओवरले जोड़ना
  3. ग्राउंड ओवरले हटाना

परिचय

ओवरले, मैप पर मौजूद ऐसे ऑब्जेक्ट होते हैं जो अक्षांश/देशांतर के निर्देशांक से जुड़े होते हैं. इसलिए, मैप को खींचने या ज़ूम करने पर, ये ऑब्जेक्ट भी अपने-आप खिसक जाते हैं. अगर आपको मैप पर कोई इमेज जोड़नी है, तो GroundOverlay ऑब्जेक्ट का इस्तेमाल करें.

अन्य तरह के ओवरले के बारे में जानने के लिए, मैप पर ड्रॉ करना लेख पढ़ें.

ग्राउंड ओवरले जोड़ना

GroundOverlay के लिए कन्स्ट्रक्टर, पैरामीटर के तौर पर इमेज का यूआरएल और इमेज का LatLngBounds बताता है. इमेज को मैप पर रेंडर किया जाएगा. साथ ही, उसे तय की गई सीमाओं के मुताबिक दिखाया जाएगा. इसके बाद, मैप के प्रोजेक्शन का इस्तेमाल करके उसे सही किया जाएगा.

TypeScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

let historicalOverlay;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 40.74, lng: -74.18 },
    }
  );

  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
let historicalOverlay;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds,
  );
  historicalOverlay.setMap(map);
}

window.initMap = initMap;
index.js
उदाहरण देखें

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

ग्राउंड ओवरले हटाना

मैप से ओवरले हटाने के लिए, null को पास करते हुए, ओवरले के setMap() तरीके को कॉल करें. ध्यान दें कि इस तरीके को कॉल करने से ओवरले नहीं मिटता. इससे मैप से ओवरले हट जाता है. अगर आपको ओवरले मिटाना है, तो आपको उसे मैप से हटाना होगा. इसके बाद, खुद ही ओवरले को null पर सेट करें.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

उदाहरण देखें