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

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

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