Trang này liệt kê các sự cố đã biết và giải pháp 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ị tương tự 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 get.webgl.org hoặc caniuse.com. Hãy đảm bảo rằng tính năng tăng tốc phần cứng được bật trong cài đặt trình duyệt, nếu không, bản đồ vectơ sẽ hoàn nguyên về đường quét.
Đường quét hay vectơ?
Đôi khi, bản đồ vectơ có thể quay trở lại đường quét. Khi điều này xảy ra, bạn sẽ không có các đối tượng phụ thuộc vào bản đồ vectơ. Việc dự phòng cho 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 chính xác trình duyệt web và cách kiểm tra bằng cách lập trình xem khả năng bản đồ vectơ có xuất hiện hay không.
Kiểm tra các chức năng của trình duyệt trên Chrome
Để xác định khả năng tăng tốc phần cứng nào được bật trong một bản cài đặt Chrome cụ thể, hãy chuyển đến chrome://gpu/ và đảm bảo rằng các mục sau đã được bật (có 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ơ sở, có thể có các yếu tố khác ảnh hưởng đến dịch vụ hỗ trợ, hãy xem phần "Lỗi đã biết" bên dưới.)
Bật chế độ 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ở phần Cài đặt, chọn Hệ thống và đảm bảo bật tuỳ chọn Sử dụng chế độ tăng tốc phần cứng khi có sẵn.
- 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 đường quét hoặc vectơ theo phương thức lập trình
Bạn có thể lập trình để kiểm tra xem bản đồ là đường quét hay 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ị một cửa sổ thông tin cho biết liệu đường quét hoặc bản đồ vectơ có đang được sử dụng hay khô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;
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;
Bạn cũng có thể sử dụng bối cảnh kết xuất WebGL để kiểm tra xem có hỗ trợ WebGL 2 hay không:
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 cho 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 khách để phát hiện trình duyệt web dành cho thiết bị di động và sử dụng mã bản đồ 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 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 đánh giá cao số liệu thống kê về hiệu suất và ý kiến phản hồi. Như trên, nếu bản đồ vectơ không hỗ trợ, mã bản đồ vectơ sẽ tự động dự phòng sang 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ể đặc biệt khó hiểu khi macOS tự động chuyển đổi 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 xuất hiện, tuỳ thuộc vào những ứng dụng khác đang chạy hoặc 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ể làm theo kế hoạch phát hành chung cho tính năng 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 bạn đã bật chế độ tăng tốc phần cứng tại
chrome://settings/system(Chrome),about:preferences#general(Firefox),edge://settings/system(Microsoft Edge). Trong Safari, chế độ cài đặt này được bật tự động 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 bạn đã bật lựa chọn "Sử dụng chế độ tăng tốc phần cứng". - Thêm đường liên kết mã mẫu jsfiddle vào báo cáo lỗi.
- Ngoài ra, vui lòng chụp ảnh màn hình
chrome://gpu(Chrome),about:support(Firefox) hoặcedge://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ỳ sự cố kết xuất nào.
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 vì chúng tôi đang cố gắng mang đến trải nghiệm bản đồ vectơ tốt nhất cho bạn và người dùng cuối của bạn. Vui lòng cho chúng tôi biết nếu:
- Có bất kỳ lỗi hoặc lỗi/sự cố JavaScript mới nào mà bạn phát hiện trong các ứng dụng web của mình.
- Độ trễ khi khởi động đối với bản đồ vectơ kém hơn đáng kể so với bản đồ đường quét. Trong trường hợp này, các chỉ số để hồi quy độ trễ khi khởi động sẽ rất hữu ích. Nói chung, chúng tôi muốn biết liệu độ trễ khi khởi động có vượt quá ngưỡng chấp nhận 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, chúng so sánh như thế nào giữa bản đồ vectơ và bản đồ đường quét?
- Hiệu suất thay đổi đáng kể tuỳ 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 nhận đượ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.