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

หน้านี้ได้รับการแปลโดย Cloud Translation API

ภาพรวม

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

มุมมองการวางซ้อนของ WebGL ช่วยให้คุณเพิ่มกราฟิก 2 มิติและ 3 มิติที่ออกแบบเอง รวมถึงเนื้อหาภาพเคลื่อนไหวลงในแผนที่ได้
ตอนนี้คุณปรับการเอียงและทิศทางแบบเป็นโปรแกรม รวมถึงใช้ท่าทางสัมผัสของแป้นพิมพ์และเมาส์ได้แล้ว
map.moveCamera() ช่วยให้คุณเปลี่ยนคุณสมบัติของกล้องหลายรายการพร้อมกันได้
ตอนนี้ Zoom รองรับค่าเศษส่วนแล้ว

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

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

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

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

โหลดไลบรารี RenderingType ซึ่งทำได้เมื่อโหลดไลบรารี Maps ดังนี้
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```
เมื่อเริ่มต้นแผนที่ ให้ใช้ตัวเลือก 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 แล้วเลือกตัวเลือก Vector เลือกการเอียงและ/หรือการหมุนเพื่อเปิดใช้การเอียงและการหมุนบนแผนที่ ซึ่งจะช่วยให้คุณปรับค่าเหล่านี้แบบเป็นโปรแกรมได้ และยังช่วยให้ผู้ใช้ปรับการเอียงและทิศทางบนแผนที่ได้โดยตรง หากการใช้การเอียงหรือการหันหน้าส่งผลเสียต่อแอปของคุณ โปรดอย่าเลือกการเอียงและการหมุนเพื่อให้ผู้ใช้ไม่สามารถปรับการเอียงและการหมุนได้

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

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

ตัวอย่าง

เรามีตัวอย่างที่แสดงให้เห็นถึงฟีเจอร์เหล่านี้