3D Maps

Map3DElement

google.maps.maps3d.Map3DElement class

Map3DElement คืออินเทอร์เฟซ HTML สำหรับมุมมองแผนที่ 3 มิติ

องค์ประกอบที่กำหนดเอง:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled default-ui-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ Map3DElementOptions

เข้าถึงโดยการโทรหา const {Map3DElement} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
flyCameraAround	flyCameraAround(options) พารามิเตอร์:  options:  FlyAroundAnimationOptions ผลลัพธ์: ไม่มี วิธีนี้จะหมุนกล้องรอบๆ ตำแหน่งหนึ่งๆ เป็นระยะเวลาหนึ่งๆ โดยทำรอบตามจำนวนที่กำหนดในช่วงเวลานั้น โดยค่าเริ่มต้น กล้องจะหมุนตามเข็มนาฬิกา หากเป็นทศนิยมที่เป็นจำนวนลบสำหรับรอบ กล้องจะหมุนในทิศทางทวนเข็มนาฬิกาแทน วิธีการนี้เป็นแบบไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มขึ้นได้หลังจากที่แผนที่โหลดข้อมูลขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวเริ่มเล่น หากจำนวนรอบเป็น 0 ระบบจะไม่หมุนและภาพเคลื่อนไหวจะจบลงทันทีหลังจากเริ่ม
flyCameraTo	flyCameraTo(options) พารามิเตอร์:  options:  FlyToAnimationOptions ค่าการคืนสินค้า: ไม่มี วิธีนี้จะย้ายกล้องเป็นเส้นโค้งพาราโบลาจากตำแหน่งปัจจุบันไปยังตำแหน่งปลายที่กำหนดในระยะเวลาที่ระบุ วิธีการนี้เป็นแบบไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มขึ้นได้หลังจากที่แผนที่โหลดข้อมูลขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวเริ่มเล่น
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนํา Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของเครื่องจัดการเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
stopCameraAnimation	stopCameraAnimation() พารามิเตอร์: ไม่มี ผลลัพธ์: ไม่มี วิธีนี้จะหยุดภาพเคลื่อนไหวของผีเสื้อที่อาจกำลังทำงานอยู่ กล้องจะอยู่ในตำแหน่งที่แสดงอยู่กลางภาพเคลื่อนไหว จะไม่เทเลพอร์ตไปยังจุดสิ้นสุด วิธีนี้ไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มต้นหรือหยุดหลังจากแผนที่โหลดครบตามจำนวนขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวหยุดลง

Map3DElementOptions interface

อินเทอร์เฟซ google.maps.maps3d.Map3DElementOptions

ออบเจ็กต์ Map3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าใน Map3DElement ได้

FlyAroundAnimationOptions interface

google.maps.maps3d.FlyAroundAnimationOptions อินเทอร์เฟซ

ตัวเลือกการปรับแต่งสำหรับภาพเคลื่อนไหว FlyCameraAround

FlyToAnimationOptions interface

google.maps.maps3d.FlyToAnimationOptions อินเทอร์เฟซ

ตัวเลือกการปรับแต่งสำหรับภาพเคลื่อนไหวของ FlycameraTo

CameraOptions interface

google.maps.maps3d.CameraOptions อินเทอร์เฟซ

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

SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent class

เหตุการณ์นี้สร้างขึ้นจากการเฝ้าติดตามสถานะคงที่ของ Map3DElement เหตุการณ์นี้จะส่งผ่านไปยัง DOM Tree

คลาสนี้ขยายจาก Event

เข้าถึงโดยการโทรหา const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

LocationClickEvent class

google.maps.maps3d.LocationClickEvent class

เหตุการณ์นี้สร้างขึ้นจากการคลิก Map3DElement

คลาสนี้ขยายจาก Event

เข้าถึงโดยการโทรหา const {LocationClickEvent} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

PlaceClickEvent class

google.maps.maps3d.PlaceClickEvent ชั้นเรียน

เหตุการณ์นี้สร้างขึ้นจากการคลิก Map3DElement

คลาสนี้ขยายจาก LocationClickEvent

เข้าถึงด้วยการโทรหา const {PlaceClickEvent} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

Marker3DElement class

google.maps.maps3d.Marker3DElement class

แสดงตำแหน่งบนแผนที่ 3 มิติ โปรดทราบว่าต้องตั้งค่า position เพื่อให้ Marker3DElement แสดง

องค์ประกอบที่กำหนดเอง:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" size-preserved z-index="number"></gmp-marker-3d>

คลาสนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ Marker3DElementOptions

