3D Maps

คลาส Map3DElement

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

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

องค์ประกอบที่กำหนดเอง:
<gmp-map-3d center="lat,lng,altitude" default-labels-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
Map3DElement
Map3DElement([options])
พารามิเตอร์: 
bounds
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
เมื่อตั้งค่าแล้ว จะเป็นการจำกัดตำแหน่งของกล้องภายในขอบเขตละติจูด/ลองจิจูดที่ระบุ โปรดทราบว่าวัตถุที่อยู่นอกขอบเขตจะยังคงแสดงผลอยู่ ขอบเขตอาจจำกัดทั้งลองจิจูดและละติจูด หรืออาจจำกัดเฉพาะละติจูดหรือลองจิจูดก็ได้ สำหรับขอบเขตละติจูดเท่านั้น ให้ใช้ลองจิจูดตะวันตกและตะวันออกของ -180 และ 180 ตามลำดับ สำหรับขอบเขตลองจิจูดเท่านั้น ให้ใช้ละติจูดเหนือและใต้ของ 90 และ -90 ตามลำดับ
center
ประเภท:  LatLngAltitude|LatLngAltitudeLiteral optional
จุดศูนย์กลางของแผนที่ที่ระบุเป็น LatLngAheight ซึ่งมีระดับความสูงเป็นเมตรเหนือระดับพื้นดิน โปรดทราบว่านี่ไม่จำเป็นต้องเป็นตำแหน่งที่กล้องตั้งอยู่ เนื่องจากช่อง range ส่งผลต่อระยะห่างของกล้องจากศูนย์กลางของแผนที่ หากไม่ได้ตั้งค่า ค่าเริ่มต้นจะเป็น {lat: 0, lng: 0, altitude: 63170000} 63170000 เมตรคือระดับความสูงสูงสุดที่อนุญาต (รัศมีโลกคูณด้วย 10)
แอตทริบิวต์ HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultLabelsDisabled
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เมื่อ true ป้ายกำกับแผนที่เริ่มต้นจะไม่แสดงผล
แอตทริบิวต์ HTML:
  • <gmp-map-3d default-labels-disabled></gmp-map-3d>
