Lớp phủ mặt đất

Chọn nền tảng: Android iOS JavaScript
  1. Giới thiệu
  2. Thêm lớp phủ mặt đất
  3. Xoá lớp phủ mặt đất

Giới thiệu

Lớp phủ là các đối tượng trên bản đồ được liên kết với tọa độ vĩ độ/kinh độ, vì vậy, các đối tượng này sẽ di chuyển khi bạn kéo hoặc phóng to bản đồ. Nếu muốn đặt hình ảnh trên bản đồ, bạn có thể sử dụng đối tượng GroundOverlay.

Để biết thông tin về các loại lớp phủ khác, hãy xem phần Vẽ trên bản đồ.

Thêm lớp phủ mặt đất

Hàm khởi tạo cho GroundOverlay chỉ định URL của hình ảnh và LatLngBounds của hình ảnh dưới dạng tham số. Hình ảnh sẽ được kết xuất trên bản đồ, bị ràng buộc trong các giới hạn đã cho và tuân theo phép chiếu của bản đồ.

TypeScriptJavaScript
// 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
 
// 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
Xem ví dụ

Thử mẫu

Xoá lớp phủ mặt đất

Để xoá lớp phủ khỏi bản đồ, hãy gọi phương thức setMap() của lớp phủ, truyền null. Xin lưu ý rằng việc gọi phương thức này sẽ không xoá lớp phủ. Thao tác này sẽ xoá lớp phủ khỏi bản đồ. Nếu muốn xoá lớp phủ, bạn nên xoá lớp phủ đó khỏi bản đồ, sau đó đặt lớp phủ thành null.

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

Xem ví dụ