Tổng quan

Các tính năng dựa trên WebGL cho API Maps JavaScript cho phép bạn kiểm soát độ nghiêng và độ xoay, thêm các đối tượng 3D trực tiếp vào bản đồ, v.v. Bao gồm các tính năng sau:

Bắt đầu

Để sử dụng các tính năng WebGL mới, bạn phải sử dụng bản đồ vectơ. Phần này sẽ hướng dẫn bạn cách thực hiện.

Chỉ định tuỳ chọn renderingType

Sử dụng tuỳ chọn renderingType để chỉ định loại kết xuất vectơ hoặc đường quét cho bản đồ (không cần mã bản đồ):

  1. Tải thư viện RenderingType; bạn có thể thực hiện việc này khi tải thư viện Maps:

    const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  2. Khi khởi chạy bản đồ, hãy sử dụng tuỳ chọn renderingType để chỉ định RenderingType.VECTOR hoặc RenderingType.RASTER:

    map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Tuỳ chọn renderingType sẽ ghi đè mọi chế độ cài đặt loại kết xuất được thực hiện bằng cách định cấu hình mã bản đồ.

  • Để bật tính năng nghiêng và xoay, hãy đặt tuỳ chọn bản đồ tiltInteractionEnabled thành đúng hoặc gọi map.setTiltInteractionEnabled.
  • Để bật tính năng kéo, hãy đặt tuỳ chọn bản đồ headingInteractionEnabled thành true hoặc gọi map.setHeadingInteractionEnabled.

Sử dụng mã bản đồ để đặt loại kết xuất

Bạn cũng có thể chỉ định loại kết xuất bằng cách sử dụng mã bản đồ. Để tạo mã bản đồ mới, hãy làm theo các bước trong bài viết Sử dụng tính năng tạo kiểu bản đồ trên đám mây – Lấy mã bản đồ. Hãy nhớ đặt loại Bản đồ thành JavaScript và chọn tuỳ chọn Vector. Đánh dấu vào Tilt (Nghiêng) và/hoặc Rotation (Xoay) để bật tính năng nghiêng và xoay trên bản đồ. Việc này sẽ cho phép bạn điều chỉnh các giá trị này theo phương thức lập trình, đồng thời cho phép người dùng điều chỉnh độ nghiêng và hướng trực tiếp trên bản đồ. Nếu việc sử dụng độ nghiêng hoặc hướng sẽ ảnh hưởng bất lợi đến ứng dụng của bạn, hãy bỏ đánh dấu Tilt (Độ nghiêng) và Rotation (Xoay) để người dùng không thể điều chỉnh độ nghiêng và độ xoay.

Tạo mã bản đồ vectơ

Tiếp theo, hãy cập nhật mã khởi tạo bản đồ bằng mã bản đồ mà bạn đã tạo. Bạn có thể tìm thấy mã bản đồ của mình trên trang Quản lý bản đồ. Cung cấp mã nhận dạng bản đồ khi bạn tạo bản sao bản đồ bằng cách sử dụng thuộc tính mapId như sau:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Sử dụng phần tử <gmp-map>

Theo mặc định, bản đồ vectơ, độ nghiêng và hướng sẽ được bật khi sử dụng phần tử <gmp-map>. Phần tử này cho phép bạn thêm bản đồ vào trang bằng HTML. Tìm hiểu thêm.

Ví dụ

Chúng tôi đã cung cấp các ví dụ để minh hoạ những tính năng này: