ภาพรวม

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

เริ่มต้นใช้งาน

หากต้องการใช้ฟีเจอร์ WebGL ใหม่ คุณต้องใช้แผนที่เวกเตอร์ ส่วนนี้จะแสดงวิธีใช้

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

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

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

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

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

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

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

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

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

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

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

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

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

ใช้องค์ประกอบ <gmp-map>

ระบบจะเปิดใช้แผนที่เวกเตอร์ การเอียง และทิศทางโดยค่าเริ่มต้นเมื่อใช้<gmp-map> ซึ่งช่วยให้คุณเพิ่มแผนที่ลงในหน้าเว็บได้โดยใช้ HTML ดูข้อมูลเพิ่มเติม

ตัวอย่าง

เราได้จัดเตรียมตัวอย่างเพื่อแสดงฟีเจอร์เหล่านี้ไว้แล้ว