เข้าถึงโดยการโทรหา const {Marker3DElement} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่จะฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด setEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะถูกเรียกทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้กับ addEventListener ออกจากเป้าหมาย ดู removeEventListener

Marker3DElementOptions interface

อินเทอร์เฟซ google.maps.maps3d.Marker3DElementOptions

ออบเจ็กต์ Marker3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Marker3DElement

Marker3DInteractiveElement

google.maps.maps3d.Marker3DInteractiveElement class

แสดงตำแหน่งบนแผนที่ 3 มิติ โปรดทราบว่าต้องตั้งค่า position เพื่อให้ Marker3DInteractiveElement แสดง Marker3DInteractiveElement ได้รับเหตุการณ์ gmp-click ซึ่งแตกต่างจาก Marker3DElement

องค์ประกอบที่กำหนดเอง:
<gmp-marker-3d-interactive></gmp-marker-3d-interactive>

คลาสนี้ขยายจาก Marker3DElement

คลาสนี้ใช้ Marker3DInteractiveElementOptions

เข้าถึงโดยการโทรหา const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions อินเทอร์เฟซ

ออบเจ็กต์ Marker3DInteractiveElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Marker3DInteractiveElement

อินเทอร์เฟซนี้จะขยาย Marker3DElementOptions

Model3DElement

google.maps.maps3d.Model3DElement ชั้นเรียน

โมเดล 3 มิติที่อนุญาตให้แสดงผลโมเดล gLTF โปรดทราบว่าต้องตั้งค่า position และ src จึงจะแสดง Model3DElement ได้

ควรรองรับพร็อพเพอร์ตี้หลักของ gLTF PBR ขณะนี้ระบบยังไม่รองรับส่วนขยายหรือพร็อพเพอร์ตี้ส่วนขยาย

องค์ประกอบที่กำหนดเอง:
<gmp-model-3d altitude-mode="absolute" src="src"></gmp-model-3d>

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ Model3DElementOptions

เข้าถึงโดยการโทรหา const {Model3DElement} = await google.maps.importLibrary("maps3d") ดูห้องสมุดใน Maps JavaScript API

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด setEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

Model3DElementOptions interface

อินเทอร์เฟซ google.maps.maps3d.Model3DElementOptions

ออบเจ็กต์ Model3DElementOptions ซึ่งใช้เพื่อกำหนดคุณสมบัติที่ตั้งค่าได้ใน Model3DElement

คลาส Polyline3DElement

google.maps.maps3d.Polyline3DElement class

โพลีไลน์ 3 มิติคือการวางซ้อนเชิงเส้นของส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ 3 มิติ

องค์ประกอบที่กำหนดเอง:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ Polyline3DElementOptions

เข้าถึงด้วยการโทรหา const {Polyline3DElement} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด setEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก มูลค่าการคืนสินค้า:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

อินเทอร์เฟซ Polyline3DElementOptions

อินเทอร์เฟซ google.maps.maps3d.Polyline3DElementOptions

ออบเจ็กต์ Polyline3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Polyline3DElement

Polygon3DElement class

google.maps.maps3d.Polygon3DElement class

รูปหลายเหลี่ยม 3 มิติ (เช่น เส้นประกอบ 3 มิติ) จะกำหนดชุดพิกัดที่เชื่อมต่อกันตามลำดับ นอกจากนี้ รูปหลายเหลี่ยมจะประกอบกันเป็นวงปิดและกำหนดพื้นที่ที่มีการเติมสี

องค์ประกอบที่กำหนดเอง:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

คลาสนี้ขยายจาก HTMLElement

คลาสนี้ใช้ Polygon3DElementOptions

เข้าถึงด้วยการโทรหา const {Polygon3DElement} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API

เมธอด
addEventListener	addEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง listener:  EventListener|EventListenerObject ออบเจ็กต์ที่รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กําหนดเองรองรับเฉพาะ capture และ passive ผลลัพธ์:  void ตั้งค่าฟังก์ชันที่จะถูกเรียกทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener	removeEventListener(type, listener[, options]) พารามิเตอร์:  type:  string สตริงที่ระบุประเภทเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนําออกจากเป้าหมายเหตุการณ์ options:  boolean|EventListenerOptions optional ดูตัวเลือก ผลลัพธ์:  void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

Polygon3DElementOptions interface

อินเทอร์เฟซ google.maps.maps3d.Polygon3DElementOptions

ออบเจ็กต์ Polygon3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Polygon3DElement

AltitudeMode constants

google.maps.maps3d.AltitudeMode constants

ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด

เข้าถึงโดยการโทรหา const {AltitudeMode} = await google.maps.importLibrary("maps3d") โปรดดูไลบรารีใน Maps JavaScript API