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 vĩ độ/kinh độ của địa điểm, do đó chúng sẽ di chuyển khi bạn kéo hoặc thu phóng bản đồ. Nếu muốn đặt hình ảnh lê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 Vẽ trên bản đồ.

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

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

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

Dùng thử mẫu

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

Để xoá một lớp phủ khỏi bản đồ, hãy gọi setMap(), truyền null. Lưu ý rằng thì 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 đồ. Thay vào đó, nếu bạn muốn xoá lớp phủ, bạn nên xoá quy tắc này khỏi bản đồ, sau đó đặt tự phủ lên null.

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

Xem ví dụ