Loại kết xuất (đường quét và vectơ)

API Maps JavaScript cung cấp hai cách triển khai bản đồ: đường quét và vectơ. Theo mặc định, bản đồ đường quét sẽ được tải và tải bản đồ dưới dạng lưới các ô hình ảnh đường quét dựa trên pixel do phía máy chủ của Google Maps Platform tạo ra, sau đó phân phát đến ứng dụng web của bạn. Bản đồ vectơ bao gồm các ô dựa trên vectơ được vẽ tại thời điểm tải ở phía máy khách bằng WebGL, một công nghệ web cho phép trình duyệt truy cập vào GPU trên thiết bị của người dùng để kết xuất đồ hoạ 2D và 3D. Bạn nên sử dụng loại bản đồ vectơ để mang lại trải nghiệm tốt nhất cho người dùng, vì loại bản đồ này giúp cải thiện độ trung thực của hình ảnh cũng như khả năng kiểm soát độ nghiêng và hướng trên bản đồ. Tìm hiểu thêm về các tính năng của bản đồ vectơ.

Đặt loại kết xuất cho bản đồ bằng cách chỉ định tuỳ chọn bản đồ renderingType hoặc bằng cách đặt tuỳ chọn trên mã bản đồ được liên kết. 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 đồ.

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 đồ). Đối với bản đồ được tải bằng phần tử div và JavaScript, loại kết xuất mặc định là google.maps.RenderingType.RASTER. Hãy làm theo các bước sau để đặt tuỳ chọn renderingType:

  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");

  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'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Khi đặt loại kết xuất bản đồ vectơ, bạn phải đặt các tuỳ chọn cho các tính năng cần thiết.

  • Để bật chế độ nghiêng, hãy đặt tuỳ chọn bản đồ tiltInteractionEnabled thành true hoặc gọi map.setTiltInteractionEnabled(true).
  • Để 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(true).

Đối với bản đồ được tải bằng phần tử <gmp-map>, loại kết xuất mặc định là google.maps.RenderingType.VECTOR, với chế độ điều khiển độ nghiêng và hướng được bật. Để đặt loại kết xuất bằng cách sử dụng phần tử <gmp-map>, hãy sử dụng thuộc tính rendering-type.

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 một tuỳ chọn (Vector (Vectơ) hoặc Raster (Mảng)). Đánh dấu vào Tilt (Nghiêng) và 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 Độ nghiêng và 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'
});