ประเภทการแสดงผล (แรสเตอร์และเวกเตอร์)

Maps JavaScript API มีการใช้งานแผนที่ 2 แบบ ได้แก่ แรสเตอร์ และเวกเตอร์ แผนที่แรสเตอร์จะโหลดแผนที่เป็นตารางของไทล์รูปภาพแรสเตอร์ที่อิงตามพิกเซล ซึ่งสร้างขึ้นที่ฝั่งเซิร์ฟเวอร์ของ Google Maps Platform จากนั้นจะแสดงต่อ เว็บแอปของคุณ ส่วนแผนที่เวกเตอร์ประกอบด้วยไทล์ที่อิงตามเวกเตอร์ ซึ่งจะ วาดเมื่อโหลดในฝั่งไคลเอ็นต์โดยใช้ WebGL ซึ่งเป็นเทคโนโลยีเว็บที่อนุญาตให้ เบราว์เซอร์เข้าถึง GPU ในอุปกรณ์ของผู้ใช้เพื่อแสดงผลกราฟิก 2 มิติและ 3 มิติ

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

ประเภทการแสดงผลเริ่มต้น

ประเภทการแสดงผลเริ่มต้นของแผนที่จะแตกต่างกันไปตามการติดตั้งใช้งาน

  • แผนที่ที่ใช้องค์ประกอบ <gmp-map> จะใช้การแสดงผลแบบเวกเตอร์เป็นค่าเริ่มต้น

  • แผนที่ที่ใช้องค์ประกอบ <div> ที่มี google.maps.Map จะใช้ประเภทการแสดงผลแบบแรสเตอร์โดยค่าเริ่มต้น

ตั้งค่าประเภทการแสดงผลสำหรับแผนที่โดยระบุตัวเลือกrenderingType map หรือตั้งค่าตัวเลือกในรหัสแผนที่ที่เชื่อมโยง renderingType ตัวเลือกจะลบล้างการตั้งค่าประเภทการแสดงผลที่กำหนดโดยการกำหนดค่ารหัสแผนที่

ระบุตัวเลือก renderingType

ใช้ตัวเลือก renderingType เพื่อระบุประเภทการแสดงผลแบบแรสเตอร์หรือเวกเตอร์สำหรับแผนที่ (ไม่ต้องใช้รหัสแผนที่) สำหรับแผนที่ที่โหลดโดยใช้องค์ประกอบ div และ JavaScript ประเภทการแสดงผลเริ่มต้นคือ google.maps.RenderingType.RASTER ทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าตัวเลือก renderingType

  1. โหลดRenderingType ไลบรารี ซึ่งทำได้เมื่อโหลดไลบรารี Maps 

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. เมื่อเริ่มต้นแผนที่ ให้ใช้ตัวเลือก renderingType เพื่อระบุ RenderingType.VECTOR หรือ RenderingType.RASTER

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

เมื่อตั้งค่าประเภทการแสดงผลแผนที่เวกเตอร์แล้ว คุณต้องตั้งค่าตัวเลือกสำหรับฟีเจอร์ที่จำเป็น

  • หากต้องการเปิดใช้การเอียง ให้ตั้งค่าtiltInteractionEnabledตัวเลือกแผนที่เป็น true หรือเรียกใช้ map.setTiltInteractionEnabled(true)
  • หากต้องการเปิดใช้การเลื่อน ให้ตั้งค่าheadingInteractionEnabledตัวเลือกแผนที่เป็น true หรือเรียกใช้ map.setHeadingInteractionEnabled(true)

สำหรับแผนที่ที่โหลดโดยใช้องค์ประกอบ <gmp-map> ประเภทการแสดงผลเริ่มต้นคือ google.maps.RenderingType.VECTOR โดยเปิดใช้การควบคุมการเอียงและส่วนหัว หากต้องการ ตั้งค่าประเภทการแสดงผลโดยใช้องค์ประกอบ <gmp-map> ให้ใช้แอตทริบิวต์ rendering-type

ใช้รหัสแผนที่เพื่อตั้งค่าประเภทการแสดงผล

นอกจากนี้ คุณยังระบุประเภทการแสดงผลได้โดยใช้รหัสแผนที่ สร้างรหัสแผนที่โดย ทำตามขั้นตอนในการใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ - รับรหัสแผนที่ อย่าลืมตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกตัวเลือก (เวกเตอร์ หรือแรสเตอร์) เลือกเอียงและหมุนเพื่อเปิดใช้การเอียงและการหมุน ในแผนที่ การดำเนินการนี้จะช่วยให้คุณปรับค่าเหล่านี้โดยอัตโนมัติได้ และ ยังช่วยให้ผู้ใช้ปรับการเอียงและส่วนหัวบนแผนที่ได้โดยตรงอีกด้วย หากการใช้การเอียง หรือการวางแนวจะส่งผลเสียต่อแอป ให้ปล่อยการเอียงและการหมุนไว้โดยไม่ต้องเลือก เพื่อให้ผู้ใช้ปรับการเอียงและการหมุนไม่ได้

สร้างรหัสแผนที่เวกเตอร์

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

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

ตรวจหาประเภทการแสดงผลที่ใช้อยู่

หากต้องการตรวจหาประเภทการแสดงผลที่ใช้ ให้เรียกใช้ getRenderingType() ในออบเจ็กต์แผนที่ ดังที่แสดงในตัวอย่างต่อไปนี้

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```