หน้านี้แสดงรายการปัญหาที่ทราบและวิธีแก้ปัญหาเบื้องต้นสำหรับแผนที่เวกเตอร์และคุณลักษณะของ WebGL
การรองรับเบราว์เซอร์/อุปกรณ์
การแสดงตัวอย่างฟีเจอร์ WebGL รองรับเบราว์เซอร์และอุปกรณ์เดียวกันกับ Maps JavaScript API หากต้องการตรวจสอบว่าเบราว์เซอร์ในอุปกรณ์ใดอุปกรณ์หนึ่งจะรองรับ WebGL หรือไม่ ให้ไปที่ get.webgl.org หรือ caniuse.com และอย่าลืมตรวจสอบว่ามีการเปิดใช้การเร่งฮาร์ดแวร์ในการตั้งค่าเบราว์เซอร์ มิเช่นนั้นแผนที่เวกเตอร์จะเปลี่ยนกลับไปเป็น แรสเตอร์
แรสเตอร์หรือเวกเตอร์
ในบางครั้ง แผนที่เวกเตอร์อาจเปลี่ยนกลับไปเป็นแรสเตอร์ เมื่อเกิดเหตุการณ์นี้ จุดสนใจ โดยขึ้นอยู่กับแผนที่เวกเตอร์จะไม่พร้อมใช้งาน การใช้แผนที่แรสเตอร์สำรองอาจเกิดขึ้น ด้วยเหตุผลหลายประการ ส่วนนี้จะแสดงวิธีกำหนดค่าเว็บเบราว์เซอร์ของคุณอย่างถูกต้อง และวิธีตรวจสอบโดยอัตโนมัติว่ามีความสามารถของแผนที่เวกเตอร์หรือไม่
ตรวจสอบความสามารถของเบราว์เซอร์ใน Chrome
หากต้องการดูว่ามีการเปิดใช้ความสามารถในการเร่งฮาร์ดแวร์แบบใดในการติดตั้ง Chrome ที่เฉพาะเจาะจง ให้ไปที่ chrome://gpu/ และตรวจสอบว่ารายการต่อไปนี้เปิดใช้อยู่ (สีเขียว)
- "OpenGL: เปิดใช้งาน"
- "WebGL: การเร่งฮาร์ดแวร์"
- "WebGL2: การเร่งฮาร์ดแวร์"
(นี่เป็นเพียงข้อกำหนดพื้นฐานและอาจมีปัจจัยอื่นๆ ที่ส่งผลต่อการสนับสนุน โปรดดู "ข้อบกพร่องที่ทราบ" ด้านล่าง)
เปิดใช้การเร่งฮาร์ดแวร์
เบราว์เซอร์ส่วนใหญ่ต้องเปิดใช้การเร่งฮาร์ดแวร์จึงจะรองรับแผนที่เวกเตอร์ได้ หากต้องการเปิดใช้การเร่งฮาร์ดแวร์ใน 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 บางรุ่นที่มี GPU ของ AMD ซึ่งอาจสร้างความสับสนได้อย่างมากเมื่อ macOS สลับระหว่าง GPU แบบไดนามิกในอุปกรณ์ที่มี GPU หลายตัว ดังนั้นแผนที่เวกเตอร์อาจไม่พร้อมใช้งาน โดยขึ้นอยู่กับว่ามีแอปอื่นทำงานอยู่หรือไม่ หรือจอภาพภายนอกเชื่อมต่ออยู่หรือไม่ การเปิดแบ็กเอนด์ ANGLE Metal ของ Chrome ที่กำลังจะเปิดให้บริการของ 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) แล้ว ใน Safari การตั้งค่านี้จะเปิดใช้โดยอัตโนมัติใน macOS เวอร์ชัน 10.15 หรือใหม่กว่า สำหรับ MacOS เวอร์ชันเก่า โปรดไปที่การตั้งค่าขั้นสูงของ Safari และตรวจสอบว่าได้เปิดใช้ตัวเลือก "ใช้การเร่งฮาร์ดแวร์" แล้ว - ใส่ลิงก์โค้ดตัวอย่าง jsfiddle ในรายงานข้อบกพร่อง
- โปรดถ่ายภาพหน้าจอของ
chrome://gpu
(Chrome),about:support
(Firefox) หรือedge://gpu
(Microsoft Edge) แล้วแนบข้อมูลที่เกี่ยวข้องกับ GPU ในรายงานข้อบกพร่องด้วยหากพบปัญหาในการแสดงผล
บอกให้เรารู้ว่าคุณคิดอย่างไร
เราให้ความสำคัญกับความคิดเห็นของคุณ เนื่องจากเรามุ่งมั่นที่จะสร้างประสบการณ์แผนที่เวกเตอร์ที่ดีที่สุดสำหรับคุณและผู้ใช้ปลายทางของคุณ โปรดแจ้งให้เราทราบในกรณีต่อไปนี้
- มีข้อผิดพลาดหรือข้อบกพร่อง/ข้อขัดข้องใหม่ของ JavaScript ที่ตรวจพบในเว็บแอป
- เวลาในการตอบสนองการเริ่มต้นสำหรับแผนที่เวกเตอร์แย่กว่ามากสำหรับแผนที่แรสเตอร์ ในกรณีนี้ เมตริกสำหรับการถดถอยของเวลาในการตอบสนองของสตาร์ทอัพจะมีประโยชน์มาก โดยทั่วไป เราอยากทราบว่าเวลาในการตอบสนองของสตาร์ทอัพนั้นถดถอยเกินเกณฑ์ที่ยอมรับได้หรือไม่
- ประสบการณ์แผนที่เวกเตอร์อาจไม่ราบรื่นเท่าที่ควร หากคุณบันทึกเมตริก FPS หรือ Jank เมตริกเหล่านี้เปรียบเทียบกันอย่างไรระหว่างแผนที่เวกเตอร์และแรสเตอร์
- ประสิทธิภาพการทำงานจะแตกต่างกันอย่างมากตามเบราว์เซอร์
หากคุณได้ตั้งค่าการทดสอบ A/B เพื่อเปรียบเทียบแผนที่เวกเตอร์กับแผนที่แรสเตอร์ โปรดแชร์ความคิดเห็นเกี่ยวกับประสิทธิภาพที่คุณได้รับเนื่องจากการดำเนินการนี้จะมีประโยชน์อย่างยิ่งในการช่วยเราปรับแต่งฟีเจอร์นี้