Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ภาพรวม

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

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

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

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

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

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

ตัวอย่าง

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