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

Maps JavaScript API cung cấp 2 cách triển khai bản đồ: raster và vectơ. Bản đồ raster tải bản đồ dưới dạng lưới các ô hình ảnh raster dựa trên pixel, do Google Maps Platform tạo ở phía máy chủ, sau đó được phân phát cho ứng dụng web của bạn. Bản đồ vectơ bao gồm các ô dựa trên vectơ, được vẽ trong thời gian 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 để hiển thị đồ 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 cải thiện độ trung thực về mặt hình ảnh, cải thiện khả năng lưu vào bộ nhớ đệm trên các bản đồ, 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ơ.

Loại hiển thị mặc định

Loại hiển thị mặc định của bản đồ sẽ khác nhau tuỳ thuộc vào cách triển khai của bạn.

  • Các bản đồ sử dụng phần tử <gmp-map> mặc định là loại hiển thị vectơ.

  • Các bản đồ sử dụng phần tử <div> có google.maps.Map mặc định là loại hiển thị raster.

Đặt loại hiển thị 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 hiển thị đượ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 hiển thị raster hoặc vectơ cho bản đồ (không cần mã bản đồ). Đối với các bản đồ được tải bằng phần tử div và JavaScript, loại hiển thị mặc định là google.maps.RenderingType.RASTER. Hãy thực hiện 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 bạn đặt loại hiển thị bản đồ vectơ, bạn phải đặt các tuỳ chọn cho những tính năng cần thiết.

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

Đối với các bản đồ được tải bằng phần tử <gmp-map>, loại hiển thị mặc định là google.maps.RenderingType.VECTOR, với tính năng kiểm soát độ nghiêng và hướng được bật. Để đặt loại hiển thị bằ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 hiển thị

Bạn cũng có thể chỉ định loại hiển thị bằng mã bản đồ. Tạo mã bản đồ bằng cách làm theo các bước trong Sử dụng kiểu bản đồ dựa trên đám mây – Lấy mã bản đồ. Nhớ đặt Loại bản đồ thành JavaScript rồi chọn một tuỳ chọn (Vectơ hoặc Raster). Đánh dấu vào Độ nghiêng và Xoay để bật độ nghiêng và xoay trên bản đồ. Khi làm như vậy, bạn sẽ có thể đ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 tiêu cực đến ứng dụng của bạn, hãy để Độ nghiêng và Xoay ở trạng thái không được đánh dấu để người dùng không thể điều chỉnh độ nghiêng và xoay.

Tạo mã nhận dạng bản đồ vectơ

Tiếp theo, hãy cập nhật mã khởi chạy bản đồ bằng mã bản đồ mà bạn đã tạo. Bạn có thể tìm thấy mã bản đồ trên trang Quản lý bản đồ. Cung cấp mã bản đồ khi bạn tạo thực thể bản đồ bằng thuộc tính mapId như minh hoạ dưới đây:

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

Phát hiện loại hiển thị đang được sử dụng

Để phát hiện loại hiển thị được sử dụng, hãy gọi getRenderingType() trên đối tượng bản đồ, như minh hoạ trong ví dụ sau:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```