heading
ประเภท:  number optional
ทิศทางของเข็มทิศที่เป็นองศาขององศา และมีทิศเหนือเป็น 0 เมื่อไม่มีการเอียง ระบบจะตีความการทอยลูกเต๋าเป็นส่วนหัว
แอตทริบิวต์ HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
ประเภท:  number optional
ระดับความสูงสูงสุดเหนือพื้นดิน ซึ่งจะแสดงบนแผนที่ ค่าที่ถูกต้องคือระหว่าง 0 ถึง 63170000 เมตร (รัศมี Earth คูณด้วย 10)
แอตทริบิวต์ HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
ประเภท:  number optional
มุมสูงสุดของทิศทางทิศทาง (การหมุน) ของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง 0 ถึง 360 องศา minHeading และ maxHeading แสดงช่วง <= 360 องศาที่อนุญาตให้ใช้ท่าทางสัมผัสสำหรับส่วนหัวได้ minHeading = 180 และ maxHeading = 90 จะอนุญาตส่วนหัวใน [0, 90] และส่วนหัวใน [180, 360] minHeading = 90 และ maxHeading = 180 จะอนุญาตส่วนหัวใน [90, 180]
แอตทริบิวต์ HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
ประเภท:  number optional
มุมสูงสุดที่เกิดอุบัติเหตุของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง 0 ถึง 90 องศา
แอตทริบิวต์ HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
ประเภท:  number optional
ระดับความสูงขั้นต่ำเหนือพื้นดินซึ่งจะแสดงบนแผนที่ ค่าที่ถูกต้องคือระหว่าง 0 ถึง 63170000 เมตร (รัศมี Earth คูณด้วย 10)
แอตทริบิวต์ HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
ประเภท:  number optional
มุมต่ำสุดของทิศทาง (การหมุน) ของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง 0 ถึง 360 องศา minHeading และ maxHeading แสดงช่วง <= 360 องศาที่อนุญาตให้ใช้ท่าทางสัมผัสสำหรับส่วนหัวได้ minHeading = 180 และ maxHeading = 90 จะอนุญาตส่วนหัวใน [0, 90] และส่วนหัวใน [180, 360] minHeading = 90 และ maxHeading = 180 จะอนุญาตส่วนหัวใน [90, 180]
แอตทริบิวต์ HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
ประเภท:  number optional
มุมต่ำสุดของเหตุการณ์บนแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง 0 ถึง 90 องศา
แอตทริบิวต์ HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
range
ประเภท:  number optional
ระยะทางจากกล้องไปยังศูนย์กลางของแผนที่ หน่วยเป็นเมตร
แอตทริบิวต์ HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
roll
ประเภท:  number optional
การเลื่อนกล้องรอบเวกเตอร์มุมมองในหน่วยองศา เพื่อแก้ไขความไม่ชัดเจน เมื่อไม่มีการเอียง ระบบจะตีความการทอยลูกเต๋าเป็นส่วนหัว
แอตทริบิวต์ HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
ประเภท:  number optional
การเอียงของเวกเตอร์มุมมองกล้องในหน่วยองศา เวกเตอร์มุมมองที่มองลงมายังพื้นโลกโดยตรงจะมีการเอียง 0 องศา เวกเตอร์มุมมองที่ชี้ออกจากโลกจะมีการเอียง 180 องศา
แอตทริบิวต์ HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการรับ
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive เท่านั้น
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะถูกเรียกเมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย โปรดดู addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนกับ addEventListener ก่อนหน้านี้ออกจากเป้าหมาย โปรดดู removeEventListener
gmp-centerchange
function(centerChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคุณสมบัติศูนย์กลางของ Map3DElement มีการเปลี่ยนแปลง
gmp-click
function(clickEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อมีการคลิกองค์ประกอบ Map3DElement
gmp-headingchange
function(headingChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคุณสมบัติส่วนหัวของ Map3DElement เปลี่ยนแปลง
gmp-rangechange
function(rangeChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคุณสมบัติช่วงของ Map3DElement มีการเปลี่ยนแปลง
gmp-rollchange
function(rollChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อพร็อพเพอร์ตี้ควบรวมของ Map3DElement มีการเปลี่ยนแปลง
gmp-steadychange
function(steadyChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อสถานะที่คงที่ของ Map3DElement เปลี่ยนแปลง
gmp-tiltchange
function(tiltChangeEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเกิดขึ้นเมื่อคุณสมบัติการเอียงของ Map3DElement เปลี่ยนแปลง

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

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

ออบเจ็กต์ Map3DElementOptions ซึ่งใช้กำหนดคุณสมบัติที่สามารถตั้งค่าใน Map3DElement
bounds optional
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
ดูMap3DElement.bounds
center optional
ประเภท:  LatLngAltitude|LatLngAltitudeLiteral optional
ดูMap3DElement.center
defaultLabelsDisabled optional
ประเภท:  boolean optional
ดูMap3DElement.defaultLabelsDisabled
heading optional
ประเภท:  number optional
ดูMap3DElement.heading
maxAltitude optional
ประเภท:  number optional
ดูMap3DElement.maxAltitude
maxHeading optional
ประเภท:  number optional
ดูMap3DElement.maxHeading
maxTilt optional
ประเภท:  number optional
ดูMap3DElement.maxTilt
minAltitude optional
ประเภท:  number optional
ดูMap3DElement.minAltitude
minHeading optional
ประเภท:  number optional
ดูMap3DElement.minHeading
minTilt optional
ประเภท:  number optional
ดูMap3DElement.minTilt
range optional
ประเภท:  number optional
ดูMap3DElement.range
roll optional
ประเภท:  number optional
ดูMap3DElement.roll
tilt optional
ประเภท:  number optional
ดูMap3DElement.tilt

คลาส SteadyChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการตรวจสอบสถานะที่คงที่ของ Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

เข้าถึงโดยโทรไปที่ const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d") ดูไลบรารีใน Maps JavaScript API
isSteady
ประเภท:  boolean
ระบุว่า Map3DElement คงที่หรือไม่ (กล่าวคือ การแสดงภาพทั้งหมดสำหรับฉากปัจจุบันเสร็จสมบูรณ์แล้ว) หรือไม่

คลาส ClickEvent

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

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

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

เข้าถึงโดยโทรไปที่ const {ClickEvent} = await google.maps.importLibrary("maps3d") ดูไลบรารีใน Maps JavaScript API
position
ประเภท:  LatLngAltitude optional
ละติจูด/ลองจิจูด/ระดับความสูงที่ต่ำกว่าเคอร์เซอร์เมื่อเกิดเหตุการณ์ขึ้น โปรดทราบว่าระบบจะส่งคืนข้อมูลที่มีความแม่นยำน้อยกว่าในระดับที่กว้างกว่า นอกจากนี้ อาจมีการส่งคืนระดับความสูงของก้นทะเลสำหรับค่าระดับความสูงเมื่อคลิกที่ผิวน้ำจากตำแหน่งกล้องที่สูงขึ้น

คลาส CenterChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการเปลี่ยนแปลงของศูนย์ตรวจสอบเมื่อ Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส HeadingChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการตรวจสอบการเปลี่ยนแปลงส่วนหัวเมื่อวันที่ Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส RangeChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการเปลี่ยนแปลงช่วงการตรวจสอบเมื่อ Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส RollChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการตรวจสอบการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นในวันที่ Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส TiltChangeEvent

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

เหตุการณ์นี้สร้างขึ้นจากการตรวจสอบการเปลี่ยนแปลงการเอียงใน Map3DElement

ชั้นเรียนนี้ขยายระยะเวลาถึง Event

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

คลาส Polyline3DElement

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

เส้นประกอบ 3 มิติคือการวางซ้อนเชิงเส้นของกลุ่มเส้นที่เชื่อมต่อบนแผนที่ 3 มิติ

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

ชั้นเรียนนี้ขยายระยะเวลาถึง HTMLElement

ชั้นเรียนนี้ใช้ Polyline3DElementOptions

เข้าถึงโดยโทรไปที่ const {Polyline3DElement} = await google.maps.importLibrary("maps3d") ดูไลบรารีใน Maps JavaScript API
Polyline3DElement
Polyline3DElement([options])
พารามิเตอร์: 
altitudeMode
ประเภท:  AltitudeMode optional
ค่าเริ่มต้น: AltitudeMode.ABSOLUTE
ระบุวิธีการตีความคอมโพเนนต์ระดับความสูงในพิกัด
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
coordinates
ลำดับพิกัดของเส้นตรง ระดับความสูงจะถูกละเว้นในบางโหมด ดังนั้นจึงอาจไม่บังคับ
drawsOccludedSegments
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ระบุว่ามีการวาดส่วนของเส้นประกอบที่อาจถูกบังไว้หรือไม่ เส้นประกอบอาจล้อมรอบด้วยเรขาคณิตบนแผนที่ (เช่น อาคาร)
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ระบุว่าจะเชื่อมต่อโพลีไลน์กับพื้นหรือไม่ หากต้องการผลักโพลีไลน์ altitudeMode ต้องเป็น RELATIVE_TO_GROUND หรือ ABSOLUTE
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เมื่อ true ขอบของเส้นประกอบจะถูกตีความว่าเป็นทรงกลมโลกและจะเป็นไปตามความโค้งของโลก เมื่อใช้ false ขอบของเส้นประกอบจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
ประเภท:  string optional
สีด้านนอก ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerOpacity
ประเภท:  number optional
ความทึบแสงด้านนอกระหว่าง 0.0 ถึง 1.0
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d outer-opacity="number"></gmp-polyline-3d>
outerWidth
ประเภท:  number optional
ความกว้างด้านนอกอยู่ระหว่าง 0.0 ถึง 1.0 นี่เป็นเปอร์เซ็นต์ของ strokeWidth
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
strokeColor
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeOpacity
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d stroke-opacity="number"></gmp-polyline-3d>
strokeWidth
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการรับ
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive เท่านั้น
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะถูกเรียกเมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย โปรดดู addEventListener
BetaremoveEventListener
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 ได้
altitudeMode optional
ประเภท:  AltitudeMode optional
ค่าเริ่มต้น: AltitudeMode.ABSOLUTE
ดูPolyline3DElement.altitudeMode
coordinates optional
ดูPolyline3DElement.coordinates
drawsOccludedSegments optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolyline3DElement.drawsOccludedSegments
extruded optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolyline3DElement.extruded
geodesic optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolyline3DElement.geodesic
outerColor optional
ประเภท:  string optional
ดูPolyline3DElement.outerColor
outerOpacity optional
ประเภท:  number optional
ดูPolyline3DElement.outerOpacity
outerWidth optional
ประเภท:  number optional
ดูPolyline3DElement.outerWidth
strokeColor optional
ประเภท:  string optional
ดูPolyline3DElement.strokeColor
strokeOpacity optional
ประเภท:  number optional
ดูPolyline3DElement.strokeOpacity
strokeWidth optional
ประเภท:  number optional
ดูPolyline3DElement.strokeWidth
zIndex optional
ประเภท:  number optional
ดูPolyline3DElement.zIndex

คลาส Polygon3DElement

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

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

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

ชั้นเรียนนี้ขยายระยะเวลาถึง HTMLElement

ชั้นเรียนนี้ใช้ Polygon3DElementOptions

เข้าถึงโดยโทรไปที่ const {Polygon3DElement} = await google.maps.importLibrary("maps3d") ดูไลบรารีใน Maps JavaScript API
Polygon3DElement
Polygon3DElement([options])
พารามิเตอร์: 
altitudeMode
ประเภท:  AltitudeMode optional
ค่าเริ่มต้น: AltitudeMode.ABSOLUTE
ระบุวิธีการตีความคอมโพเนนต์ระดับความสูงในพิกัด
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ระบุว่าสามารถวาดส่วนของรูปหลายเหลี่ยมที่จะถูกบังไว้หรือไม่ รูปหลายเหลี่ยมอาจล้อมรอบด้วยเรขาคณิตในแผนที่ (เช่น อาคาร)
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ระบุว่าจะเชื่อมต่อรูปหลายเหลี่ยมกับพื้นหรือไม่ หากต้องการแยกรูปหลายเหลี่ยม altitudeMode จะต้องเป็น RELATIVE_TO_GROUND หรือ ABSOLUTE
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
ประเภท:  string optional
สีเติม ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
fillOpacity
ประเภท:  number optional
ความทึบแสงของการเติมสีระหว่าง 0.0 ถึง 1.0
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d fill-opacity="number"></gmp-polygon-3d>
geodesic
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เมื่อ true ขอบของรูปหลายเหลี่ยมจะถูกตีความว่าเป็นทรงกลมโลกและจะเป็นไปตามความโค้งของโลก เมื่อใช้ false ขอบของรูปหลายเหลี่ยมจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerCoordinates
ลำดับพิกัดของพิกัดที่กำหนดวงแหวนปิด รูปหลายเหลี่ยมอาจประกอบด้วยเส้นทาง 1 เส้นทางหรือมากกว่าก็ได้ ซึ่งจะสร้างรอยต่อหลายส่วนภายในรูปหลายเหลี่ยมนั้น ซึ่งต่างจากเส้นประกอบ
outerCoordinates
ลำดับพิกัดของพิกัดที่กำหนดวงแหวนปิด ระดับความสูงจะถูกละเว้นในบางโหมด ดังนั้นจึงอาจไม่บังคับ
strokeColor
ประเภท:  string optional
สีเส้นโครงร่าง ระบบจะรองรับสี CSS3 ทั้งหมดยกเว้นสีที่มีชื่อเพิ่มเติม
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeOpacity
ประเภท:  number optional
ความทึบแสงของเส้นระหว่าง 0.0 ถึง 1.0
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d stroke-opacity="number"></gmp-polygon-3d>
strokeWidth
ประเภท:  number optional
ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
ประเภท:  number optional
zIndex เทียบกับ Polys อื่นๆ
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่ต้องการรับ
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด ManageEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive เท่านั้น
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะถูกเรียกเมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย โปรดดู addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำ Listener เหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนกับ addEventListener ก่อนหน้านี้ออกจากเป้าหมาย โปรดดู removeEventListener

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

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

ออบเจ็กต์ Polygon3DElementOptions ซึ่งใช้กำหนดพร็อพเพอร์ตี้ที่สามารถตั้งค่าใน Polygon3DElement
altitudeMode optional
ประเภท:  AltitudeMode optional
ค่าเริ่มต้น: AltitudeMode.ABSOLUTE
ดูPolygon3DElement.altitudeMode
drawsOccludedSegments optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolygon3DElement.drawsOccludedSegments
extruded optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolygon3DElement.extruded
fillColor optional
ประเภท:  string optional
ดูPolygon3DElement.fillColor
fillOpacity optional
ประเภท:  number optional
ดูPolygon3DElement.fillOpacity
geodesic optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
ดูPolygon3DElement.geodesic
innerCoordinates optional
ดูPolygon3DElement.innerCoordinates
outerCoordinates optional
ดูPolygon3DElement.outerCoordinates
strokeColor optional
ประเภท:  string optional
ดูPolygon3DElement.strokeColor
strokeOpacity optional
ประเภท:  number optional
ดูPolygon3DElement.strokeOpacity
strokeWidth optional
ประเภท:  number optional
ดูPolygon3DElement.strokeWidth
zIndex optional
ประเภท:  number optional
ดูPolygon3DElement.zIndex

ค่าคงที่ AltitudeMode

ค่าคงที่ google.maps.maps3d.AltitudeMode

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

เข้าถึงโดยโทรไปที่ const {AltitudeMode} = await google.maps.importLibrary("maps3d") ดูไลบรารีใน Maps JavaScript API
ABSOLUTE อนุญาตให้แสดงวัตถุที่สัมพันธ์กับระดับน้ำทะเลเฉลี่ยเฉลี่ย ซึ่งหมายความว่าหากระดับภูมิประเทศของรายละเอียดเปลี่ยนแปลงภายใต้วัตถุ ตำแหน่งสัมบูรณ์ของวัตถุจะยังคงเหมือนเดิม
CLAMP_TO_GROUND อนุญาตให้แสดงวัตถุที่วางอยู่บนพื้น ตำแหน่งเหล่านี้จะยังคงอยู่ที่ระดับพื้นดินถัดจากภูมิประเทศโดยไม่คำนึงถึงระดับความสูงที่ระบุ หากวัตถุวางอยู่เหนือแหล่งน้ำหลัก วัตถุจะวางอยู่ที่ระดับน้ำทะเล
RELATIVE_TO_GROUND อนุญาตให้แสดงวัตถุที่สัมพันธ์กับพื้นผิวพื้น หากระดับรายละเอียดภูมิประเทศเปลี่ยนไป ตำแหน่งของวัตถุจะคงที่เมื่อเทียบกับพื้น เมื่ออยู่เหนือน้ำ ระบบจะตีความระดับความสูงเป็นค่าในหน่วยเมตรเหนือระดับน้ำทะเล
RELATIVE_TO_MESH อนุญาตให้แสดงวัตถุที่สัมพันธ์กับระดับสูงสุดของพื้น + อาคาร + ผิวน้ำ เมื่ออยู่เหนือน้ำ นี่จะเป็นผิวน้ำ เมื่ออยู่เหนือภูมิประเทศ ข้อมูลนี้จะเป็นพื้นผิวอาคาร (หากมี) หรือผิวพื้น (หากไม่มีสิ่งปลูกสร้าง)