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

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

ตั้งค่าประเภทการแสดงผลสำหรับแผนที่โดยระบุ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'
});