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

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

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

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

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

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

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

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

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

จากนั้นให้อัปเดตโค้ดการเริ่มต้นแผนที่ด้วยรหัสแผนที่ที่คุณสร้างขึ้น คุณดูรหัสแผนที่ได้ใน หน้า การจัดการ แผนที่ ระบุรหัสแผนที่เมื่อสร้างอินสแตนซ์ของแผนที่โดยใช้พร็อพเพอร์ตี้ 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()}`);
  });```