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
ศูนย์กลางของแผนที่ที่กำหนดตามละติจูดและลองจิจูด ซึ่งระดับความสูงมีหน่วยเป็นเมตรเหนือระดับพื้นดิน โปรดทราบว่าตำแหน่งนี้ไม่จำเป็นต้องวางตำแหน่งกล้อง เนื่องจากช่อง 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
เข็มทิศชี้ไปบนแผนที่ หน่วยเป็นองศา โดยทิศเหนือครบกำหนดเป็นศูนย์ เมื่อไม่มีการเอียง ระบบจะตีความว่าการหมุนเป็นทิศทาง
แอตทริบิวต์ HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
maxAltitude
ประเภท:  number optional
ระดับความสูงสูงสุดเหนือพื้นดินซึ่งจะปรากฏบนแผนที่ ค่าที่ถูกต้องคือระหว่าง 0 ถึง 63170000 เมตร (รัศมีโลกคูณด้วย 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 เมตร (รัศมีโลกคูณด้วย 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 ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอดHandleEvent
  • 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 มีการเปลี่ยนแปลง

ตัวเลือก Map3DElement อินเทอร์เฟซ

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 เหตุการณ์นี้จะปรากฏขึ้นผ่านแผนผัง DOM

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

CenterChangeEvent คลาส

google.maps.maps3d.CenterChangeEvent คลาส

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

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

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

HeadingChangeEvent คลาส

google.maps.maps3d.HeadingChangeEvent คลาส

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

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

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

RangeChangeEvent คลาส

google.maps.maps3d.RangeChangeEvent คลาส

เหตุการณ์นี้สร้างขึ้นจากการเปลี่ยนแปลงช่วงการตรวจสอบในวันที่ Map3DElement เหตุการณ์นี้จะปรากฏขึ้นผ่านแผนผัง DOM

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

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

RollChangeEvent คลาส

google.maps.maps3d.RollChangeEvent คลาส

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

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

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

TiltChangeEvent คลาส

google.maps.maps3d.TiltChangeEvent คลาส

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

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

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

องค์ประกอบ Polyline3D คลาส

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 เทียบกับโพลีอื่นๆ
แอตทริบิวต์ HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่จะฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด setEvent
  • 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

ตัวเลือกองค์ประกอบ 3D อินเทอร์เฟซ

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

องค์ประกอบรูปหลายเหลี่ยม 3 มิติ คลาส

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 เทียบกับโพลีอื่นๆ
แอตทริบิวต์ HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
BetaaddEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงประเภทเหตุการณ์ที่จะฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอดHandleEvent
  • 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

ตัวเลือกองค์ประกอบ 3 มิติ อินเทอร์เฟซ

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 อนุญาตให้แสดงวัตถุที่เกี่ยวข้องกับพื้นผิวน้ำ + อาคาร + น้ำสูงสุด เมื่ออยู่เหนือน้ำ จะเป็นผิวน้ำ เมื่ออยู่เหนือภูมิประเทศ นี่จะเป็นพื้นผิวอาคาร (หากมี) หรือพื้นผิวพื้นดิน (หากไม่มีสิ่งปลูกสร้าง)