區域疊加層

選取平台： 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

注意：請參閱這份指南，瞭解如何在 Google 地圖上使用 TypeScript。

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

注意：JavaScript 是從 TypeScript 程式碼片段編譯而成。

查看範例

測試範例程式碼

JSFiddle.net Google Cloud Shell

移除區域疊加層

如要從地圖上移除疊加層，請呼叫疊加層的 setMap() 方法，並傳遞 null。請注意，呼叫這個方法並不會刪除疊加層，只會從地圖中移除。如果要刪除疊加層，請先從地圖中移除，然後將疊加層本身設為 null。

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

查看範例