หน้าเว็บนี้แสดงรายการปัญหาที่ทราบแล้วและวิธีแก้ปัญหาเบื้องต้นสำหรับแผนที่เวกเตอร์และคุณลักษณะของ WebGL
การรองรับเบราว์เซอร์/อุปกรณ์
การแสดงตัวอย่างฟีเจอร์ WebGL รองรับเบราว์เซอร์และอุปกรณ์เดียวกันกับ Maps JavaScript API หากต้องการตรวจสอบว่าเบราว์เซอร์ในอุปกรณ์หนึ่งๆ รองรับ WebGL หรือไม่ ให้ไปที่ get.webgl.org หรือ caniuse.com และโปรดตรวจสอบให้แน่ใจว่า เปิดใช้งานการเร่งฮาร์ดแวร์ในการตั้งค่าเบราว์เซอร์หรือไม่ใช่แผนที่เวกเตอร์ จะเปลี่ยนกลับเป็นแรสเตอร์
แรสเตอร์หรือเวกเตอร์
ในบางครั้ง แผนที่เวกเตอร์อาจกลับไปใช้แรสเตอร์ ในกรณีนี้ ฟีเจอร์ ไม่สามารถใช้แผนที่เวกเตอร์ได้ อาจเกิดการสำรองแผนที่แรสเตอร์ ด้วยเหตุผลหลายประการ ส่วนนี้จะแสดงวิธีกำหนดค่าอย่างถูกต้อง เว็บเบราว์เซอร์ของคุณ และวิธีตรวจสอบแบบเป็นโปรแกรมว่าแผนที่เวกเตอร์หรือไม่ ของความสามารถ
ตรวจสอบความสามารถของเบราว์เซอร์ใน Chrome
ในการระบุว่ามีการเปิดใช้ความสามารถในการเร่งฮาร์ดแวร์ใน สำหรับการติดตั้ง Chrome ให้ไปที่ chrome://gpu/ และตรวจสอบว่า เปิดใช้รายการต่อไปนี้แล้ว (สีเขียว)
- "OpenGL: เปิดใช้"
- "WebGL: เร่งฮาร์ดแวร์"
- "WebGL2: เร่งฮาร์ดแวร์"
(นี่เป็นเพียงข้อกำหนดพื้นฐานเท่านั้น แต่ก็อาจมีปัจจัยอื่นๆ ส่งผลต่อการสนับสนุน โปรดดู "ข้อบกพร่องที่ทราบ" below.)
เปิดใช้การเร่งฮาร์ดแวร์
ในการสนับสนุนแผนที่เวกเตอร์ จะต้องเปิดใช้การเร่งฮาร์ดแวร์ใน เบราว์เซอร์ หากต้องการเปิดใช้การเร่งฮาร์ดแวร์ใน Chrome และ Microsoft Edge ให้เปิด การตั้งค่า เลือกระบบ และตรวจสอบว่าใช้การเร่งฮาร์ดแวร์ เมื่อเปิดใช้
- ดูวิธีเปลี่ยนแปลงค่ากำหนดเว็บไซต์ใน Safari
- เรียนรู้เกี่ยวกับการตั้งค่าประสิทธิภาพของ Firefox
ตรวจสอบแรสเตอร์หรือเวกเตอร์โดยใช้โปรแกรม
คุณสามารถตรวจสอบเพื่อดูว่าแผนที่เป็นแรสเตอร์หรือเวกเตอร์โดยใช้โปรแกรม
กำลังโทรหา map.getRenderingType()
ตัวอย่างต่อไปนี้แสดงโค้ดที่ต้องตรวจสอบ
renderingtype_changed
และแสดงหน้าต่างข้อมูลที่แสดงว่า
ใช้แรสเตอร์หรือแผนที่เวกเตอร์อยู่
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;
นอกจากนี้ คุณยังสามารถใช้บริบทการแสดงผล WebGL เพื่อตรวจสอบการรองรับ WebGL 2 ดังนี้
const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");
ดูวิธีอื่นๆ ในการตรวจหาบริบทการแสดงผลของ WebGL แบบเป็นโปรแกรม
การสนับสนุนเว็บบนอุปกรณ์เคลื่อนที่
การสนับสนุนเว็บบนมือถือสำหรับแผนที่เวกเตอร์ยังคงเป็นรุ่นทดลอง นักพัฒนาแอปสามารถใช้ API ของไคลเอ็นต์เพื่อตรวจหาเว็บเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ และใช้รหัสแผนที่ที่เชื่อมโยงกับ แผนที่แรสเตอร์แทนแผนที่เวกเตอร์ เราคาดว่าประสิทธิภาพการแสดงผลจะช้าลง สำหรับอุปกรณ์เคลื่อนที่บางรุ่น หากคุณเลือกใช้แผนที่เวกเตอร์ในเว็บบนอุปกรณ์เคลื่อนที่ เราขอขอบคุณเป็นอย่างยิ่งเกี่ยวกับสถิติประสิทธิภาพและข้อเสนอแนะ ดังที่กล่าวมา หาก การสนับสนุนแผนที่เวกเตอร์ไม่พร้อมให้บริการ รหัสแผนที่เวกเตอร์จะแสดงโดยอัตโนมัติ กลับไปใช้แผนที่แรสเตอร์แทน
ข้อบกพร่อง
ข้อบกพร่องที่ทราบ
- มีปัญหาที่ทราบใน Chrome ในอุปกรณ์ macOS บางรุ่นที่มี AMD GPU วิธีนี้ คุณจะสับสนเป็นพิเศษเมื่อ macOS สลับระหว่าง GPU แบบไดนามิกใน อุปกรณ์ที่มี GPU หลายตัว ดังนั้นแผนที่เวกเตอร์อาจใช้ไม่ได้ ซึ่งขึ้นอยู่กับ แอปพลิเคชันอื่นทำงานอยู่หรือไม่ หรือมีการเชื่อมต่อจอภาพภายนอกหรือไม่ การเปิดแบ็กเอนด์ ANGLE Metal ที่กำลังจะมาถึงของ Chrome จะช่วยแก้ปัญหานี้ได้ใน บางกรณี คุณสามารถติดตามแผนการเปิดตัวโดยทั่วไปสำหรับการใช้งานนี้ได้ที่ https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.
การรายงานข้อบกพร่อง
- โปรดอัปเดตเบราว์เซอร์และไดรเวอร์ GPU เป็นเวอร์ชันล่าสุดก่อนที่จะรายงานข้อบกพร่อง
- ตรวจสอบว่าการตั้งค่าการเร่งฮาร์ดแวร์ที่
chrome://settings/system
(Chrome),about:preferences#general
(Firefox),edge://settings/system
(Microsoft Edge) เปิดอยู่ การตั้งค่านี้จะเปิดใช้โดยอัตโนมัติใน macOS เวอร์ชัน 10.15 ขึ้นไป สำหรับ MacOS เวอร์ชันเก่า โปรดไปที่การตั้งค่าขั้นสูงของ Safari และตรวจสอบว่าตัวเลือก "ใช้การเร่งฮาร์ดแวร์" แล้ว - รวมลิงก์โค้ดตัวอย่าง jsfiddle ในรายงานข้อบกพร่อง
- โปรดถ่ายภาพหน้าจอของ
chrome://gpu
(Chrome),about:support
(Firefox) หรือedge://gpu
(Microsoft Edge) และแนบข้อมูลที่เกี่ยวข้องกับ GPU ในรายงานข้อบกพร่องหากพบปัญหาในการแสดงผล
บอกให้เรารู้ว่าคุณคิดอย่างไร
เราให้ความสำคัญกับความคิดเห็นของคุณ เนื่องจากเรามุ่งมั่นที่จะทำให้แผนที่เวกเตอร์ที่ดีที่สุด คุณและผู้ใช้ปลายทาง โปรดแจ้งให้เราทราบในกรณีต่อไปนี้
- มีข้อผิดพลาดหรือข้อบกพร่อง/ข้อขัดข้องใหม่ๆ ของ JavaScript ซึ่งคุณตรวจพบใน เว็บแอป
- เวลาในการตอบสนองเริ่มต้นสำหรับแผนที่เวกเตอร์นั้นแย่กว่าแรสเตอร์เป็นอย่างมาก แผนที่ ในกรณีนี้ เมตริกสำหรับ การถดถอยของเวลาในการตอบสนองของสตาร์ทอัพจะ มีประโยชน์ โดยทั่วไป เราต้องการทราบว่าเวลาในการตอบสนองของสตาร์ทอัพถดถอยหลังจาก ที่ยอมรับได้
- ประสบการณ์การใช้แผนที่เวกเตอร์ไม่ลื่นไหลอย่างที่ควรจะเป็น หากคุณบันทึก FPS หรือ เมตริกที่ยุ่งยาก การเปรียบเทียบระหว่างแผนที่เวกเตอร์และแผนที่แรสเตอร์เป็นอย่างไร
- ประสิทธิภาพมีความแตกต่างกันมากตามเบราว์เซอร์
หากคุณตั้งค่าการทดสอบ A/B เพื่อเปรียบเทียบแผนที่เวกเตอร์กับแผนที่แรสเตอร์ โปรดแชร์ความคิดเห็นเกี่ยวกับประสิทธิภาพที่คุณได้รับ เนื่องจากจะเป็นประโยชน์มาก เพื่อช่วยเราปรับแต่งฟีเจอร์นี้