Hỗ trợ

Trang này liệt kê các vấn đề đã biết và cách giải quyết cho bản đồ vectơ và các tính năng WebGL.

Hỗ trợ trình duyệt/thiết bị

Bản xem trước tính năng WebGL hỗ trợ các trình duyệt và thiết bị giống như Maps JavaScript API. Để kiểm tra xem trình duyệt trên một thiết bị cụ thể có hỗ trợ WebGL hay không, hãy truy cập vào get.webgl.org hoặc caniuse.com. Vui lòng đảm bảo rằng tính năng tăng tốc phần cứng được bật trong các chế độ cài đặt của trình duyệt, nếu không, bản đồ vectơ sẽ quay lại bản đồ đường quét.

Đường quét hay vectơ?

Đôi khi, bản đồ vectơ có thể quay lại bản đồ đường quét. Khi điều này xảy ra, các tính năng phụ thuộc vào bản đồ vectơ sẽ không dùng được. Việc quay lại bản đồ đường quét có thể xảy ra vì nhiều lý do. Phần này cho bạn biết cách định cấu hình đúng cách trình duyệt web và cách kiểm tra theo phương thức lập trình xem có tính năng bản đồ vectơ hay không.

Kiểm tra các tính năng của trình duyệt trên Chrome

Để xác định những tính năng tăng tốc phần cứng được bật trong một bản cài đặt cụ thể của Chrome, hãy chuyển đến chrome://gpu/ và đảm bảo rằng các mục sau đây được bật (màu xanh lục):

• "OpenGL: Đã bật"
• "WebGL: Đã tăng tốc phần cứng"
• "WebGL2: Đã tăng tốc phần cứng"

(Đây chỉ là các yêu cầu cơ bản, có thể có các yếu tố khác ảnh hưởng đến việc hỗ trợ, hãy xem phần "Lỗi đã biết" bên dưới.)

Bật tính năng tăng tốc phần cứng

Để hỗ trợ bản đồ vectơ, bạn phải bật tính năng tăng tốc phần cứng trong hầu hết các trình duyệt. Để bật tính năng tăng tốc phần cứng trong Chrome và Microsoft Edge, hãy mở Cài đặt, chọn Hệ thống và đảm bảo rằng Sử dụng tính năng tăng tốc phần cứng (nếu có) được bật.

• Tìm hiểu cách thay đổi lựa chọn ưu tiên về trang web trong Safari.
• Tìm hiểu về chế độ cài đặt hiệu suất của Firefox.

Kiểm tra theo phương thức lập trình xem có bản đồ đường quét hay bản đồ vectơ hay không

Bạn có thể kiểm tra theo phương thức lập trình để xem bản đồ là bản đồ đường quét hay bản đồ vectơ bằng cách gọi map.getRenderingType(). Ví dụ sau đây cho thấy mã để theo dõi sự kiện renderingtype_changed và hiển thị cửa sổ thông tin cho biết bản đồ đường quét hay bản đồ vectơ đang được sử dụng.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

Bạn cũng có thể sử dụng ngữ cảnh kết xuất WebGL để kiểm tra việc hỗ trợ WebGL 2:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

Tìm hiểu các cách khác để phát hiện ngữ cảnh kết xuất WebGL theo phương thức lập trình.

Hỗ trợ web dành cho thiết bị di động

Tính năng hỗ trợ web dành cho thiết bị di động đối với bản đồ vectơ vẫn đang trong giai đoạn thử nghiệm. Nhà phát triển có thể sử dụng API ứng dụng để phát hiện trình duyệt web dành cho thiết bị di động và sử dụng mã bản đồ được liên kết với bản đồ đường quét thay vì bản đồ vectơ. Chúng tôi dự đoán hiệu suất kết xuất sẽ chậm hơn đối với một số thiết bị di động. Nếu bạn chọn sử dụng bản đồ vectơ trên web dành cho thiết bị di động, chúng tôi rất mong nhận được số liệu thống kê về hiệu suất và ý kiến phản hồi. Như trên, nếu tính năng hỗ trợ Bản đồ vectơ không dùng được, thì mã bản đồ vectơ sẽ tự động quay lại sử dụng bản đồ đường quét.

Lỗi

Lỗi đã biết

• Có một vấn đề đã biết trong Chrome trên một số thiết bị macOS có GPU AMD. Điều này có thể gây nhầm lẫn đặc biệt khi macOS chuyển đổi linh hoạt giữa các GPU trên các thiết bị có nhiều GPU, vì vậy, bản đồ vectơ có thể không dùng được tuỳ thuộc vào các ứng dụng khác đang chạy hoặc liệu màn hình bên ngoài có được kết nối hay không. Việc bật phần phụ trợ ANGLE Metal sắp ra mắt của Chrome có vẻ sẽ khắc phục vấn đề này trong một số trường hợp. Bạn có thể theo dõi các kế hoạch phát hành chung cho vấn đề này tại https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.

Báo cáo lỗi

• Vui lòng cập nhật trình duyệt và trình điều khiển GPU lên phiên bản mới nhất trước khi báo cáo lỗi.
• Đảm bảo rằng chế độ cài đặt tính năng tăng tốc phần cứng tại chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge) được bật. Trong Safari, chế độ cài đặt này sẽ tự động được bật trong macOS phiên bản 10.15 trở lên. Đối với(các) phiên bản macOS cũ hơn, vui lòng chuyển đến phần cài đặt nâng cao của Safari và đảm bảo rằng tuỳ chọn "Sử dụng tính năng tăng tốc phần cứng" được bật.
• Đưa đường liên kết đến mã mẫu jsfiddle vào báo cáo lỗi.
• Vui lòng chụp ảnh màn hình chrome://gpu (Chrome), about:support (Firefox) hoặc edge://gpu (Microsoft Edge), đính kèm thông tin liên quan đến GPU trong báo cáo lỗi nếu bạn gặp bất kỳ vấn đề nào về kết xuất.

Cho chúng tôi biết bạn nghĩ gì!

Chúng tôi trân trọng ý kiến phản hồi của bạn khi nỗ lực mang đến trải nghiệm bản đồ vectơ tốt nhất cho bạn và người dùng cuối. Vui lòng cho chúng tôi biết nếu:

• Có lỗi hoặc sự cố/lỗi mới nào về JavaScript mà bạn phát hiện trong ứng dụng web của mình.
• Độ trễ khởi động đối với bản đồ vectơ tệ hơn đáng kể so với bản đồ raster. Nếu đúng như vậy, thì các chỉ số về độ trễ khởi động sẽ rất hữu ích. Nói chung, chúng tôi muốn biết liệu độ trễ khởi động có vượt quá ngưỡng chấp nhận được hay không.
• Trải nghiệm bản đồ vectơ không được mượt mà như mong đợi. Nếu bạn ghi lại các chỉ số FPS hoặc giật, thì các chỉ số này so sánh như thế nào giữa bản đồ vectơ và bản đồ đường quét?
• Hiệu suất khác nhau rất nhiều theo trình duyệt.

Nếu bạn đã thiết lập thử nghiệm A/B để so sánh bản đồ vectơ với bản đồ đường quét, vui lòng chia sẻ mọi ý kiến phản hồi về hiệu suất mà bạn thu thập được, vì điều này sẽ rất hữu ích để giúp chúng tôi tinh chỉnh tính năng này.