پوشش های زمینی

پلتفرم را انتخاب کنید: Android iOS JavaScript

1. مقدمه
2. یک روکش زمینی اضافه کنید
3. روکش زمین را بردارید

مقدمه

همپوشانی ها اشیایی روی نقشه هستند که به مختصات طول و عرض جغرافیایی گره خورده اند، بنابراین با کشیدن یا بزرگنمایی نقشه حرکت می کنند. اگر می خواهید یک تصویر را روی نقشه قرار دهید، می توانید از یک شی GroundOverlay استفاده کنید.

برای اطلاعات در مورد انواع دیگر همپوشانی، به طراحی روی نقشه مراجعه کنید.

یک روکش زمینی اضافه کنید

سازنده برای GroundOverlay یک URL از یک تصویر و 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

توجه: راهنمای استفاده از TypeScript و Google Maps را بخوانید.

جاوا اسکریپت

// 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

توجه: جاوا اسکریپت از قطعه TypeScript کامپایل شده است.

مشاهده نمونه

Sample را امتحان کنید

JSFiddle.net Google Cloud Shell

روکش زمین را بردارید

برای حذف همپوشانی از نقشه، متد setMap() null فراخوانی کنید. توجه داشته باشید که فراخوانی این روش همپوشانی را حذف نمی کند. پوشش را از نقشه حذف می کند. اگر در عوض می‌خواهید همپوشانی را حذف کنید، باید آن را از نقشه حذف کنید و سپس خود همپوشانی را روی null قرار دهید.

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

مشاهده نمونه