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ủ trên mặt đất
  3. Xoá lớp phủ trên mặt đất

Giới thiệu

Lớp phủ là các đối tượng trên bản đồ được gắn với toạ độ vĩ độ/kinh độ, vì vậy, các đối tượng này sẽ di chuyển khi bạn kéo hoặc thu phóng 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ủ trên 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 làm tham số. Hình ảnh sẽ hiển thị trên bản đồ, được ràng buộc theo các giới hạn đã cho và được điều chỉnh 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;

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

Thử mẫu

Xoá lớp phủ trên 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 đồ và sau đó đặt chính lớp phủ đó thành null.

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

Xem ví dụ