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 gắn với các 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 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 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 làm tham số. Hình ảnh sẽ được hiển thị trên bản đồ, ràng buộc theo các ranh giới đã 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;
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ụ

Thử đọc mẫu

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

Để xoá một 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 đồ. Thay vào đó, nếu bạn muốn xoá lớp phủ, bạn nên xoá lớp phủ đó khỏi bản đồ, sau đó đặt chính lớp phủ đó thành null.

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

Xem ví dụ