การสนับสนุน

หน้านี้แสดงรายการปัญหาที่ทราบและวิธีแก้ปัญหาชั่วคราวสำหรับแผนที่เวกเตอร์และฟีเจอร์ WebGL

การรองรับเบราว์เซอร์/อุปกรณ์

ตัวอย่างฟีเจอร์ WebGL รองรับเบราว์เซอร์และอุปกรณ์เดียวกับ Maps JavaScript API หากต้องการตรวจสอบว่าเบราว์เซอร์ในอุปกรณ์หนึ่งๆ จะรองรับ WebGL หรือไม่ ให้ไปที่ get.webgl.org หรือ caniuse.com นอกจากนี้ โปรดตรวจสอบว่าได้เปิดใช้การเร่งด้วยฮาร์ดแวร์ในการตั้งค่าเบราว์เซอร์แล้ว มิฉะนั้นแผนที่เวกเตอร์จะเปลี่ยนกลับไปเป็น แรสเตอร์

แรสเตอร์หรือเวกเตอร์

บางครั้งแผนที่เวกเตอร์อาจเปลี่ยนกลับไปเป็นแรสเตอร์ ในกรณีนี้ ฟีเจอร์ที่ขึ้นอยู่กับแผนที่เวกเตอร์จะใช้งานไม่ได้ การเปลี่ยนไปใช้แผนที่แรสเตอร์อาจเกิดขึ้นได้จากหลายสาเหตุ ส่วนนี้จะแสดงวิธีกำหนดค่าเว็บเบราว์เซอร์อย่างถูกต้อง และวิธีตรวจสอบแบบเป็นโปรแกรมว่าเว็บเบราว์เซอร์มีความสามารถของแผนที่เวกเตอร์หรือไม่

ตรวจสอบความสามารถของเบราว์เซอร์ใน Chrome

หากต้องการตรวจสอบว่าเปิดใช้ความสามารถการเร่งฮาร์ดแวร์ใดบ้างในการติดตั้ง Chrome หนึ่งๆ ให้ไปที่ chrome://gpu/ และตรวจสอบว่าได้เปิดใช้รายการต่อไปนี้ (เป็นสีเขียว)

  • "OpenGL: เปิดใช้"
  • "WebGL: เร่งด้วยฮาร์ดแวร์"
  • "WebGL2: เร่งด้วยฮาร์ดแวร์"

(ข้อกำหนดเหล่านี้เป็นเพียงข้อกำหนดพื้นฐานเท่านั้น อาจมีปัจจัยอื่นๆ ที่ส่งผลต่อการสนับสนุน โปรดดู "ข้อบกพร่องที่ทราบ" ด้านล่าง)

เปิดใช้การเร่งฮาร์ดแวร์

เบราว์เซอร์ส่วนใหญ่ต้องเปิดใช้การเร่งฮาร์ดแวร์จึงจะรองรับแผนที่เวกเตอร์ได้ หากต้องการเปิดใช้การเร่งฮาร์ดแวร์ใน Chrome และ Microsoft Edge ให้เปิดการตั้งค่า เลือกระบบ และตรวจสอบว่าได้เปิดใช้ใช้การเร่งฮาร์ดแวร์เมื่อใช้ได้

ตรวจสอบแรสเตอร์หรือเวกเตอร์แบบเป็นโปรแกรม

คุณสามารถตรวจสอบแบบเป็นโปรแกรมเพื่อดูว่าแผนที่เป็นแรสเตอร์หรือเวกเตอร์โดยเรียกใช้ 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;
index.ts

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

คุณยังใช้บริบทการแสดงผล 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 ดูเหมือนว่าจะแก้ไขปัญหานี้ได้ในบางกรณี คุณติดตามแผนเปิดตัวทั่วไปสำหรับฟีเจอร์นี้ได้ที่ 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 เพื่อเปรียบเทียบแผนที่เวกเตอร์กับแผนที่แรสเตอร์ โปรดแชร์ความคิดเห็นเกี่ยวกับประสิทธิภาพที่ได้รับ เนื่องจากข้อมูลนี้มีประโยชน์อย่างยิ่งในการช่วยเราปรับแต่งฟีเจอร์