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

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

Draw on the map

คลาส MarkerElement

google.maps.maps3d.MarkerElement class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"

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

      
<gmp-marker
  altitude-mode="value-name"
  anchor-left="string"
  anchor-top="string"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  position="lat,lng"
  title="string">
</gmp-marker>

const {MarkerElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`MarkerElement`	`MarkerElement([options])` พารามิเตอร์ `options`: `MarkerElementOptions optional` สร้าง `MarkerElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`altitudeMode` attr: altitude-mode	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความองค์ประกอบระดับความสูงของตำแหน่ง แอตทริบิวต์ HTML: `altitude-mode="value-name"`
`anchorLeft` attr: anchor-left	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string` ค่าเริ่มต้น: -50% ค่า CSS length-percentage ที่ใช้เพื่อออฟเซ็ตจุดยึดจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น แอตทริบิวต์ HTML: `anchor-left="string"`
`anchorTop` attr: anchor-top	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string` ค่าเริ่มต้น: -100% ค่า CSS length-percentage ที่ใช้เพื่อออฟเซ็ตจุดยึดจากมุมซ้ายบนของเครื่องหมาย ซึ่งจะมีประโยชน์เมื่อใช้ภาพที่มีจุดยึดที่แตกต่างจากจุดกึ่งกลางด้านล่างทั่วไปของเครื่องหมายเริ่มต้น แอตทริบิวต์ HTML: `anchor-top="string"`
`autofitsCamera` attr: autofits-camera	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภท: `boolean optional` ค่าเริ่มต้น: `false` หากระบุไว้ เครื่องหมายที่ระบุจะแสดงในวิวพอร์ตของแผนที่ พร้อมกับองค์ประกอบอื่นๆ ที่เลือกใช้ แอตทริบิวต์ HTML: `autofits-camera`
`collisionBehavior` attr: collision-behavior	ประเภทอินพุต: `CollisionBehavior optional` ประเภทเอาต์พุต: `CollisionBehavior` ค่าเริ่มต้น: `CollisionBehavior.REQUIRED` การแจงนับที่ระบุลักษณะการทำงานของ MarkerElement เมื่อชนกับ `MarkerElement`, `Marker3DElement` หรือป้ายกำกับแผนที่ฐานอื่น แอตทริบิวต์ HTML: `collision-behavior="value-name"`
`collisionPriority` attr: collision-priority	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` ตัวเลขที่ใช้เพื่อช่วยกำหนดลำดับความสำคัญที่เกี่ยวข้องระหว่างเครื่องหมาย `CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY` (รวมถึง `Marker3DElement`) ค่า `collisionPriority` ที่สูงขึ้นบ่งบอกถึงลำดับความสำคัญที่สูงขึ้น แอตทริบิวต์ HTML: `collision-priority="number"`
`position` attr: position	ประเภทอินพุต: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ประเภทเอาต์พุต: `LatLngAltitude optional` ตำแหน่งของปลายเครื่องหมาย ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ แอตทริบิวต์ HTML: `position="lat,lng"` `position="lat,lng,altitude"`
`title` attr: title	ประเภท: `string` ข้อความเมื่อวางเมาส์เหนือ หากระบุ ระบบจะเพิ่มข้อความสำหรับการช่วยเหลือพิเศษ (เช่น สำหรับใช้กับโปรแกรมอ่านหน้าจอ) ลงใน `MarkerElement` พร้อมค่าที่ระบุ แอตทริบิวต์ HTML: `title="string"`

สล็อต
`default`	ระบบจะจัดสรรช่องให้กับองค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน `MarkerElement` โดยตรง

พร็อพเพอร์ตี้ CSS
`z-index`	ดัชนีลำดับ Z ของเครื่องหมายนี้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `z-index` เครื่องหมายที่ทับซ้อนกันซึ่งมีดัชนีลำดับ Z มากกว่าจะครอบคลุมเครื่องหมายที่มีดัชนีลำดับ Z น้อยกว่า โดยค่าเริ่มต้น เครื่องหมายจะแสดงตามตำแหน่ง DOM โดยเครื่องหมายที่เพิ่มใน DOM ภายหลังจะปรากฏด้านหน้าเครื่องหมายที่เพิ่มใน DOM ก่อนหน้า

พร็อพเพอร์ตี้ CSS

z-index

ดัชนีลำดับ Z ของเครื่องหมายนี้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ z-index เครื่องหมายที่ทับซ้อนกันซึ่งมีดัชนีลำดับ Z มากกว่าจะครอบคลุมเครื่องหมายที่มีดัชนีลำดับ Z น้อยกว่า โดยค่าเริ่มต้น เครื่องหมายจะแสดงตามตำแหน่ง DOM โดยเครื่องหมายที่เพิ่มใน DOM ภายหลังจะปรากฏด้านหน้าเครื่องหมายที่เพิ่มใน DOM ก่อนหน้า

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`MarkerElement.altitudeMode`
`anchorLeft` ไม่บังคับ	ประเภท: `string optional` ดู`MarkerElement.anchorLeft`
`anchorTop` ไม่บังคับ	ประเภท: `string optional` ดู`MarkerElement.anchorTop`
`autofitsCamera` ไม่บังคับ	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภท: `boolean optional` ดู`MarkerElement.autofitsCamera`
`collisionBehavior` ไม่บังคับ	ประเภท: `CollisionBehavior optional` ดู`MarkerElement.collisionBehavior`
`collisionPriority` ไม่บังคับ	ประเภท: `number optional` ดู`MarkerElement.collisionPriority`
`position` ไม่บังคับ	ประเภท: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ดู`MarkerElement.position`
`title` ไม่บังคับ	ประเภท: `string optional` ดู`MarkerElement.title`

คลาส MarkerInteractiveElement

google.maps.maps3d.MarkerInteractiveElement class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"

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

<gmp-marker-interactive
  gmp-popover-target-element="popover-id">
</gmp-marker-interactive>

const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`MarkerInteractiveElement`	`MarkerInteractiveElement([options])` พารามิเตอร์ `options`: `MarkerInteractiveElementOptions optional` สร้าง `MarkerInteractiveElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้

gmpPopoverTargetElement
attr: gmp-popover-target-element

ประเภทอินพุต: PopoverElement optional
ประเภทเอาต์พุต: PopoverElement optional

เมื่อตั้งค่าแล้ว องค์ประกอบป๊อปโอเวอร์จะเปิดขึ้นเมื่อคลิกเครื่องหมายนี้

แอตทริบิวต์ HTML: gmp-popover-target-element="popover-id"

สืบทอด: altitudeMode (attr: altitude-mode), anchorLeft (attr: anchor-left), anchorTop (attr: anchor-top), autofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), position (attr: position), title (attr: title)

สล็อต
รับค่ามา: `default`

พร็อพเพอร์ตี้ CSS
รับค่ามา: `z-index`

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

กิจกรรม
`gmp-click`	`function(clickEvent)` อาร์กิวเมนต์ `clickEvent`: `LocationClickEvent optional` เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ `MarkerInteractiveElement`

MarkerInteractiveElementOptions interface

google.maps.maps3d.MarkerInteractiveElementOptions interface
extends MarkerElementOptions

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

พร็อพเพอร์ตี้
`gmpPopoverTargetElement` ไม่บังคับ	ประเภท: `PopoverElement optional` ดู`MarkerInteractiveElement.gmpPopoverTargetElement`
สืบทอด: `altitudeMode`, `anchorLeft`, `anchorTop`, `autofitsCamera`, `collisionBehavior`, `collisionPriority`, `position`, `title`

คลาส Marker3DElement

google.maps.maps3d.Marker3DElement class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"

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

     
<gmp-marker-3d
  altitude-mode="value-name"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  draws-when-occluded
  extruded
  label="string"
  position="lat,lng"
  size-preserved
  z-index="number">
</gmp-marker-3d>

const {Marker3DElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Marker3DElement`	`Marker3DElement([options])` พารามิเตอร์ `options`: `Marker3DElementOptions optional` สร้าง `Marker3DElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`altitudeMode` attr: altitude-mode	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความองค์ประกอบระดับความสูงของตำแหน่ง แอตทริบิวต์ HTML: `altitude-mode="value-name"`
`autofitsCamera` attr: autofits-camera	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` หากระบุไว้ เครื่องหมายที่ระบุจะแสดงในวิวพอร์ตของแผนที่ พร้อมกับองค์ประกอบอื่นๆ ที่เลือกใช้ แอตทริบิวต์ HTML: `autofits-camera`
`collisionBehavior` attr: collision-behavior	ประเภทอินพุต: `CollisionBehavior optional` ประเภทเอาต์พุต: `CollisionBehavior` ค่าเริ่มต้น: `CollisionBehavior.REQUIRED` การแจงนับที่ระบุลักษณะการทำงานของ Marker3DElement เมื่อชนกับ Marker3DElement อื่นหรือกับป้ายกำกับแผนที่ฐาน แอตทริบิวต์ HTML: `collision-behavior="value-name"`
`collisionPriority` attr: collision-priority	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` ลำดับความสำคัญของการชนที่ใช้สำหรับการตรวจจับการชน แอตทริบิวต์ HTML: `collision-priority="number"`
`drawsWhenOccluded` attr: draws-when-occluded	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าควรวาดเครื่องหมายนี้หรือไม่เมื่อถูกบดบัง เรขาคณิตของแผนที่ (เช่น อาคาร) อาจบดบังเครื่องหมายได้ แอตทริบิวต์ HTML: `draws-when-occluded`
`extruded` attr: extruded	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าจะเชื่อมต่อเครื่องหมายกับพื้นหรือไม่ หากต้องการอัดรีดเครื่องหมาย `altitudeMode` ต้องเป็น `RELATIVE_TO_GROUND` หรือ `ABSOLUTE` แอตทริบิวต์ HTML: `extruded`
`label` attr: label	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string optional` ข้อความที่จะแสดงโดยเครื่องหมายนี้ แอตทริบิวต์ HTML: `label="string"`
`position` attr: position	ประเภทอินพุต: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ประเภทเอาต์พุต: `LatLngAltitude optional` ตำแหน่งของปลายเครื่องหมาย ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ แอตทริบิวต์ HTML: `position="lat,lng"` `position="lat,lng,altitude"`
`sizePreserved` attr: size-preserved	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าเครื่องหมายนี้ควรคงขนาดไว้หรือไม่ ไม่ว่าจะอยู่ห่างจากกล้องเท่าใดก็ตาม โดยค่าเริ่มต้น เครื่องหมายจะปรับขนาดตามระยะห่างจากกล้อง/การเอียง แอตทริบิวต์ HTML: `size-preserved`
`zIndex` attr: z-index	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` zIndex เมื่อเทียบกับเครื่องหมายอื่นๆ แอตทริบิวต์ HTML: `z-index="number"`

สล็อต
`default`	ระบบจะจัดสรรองค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน `Marker3DElement` โดยตรง อย่างไรก็ตาม ระบบจะใช้องค์ประกอบประเภท `HTMLImageElement`, `SVGElement` และ `PinElement` สำหรับการวาดเครื่องหมายเท่านั้น และจะไม่สนใจองค์ประกอบอื่นๆ `HTMLImageElement` และ `SVGElement` ต้องรวมอยู่ในองค์ประกอบ `<template>` ก่อนกำหนดให้กับช่องเริ่มต้นของ `Marker3DElement` ปัจจุบันรูปภาพและ SVG จะได้รับการแรสเตอร์ก่อนที่จะแสดงผลในฉาก 3 มิติ ดังนั้น HTML ที่กำหนดเองซึ่งฝังอยู่ในคลาส SVG หรือ CSS ที่เพิ่มลงในรูปภาพจะไม่มีผลและอาจไม่แสดงเมื่อเครื่องหมายปรากฏบนหน้าจอ

สล็อต

default

ระบบจะจัดสรรองค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน Marker3DElement โดยตรง อย่างไรก็ตาม ระบบจะใช้องค์ประกอบประเภท HTMLImageElement, SVGElement และ PinElement สำหรับการวาดเครื่องหมายเท่านั้น และจะไม่สนใจองค์ประกอบอื่นๆ
HTMLImageElement และ SVGElement ต้องรวมอยู่ในองค์ประกอบ <template> ก่อนกำหนดให้กับช่องเริ่มต้นของ Marker3DElement

ปัจจุบันรูปภาพและ SVG จะได้รับการแรสเตอร์ก่อนที่จะแสดงผลในฉาก 3 มิติ ดังนั้น HTML ที่กำหนดเองซึ่งฝังอยู่ในคลาส SVG หรือ CSS ที่เพิ่มลงในรูปภาพจะไม่มีผลและอาจไม่แสดงเมื่อเครื่องหมายปรากฏบนหน้าจอ

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`Marker3DElement.altitudeMode`
`autofitsCamera` ไม่บังคับ	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภท: `boolean optional` ดู`Marker3DElement.autofitsCamera`
`collisionBehavior` ไม่บังคับ	ประเภท: `CollisionBehavior optional` ดู`Marker3DElement.collisionBehavior`
`collisionPriority` ไม่บังคับ	ประเภท: `number optional` ดู`Marker3DElement.collisionPriority`
`drawsWhenOccluded` ไม่บังคับ	ประเภท: `boolean optional` ดู`Marker3DElement.drawsWhenOccluded`
`extruded` ไม่บังคับ	ประเภท: `boolean optional` ดู`Marker3DElement.extruded`
`label` ไม่บังคับ	ประเภท: `string optional` ดู`Marker3DElement.label`
`position` ไม่บังคับ	ประเภท: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ดู`Marker3DElement.position`
`sizePreserved` ไม่บังคับ	ประเภท: `boolean optional` ดู`Marker3DElement.sizePreserved`
`zIndex` ไม่บังคับ	ประเภท: `number optional` ดู`Marker3DElement.zIndex`

Marker3DInteractiveElement class

google.maps.maps3d.Marker3DInteractiveElement class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"

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

 
<gmp-marker-3d-interactive
  gmp-popover-target-element="popover-id"
  title="string">
</gmp-marker-3d-interactive>

const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Marker3DInteractiveElement`	`Marker3DInteractiveElement([options])` พารามิเตอร์ `options`: `Marker3DInteractiveElementOptions optional` สร้าง `Marker3DInteractiveElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`gmpPopoverTargetElement` attr: gmp-popover-target-element	ประเภทอินพุต: `PopoverElement optional` ประเภทเอาต์พุต: `PopoverElement optional` เมื่อตั้งค่าแล้ว องค์ประกอบป๊อปโอเวอร์จะเปิดขึ้นเมื่อคลิกเครื่องหมายนี้ แอตทริบิวต์ HTML: `gmp-popover-target-element="popover-id"`
`title` attr: title	ประเภท: `string` ข้อความเมื่อวางเมาส์เหนือ หากระบุ ระบบจะเพิ่มข้อความสำหรับการช่วยเหลือพิเศษ (เช่น สำหรับใช้กับโปรแกรมอ่านหน้าจอ) ลงใน `Marker3DInteractiveElement` พร้อมค่าที่ระบุ แอตทริบิวต์ HTML: `title="string"`
สืบทอด: `altitudeMode` (attr: `altitude-mode`), `autofitsCamera` (attr: `autofits-camera`), `collisionBehavior` (attr: `collision-behavior`), `collisionPriority` (attr: `collision-priority`), `drawsWhenOccluded` (attr: `draws-when-occluded`), `extruded` (attr: `extruded`), `label` (attr: `label`), `position` (attr: `position`), `sizePreserved` (attr: `size-preserved`), `zIndex` (attr: `z-index`)

สล็อต
`default`	ระบบจะจัดสรรองค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน `Marker3DInteractiveElement` โดยตรง อย่างไรก็ตาม ระบบจะใช้องค์ประกอบประเภท `PinElement` เท่านั้นในการวาดเครื่องหมาย และจะไม่สนใจองค์ประกอบอื่นๆ

สล็อต

default

ระบบจะจัดสรรองค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน Marker3DInteractiveElement โดยตรง อย่างไรก็ตาม ระบบจะใช้องค์ประกอบประเภท PinElement เท่านั้นในการวาดเครื่องหมาย และจะไม่สนใจองค์ประกอบอื่นๆ

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

กิจกรรม
`gmp-click`	`function(clickEvent)` อาร์กิวเมนต์ `clickEvent`: `LocationClickEvent optional` เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ `Marker3DInteractiveElement`

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions interface
extends Marker3DElementOptions

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

พร็อพเพอร์ตี้
`gmpPopoverTargetElement` ไม่บังคับ	ประเภท: `PopoverElement optional` ดู`Marker3DInteractiveElement.gmpPopoverTargetElement`
`title` ไม่บังคับ	ประเภท: `string optional` ดู`Marker3DInteractiveElement.title`
สืบทอด: `altitudeMode`, `autofitsCamera`, `collisionBehavior`, `collisionPriority`, `drawsWhenOccluded`, `extruded`, `label`, `position`, `sizePreserved`, `zIndex`

คลาส Model3DElement

google.maps.maps3d.Model3DElement class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"

โมเดล 3 มิติที่ช่วยให้แสดงผลโมเดล glTF ได้ โปรดทราบว่าคุณต้องตั้งค่า position และ src เพื่อให้ Model3DElement แสดง

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

    
<gmp-model-3d
  altitude-mode="value-name"
  orientation="heading,tilt,roll"
  position="lat,lng"
  scale="number"
  src="url">
</gmp-model-3d>

const {Model3DElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Model3DElement`	`Model3DElement([options])` พารามิเตอร์ `options`: `Model3DElementOptions optional` สร้าง `Model3DElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`altitudeMode` attr: altitude-mode	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความระดับความสูงในตำแหน่ง แอตทริบิวต์ HTML: `altitude-mode="value-name"`
`orientation` attr: orientation	ประเภทอินพุต: `Orientation3D\|Orientation3DLiteral optional` ประเภทเอาต์พุต: `Orientation3D optional` อธิบายการหมุนระบบพิกัดของโมเดล 3 มิติเพื่อวางตำแหน่งโมเดลบนแผนที่ 3 มิติ ระบบจะใช้การหมุนกับโมเดลตามลำดับต่อไปนี้ ได้แก่ การหมุน การเอียง และการมุ่งหน้า แอตทริบิวต์ HTML: `orientation="heading,tilt,roll"`
`position` attr: position	ประเภทอินพุต: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ประเภทเอาต์พุต: `LatLngAltitude optional` ตั้งค่าตำแหน่งของ `Model3DElement` ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ แอตทริบิวต์ HTML: `position="lat,lng"` `position="lat,lng,altitude"`
`scale` attr: scale	ประเภทอินพุต: `number\|Vector3D\|Vector3DLiteral optional` ประเภทเอาต์พุต: `Vector3D optional` ค่าเริ่มต้น: `1` ปรับขนาดโมเดลตามแกน x, y และ z ในพื้นที่พิกัดของโมเดล แอตทริบิวต์ HTML: `scale="number"` `scale="x,y,z"`
`src` attr: src	ประเภทอินพุต: `string\|URL optional` ประเภทเอาต์พุต: `URL optional` ระบุ URL ของโมเดล 3 มิติ ขณะนี้รองรับเฉพาะโมเดลในรูปแบบ `.glb` เท่านั้น ระบบจะแปลง HTTP URL สัมพัทธ์เป็น URL ที่สมบูรณ์ที่เกี่ยวข้อง โปรดทราบว่าหากคุณโฮสต์ไฟล์โมเดล `.glb` ไว้ในเว็บไซต์หรือเซิร์ฟเวอร์อื่นที่ไม่ใช่แอปพลิเคชันหลัก ให้ตรวจสอบว่าได้ตั้งค่าส่วนหัว HTTP ของ CORS อย่างถูกต้อง ซึ่งจะช่วยให้แอปพลิเคชันของคุณเข้าถึงไฟล์โมเดลจากโดเมนอื่นได้อย่างปลอดภัย แอตทริบิวต์ HTML: `src="url"`

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`Model3DElement.altitudeMode`
`orientation` ไม่บังคับ	ประเภท: `Orientation3D\|Orientation3DLiteral optional` ดู`Model3DElement.orientation`
`position` ไม่บังคับ	ประเภท: `LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` ดู`Model3DElement.position`
`scale` ไม่บังคับ	ประเภท: `number\|Vector3D\|Vector3DLiteral optional` ดู`Model3DElement.scale`
`src` ไม่บังคับ	ประเภท: `string\|URL optional` ดู`Model3DElement.src`

Model3DInteractiveElement class

google.maps.maps3d.Model3DInteractiveElement class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"

<gmp-model-3d-interactive></gmp-model-3d-interactive>

const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Model3DInteractiveElement`	`Model3DInteractiveElement([options])` พารามิเตอร์ `options`: `Model3DElementOptions optional` สร้าง `Model3DInteractiveElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode` (attr: `altitude-mode`), `orientation` (attr: `orientation`), `position` (attr: `position`), `scale` (attr: `scale`), `src` (attr: `src`)

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

กิจกรรม
`gmp-click`	`function(clickEvent)` อาร์กิวเมนต์ `clickEvent`: `LocationClickEvent optional` เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ `Model3DInteractiveElement`

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

google.maps.maps3d.Model3DInteractiveElementOptions interface
extends Model3DElementOptions

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

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode`, `orientation`, `position`, `scale`, `src`

คลาส Polyline3DElement

google.maps.maps3d.Polyline3DElement class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"

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

      
<gmp-polyline-3d
  altitude-mode="value-name"
  autofits-camera
  draws-occluded-segments
  extruded
  geodesic
  outer-color="string"
  outer-width="number"
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
  stroke-color="string"
  stroke-width="number"
  z-index="number">
</gmp-polyline-3d>

const {Polyline3DElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Polyline3DElement`	`Polyline3DElement([options])` พารามิเตอร์ `options`: `Polyline3DElementOptions optional` สร้าง `Polyline3DElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`altitudeMode` attr: altitude-mode	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด แอตทริบิวต์ HTML: `altitude-mode="value-name"`
`autofitsCamera` attr: autofits-camera	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` หากระบุไว้ เส้นประกอบที่ระบุจะแสดงในวิวพอร์ตของแผนที่ พร้อมกับองค์ประกอบอื่นๆ ที่เลือกใช้ แอตทริบิวต์ HTML: `autofits-camera`
`drawsOccludedSegments` attr: draws-occluded-segments	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าจะวาดส่วนของเส้นประกอบที่อาจถูกบดบังหรือไม่ เรขาคณิตของแผนที่ (เช่น อาคาร) อาจบดบังเส้นประกอบได้ แอตทริบิวต์ HTML: `draws-occluded-segments`
`extruded` attr: extruded	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าจะเชื่อมต่อเส้นประกอบกับพื้นหรือไม่ หากต้องการอัดรีดเส้นประกอบ `altitudeMode` ต้องเป็น `RELATIVE_TO_GROUND` หรือ `ABSOLUTE` แอตทริบิวต์ HTML: `extruded`
`geodesic` attr: geodesic	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` เมื่อ `true` ขอบของเส้นประกอบจะได้รับการตีความว่าเป็นเส้นจีโอเดสิกและจะตามความโค้งของโลก เมื่อ `false` ขอบของเส้นประกอบจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ แอตทริบิวต์ HTML: `geodesic`
`outerColor` attr: outer-color	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string optional` สีด้านนอก รองรับสี CSS3 ทั้งหมด แอตทริบิวต์ HTML: `outer-color="string"`
`outerWidth` attr: outer-width	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` ความกว้างด้านนอกอยู่ระหว่าง `0.0` ถึง `1.0` ซึ่งเป็นเปอร์เซ็นต์ของ`strokeWidth` แอตทริบิวต์ HTML: `outer-width="number"`
`path` attr: path	ประเภทอินพุต: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ประเภทเอาต์พุต: `Array<LatLngAltitude> optional` ลำดับพิกัดของเส้นประกอบที่เรียงตามลำดับ ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ แอตทริบิวต์ HTML: `path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."`
`strokeColor` attr: stroke-color	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string optional` สีเส้น รองรับสี CSS3 ทั้งหมด แอตทริบิวต์ HTML: `stroke-color="string"`
`strokeWidth` attr: stroke-width	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` ความหนาของเส้นในหน่วยพิกเซล แอตทริบิวต์ HTML: `stroke-width="number"`
`zIndex` attr: z-index	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` zIndex เมื่อเทียบกับรูปหลายเหลี่ยมอื่นๆ แอตทริบิวต์ HTML: `z-index="number"`
`coordinates`	เลิกใช้งาน: โปรดใช้ `path` แทน เราจะนำพร็อพเพอร์ตี้นี้ออกเมื่อเปิดตัวเวอร์ชันใหม่ในอนาคต ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ลำดับพิกัดของเส้นประกอบที่เรียงตามลำดับ ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`Polyline3DElement.altitudeMode`
`autofitsCamera` ไม่บังคับ	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภท: `boolean optional` ดู`Polyline3DElement.autofitsCamera`
`coordinates` ไม่บังคับ	ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ดู`Polyline3DElement.coordinates`
`drawsOccludedSegments` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polyline3DElement.drawsOccludedSegments`
`extruded` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polyline3DElement.extruded`
`geodesic` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polyline3DElement.geodesic`
`outerColor` ไม่บังคับ	ประเภท: `string optional` ดู`Polyline3DElement.outerColor`
`outerWidth` ไม่บังคับ	ประเภท: `number optional` ดู`Polyline3DElement.outerWidth`
`path` ไม่บังคับ	ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ดู`Polyline3DElement.path`
`strokeColor` ไม่บังคับ	ประเภท: `string optional` ดู`Polyline3DElement.strokeColor`
`strokeWidth` ไม่บังคับ	ประเภท: `number optional` ดู`Polyline3DElement.strokeWidth`
`zIndex` ไม่บังคับ	ประเภท: `number optional` ดู`Polyline3DElement.zIndex`

คลาส Polyline3DInteractiveElement

google.maps.maps3d.Polyline3DInteractiveElement class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"

เส้นประกอบ 3 มิติคือการวางซ้อนเชิงเส้นของส่วนของเส้นที่เชื่อมต่อกันบนแผนที่ 3 มิติ Polyline3DInteractiveElement จะได้รับเหตุการณ์ gmp-click ซึ่งต่างจาก Polyline3DElement

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Polyline3DInteractiveElement`	`Polyline3DInteractiveElement([options])` พารามิเตอร์ `options`: `Polyline3DElementOptions optional` สร้าง `Polyline3DInteractiveElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode` (attr: `altitude-mode`), `autofitsCamera` (attr: `autofits-camera`), `drawsOccludedSegments` (attr: `draws-occluded-segments`), `extruded` (attr: `extruded`), `geodesic` (attr: `geodesic`), `outerColor` (attr: `outer-color`), `outerWidth` (attr: `outer-width`), `path` (attr: `path`), `strokeColor` (attr: `stroke-color`), `strokeWidth` (attr: `stroke-width`), `zIndex` (attr: `z-index`), `coordinates`

พร็อพเพอร์ตี้

สืบทอด: altitudeMode (attr: altitude-mode), autofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), geodesic (attr: geodesic), outerColor (attr: outer-color), outerWidth (attr: outer-width), path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), coordinates

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

กิจกรรม
`gmp-click`	`function(clickEvent)` อาร์กิวเมนต์ `clickEvent`: `LocationClickEvent optional` ออบเจ็กต์เหตุการณ์จะมีตำแหน่งละติจูด-ลองจิจูด-ระดับความสูงของการคลิก เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ `Polyline3DInteractiveElement`

กิจกรรม

gmp-click

function(clickEvent)

อาร์กิวเมนต์

clickEvent: LocationClickEvent optional ออบเจ็กต์เหตุการณ์จะมีตำแหน่งละติจูด-ลองจิจูด-ระดับความสูงของการคลิก

เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ Polyline3DInteractiveElement

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

google.maps.maps3d.Polyline3DInteractiveElementOptions interface
extends Polyline3DElementOptions

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

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode`, `autofitsCamera`, `coordinates`, `drawsOccludedSegments`, `extruded`, `geodesic`, `outerColor`, `outerWidth`, `path`, `strokeColor`, `strokeWidth`, `zIndex`

คลาส Polygon3DElement

google.maps.maps3d.Polygon3DElement class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"

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

    
<gmp-polygon-3d
  autofits-camera
  draws-occluded-segments
  extruded
  fill-color="string"
  geodesic
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
  stroke-color="string"
  stroke-width="number"
  z-index="number">
</gmp-polygon-3d>

const {Polygon3DElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Polygon3DElement`	`Polygon3DElement([options])` พารามิเตอร์ `options`: `Polygon3DElementOptions optional` สร้าง `Polygon3DElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`altitudeMode`	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด
`autofitsCamera` attr: autofits-camera	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` หากระบุไว้ รูปหลายเหลี่ยมที่ระบุจะแสดงในวิวพอร์ตแผนที่ พร้อมกับองค์ประกอบอื่นๆ ที่เลือกใช้ แอตทริบิวต์ HTML: `autofits-camera`
`drawsOccludedSegments` attr: draws-occluded-segments	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าจะวาดส่วนของรูปหลายเหลี่ยมที่อาจถูกบดบังหรือไม่ เรขาคณิตของแผนที่ (เช่น อาคาร) อาจบดบังรูปหลายเหลี่ยมได้ แอตทริบิวต์ HTML: `draws-occluded-segments`
`extruded` attr: extruded	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าจะเชื่อมต่อรูปหลายเหลี่ยมกับพื้นหรือไม่ หากต้องการอัดรีดรูปหลายเหลี่ยม `altitudeMode` ต้องเป็น `RELATIVE_TO_GROUND` หรือ `ABSOLUTE` แอตทริบิวต์ HTML: `extruded`
`fillColor` attr: fill-color	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string optional` สีเติม รองรับสี CSS3 ทั้งหมด แอตทริบิวต์ HTML: `fill-color="string"`
`geodesic` attr: geodesic	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` เมื่อ `true` ขอบของรูปหลายเหลี่ยมจะได้รับการตีความว่าเป็นเส้นจีโอเดสิกและจะตามความโค้งของโลก เมื่อ `false` ขอบของรูปหลายเหลี่ยมจะแสดงผลเป็นเส้นตรงในพื้นที่หน้าจอ แอตทริบิวต์ HTML: `geodesic`
`innerPaths`	ประเภทอินพุต: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>> optional` ประเภทเอาต์พุต: `Array<Array<LatLngAltitude>> optional` ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด รูปหลายเหลี่ยมอาจประกอบด้วยเส้นทางอย่างน้อย 1 เส้นทางซึ่งสร้างส่วนที่ตัดออกหลายส่วนภายในรูปหลายเหลี่ยม ซึ่งแตกต่างจากเส้นประกอบ
`path` attr: path	ประเภทอินพุต: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ประเภทเอาต์พุต: `Array<LatLngAltitude> optional` ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ แอตทริบิวต์ HTML: `path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."`
`strokeColor` attr: stroke-color	ประเภทอินพุต: `string optional` ประเภทเอาต์พุต: `string optional` สีเส้น รองรับสี CSS3 ทั้งหมด แอตทริบิวต์ HTML: `stroke-color="string"`
`strokeWidth` attr: stroke-width	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` ความหนาของเส้นในหน่วยพิกเซล แอตทริบิวต์ HTML: `stroke-width="number"`
`zIndex` attr: z-index	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` zIndex เมื่อเทียบกับรูปหลายเหลี่ยมอื่นๆ แอตทริบิวต์ HTML: `z-index="number"`
`outerCoordinates`	เลิกใช้งาน: โปรดใช้ `path` แทน เราจะนำพร็อพเพอร์ตี้นี้ออกเมื่อเปิดตัวเวอร์ชันใหม่ในอนาคต ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด ระบบจะไม่สนใจระดับความสูงในบางโหมด ดังนั้นจึงไม่บังคับ
`innerCoordinates`	เลิกใช้งาน: โปรดใช้ `innerPaths` แทน เราจะนำพร็อพเพอร์ตี้นี้ออกเมื่อเปิดตัวเวอร์ชันใหม่ในอนาคต ประเภท: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>> optional` ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด รูปหลายเหลี่ยมอาจประกอบด้วยเส้นทางอย่างน้อย 1 เส้นทางซึ่งสร้างส่วนที่ตัดออกหลายส่วนภายในรูปหลายเหลี่ยม ซึ่งแตกต่างจากเส้นประกอบ

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`Polygon3DElement.altitudeMode`
`autofitsCamera` ไม่บังคับ	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ประเภท: `boolean optional` ดู`Polygon3DElement.autofitsCamera`
`drawsOccludedSegments` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polygon3DElement.drawsOccludedSegments`
`extruded` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polygon3DElement.extruded`
`fillColor` ไม่บังคับ	ประเภท: `string optional` ดู`Polygon3DElement.fillColor`
`geodesic` ไม่บังคับ	ประเภท: `boolean optional` ดู`Polygon3DElement.geodesic`
`innerCoordinates` ไม่บังคับ	ประเภท: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral>\|Iterable<LatLngLiteral>> optional` ดู`Polygon3DElement.innerCoordinates`
`innerPaths` ไม่บังคับ	ประเภท: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral>\|Iterable<LatLngLiteral>> optional` ดู`Polygon3DElement.innerPaths`
`outerCoordinates` ไม่บังคับ	ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ดู`Polygon3DElement.outerCoordinates`
`path` ไม่บังคับ	ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ดู`Polygon3DElement.path`
`strokeColor` ไม่บังคับ	ประเภท: `string optional` ดู`Polygon3DElement.strokeColor`
`strokeWidth` ไม่บังคับ	ประเภท: `number optional` ดู`Polygon3DElement.strokeWidth`
`zIndex` ไม่บังคับ	ประเภท: `number optional` ดู`Polygon3DElement.zIndex`

คลาส Polygon3DInteractiveElement

google.maps.maps3d.Polygon3DInteractiveElement class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"

รูปหลายเหลี่ยม 3 มิติ (เช่น เส้นประกอบ 3 มิติ) กำหนดชุดพิกัดที่เชื่อมต่อกันตามลำดับ นอกจากนี้ รูปหลายเหลี่ยมจะสร้างลูปปิดและกำหนดพื้นที่ที่เติมสี Polygon3DInteractiveElement จะได้รับเหตุการณ์ gmp-click ซึ่งต่างจาก Polygon3DElement

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`Polygon3DInteractiveElement`	`Polygon3DInteractiveElement([options])` พารามิเตอร์ `options`: `Polygon3DElementOptions optional` สร้าง `Polygon3DInteractiveElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode`, `autofitsCamera` (attr: `autofits-camera`), `drawsOccludedSegments` (attr: `draws-occluded-segments`), `extruded` (attr: `extruded`), `fillColor` (attr: `fill-color`), `geodesic` (attr: `geodesic`), `innerPaths`, `path` (attr: `path`), `strokeColor` (attr: `stroke-color`), `strokeWidth` (attr: `stroke-width`), `zIndex` (attr: `z-index`), `outerCoordinates`, `innerCoordinates`

พร็อพเพอร์ตี้

สืบทอด: altitudeMode, autofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), fillColor (attr: fill-color), geodesic (attr: geodesic), innerPaths, path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), outerCoordinates, innerCoordinates

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

กิจกรรม
`gmp-click`	`function(clickEvent)` อาร์กิวเมนต์ `clickEvent`: `LocationClickEvent optional` ออบเจ็กต์เหตุการณ์จะมีตำแหน่งละติจูด-ลองจิจูด-ระดับความสูงของการคลิก เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ `Polygon3DInteractiveElement`

กิจกรรม

gmp-click

function(clickEvent)

อาร์กิวเมนต์

clickEvent: LocationClickEvent optional ออบเจ็กต์เหตุการณ์จะมีตำแหน่งละติจูด-ลองจิจูด-ระดับความสูงของการคลิก

เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบ Polygon3DInteractiveElement

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

google.maps.maps3d.Polygon3DInteractiveElementOptions interface
extends Polygon3DElementOptions

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

พร็อพเพอร์ตี้
สืบทอด: `altitudeMode`, `autofitsCamera`, `drawsOccludedSegments`, `extruded`, `fillColor`, `geodesic`, `innerCoordinates`, `innerPaths`, `outerCoordinates`, `path`, `strokeColor`, `strokeWidth`, `zIndex`

คลาส FlattenerElement

google.maps.maps3d.FlattenerElement class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"

องค์ประกอบ Flattener ใช้เพื่อปรับพื้นที่ที่ระบุบนแผนที่ให้ราบเรียบ

<gmp-flattener
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ...">
</gmp-flattener>

const {FlattenerElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`FlattenerElement`	`FlattenerElement([options])` พารามิเตอร์ `options`: `FlattenerElementOptions optional`

พร็อพเพอร์ตี้

innerPaths

ประเภทอินพุต: Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional
ประเภทเอาต์พุต: Array<Array<LatLngAltitude>> optional

ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด เส้นทางเหล่านี้จะกำหนดหลุมการยกเว้นภายในเส้นทางหลักของรูปหลายเหลี่ยม ซึ่งก็คือโซนการปรับระดับ พื้นที่ภายใน innerPath จะได้รับการยกเว้นจากการปรับให้แบนราบ

path
attr: path

ประเภทอินพุต: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional
ประเภทเอาต์พุต: Array<LatLngAltitude> optional

ลำดับพิกัดที่เรียงตามลำดับซึ่งกำหนดลูปปิด วงล้อนี้จะเป็นตัวกำหนดโซนการแบนราบ

แอตทริบิวต์ HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`innerPaths` ไม่บังคับ	ประเภท: `Iterable<Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral>> optional` ดู`FlattenerElement.innerPaths`
`path` ไม่บังคับ	ประเภท: `Iterable<LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral> optional` ดู`FlattenerElement.path`

คลาส PopoverElement

google.maps.maps3d.PopoverElement class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"

องค์ประกอบ HTML ที่กำหนดเองซึ่งแสดงผลป๊อปโอเวอร์ ซึ่งมีลักษณะคล้ายลูกโป่งและมักเชื่อมต่อกับเครื่องหมาย

<gmp-popover
  auto-pan-disabled
  light-dismiss-disabled
  open
  position-anchor="lat,lng">
</gmp-popover>

const {PopoverElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`PopoverElement`	`PopoverElement([options])` พารามิเตอร์ `options`: `PopoverElementOptions optional`

พร็อพเพอร์ตี้
`altitudeMode`	ประเภทอินพุต: `AltitudeMode optional` ประเภทเอาต์พุต: `AltitudeMode` ค่าเริ่มต้น: `AltitudeMode.CLAMP_TO_GROUND` ระบุวิธีตีความองค์ประกอบระดับความสูงของตำแหน่ง
`autoPanDisabled` attr: auto-pan-disabled	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` หากตั้งค่าเป็น "จริง" ระบบจะปิดใช้การเลื่อนแผนที่เพื่อให้ป๊อปโอเวอร์ปรากฏอย่างสมบูรณ์เมื่อเปิดขึ้น แอตทริบิวต์ HTML: `auto-pan-disabled`
`lightDismissDisabled` attr: light-dismiss-disabled	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าควร "ปิดแบบเบา" ป๊อปโอเวอร์นี้หรือไม่ ลักษณะการทำงาน "ปิดเมื่อคลิกนอกองค์ประกอบ" คล้ายกับการตั้งค่าแอตทริบิวต์ `popover="auto"` ซึ่งเป็นส่วนหนึ่งของ Popover API ของเบราว์เซอร์ แอตทริบิวต์ HTML: `light-dismiss-disabled`
`open` attr: open	ประเภทอินพุต: `boolean optional` ประเภทเอาต์พุต: `boolean` ค่าเริ่มต้น: `false` ระบุว่าควรเปิดป๊อปโอเวอร์นี้หรือไม่ แอตทริบิวต์ HTML: `open`
`positionAnchor` attr: position-anchor	ประเภทอินพุต: `LatLngLiteral\|LatLngAltitudeLiteral\|Marker3DInteractiveElement\|MarkerInteractiveElement\|string optional` ประเภทเอาต์พุต: `LatLngAltitude\|Marker3DInteractiveElement\|MarkerInteractiveElement optional` ตำแหน่งที่จะแสดงป๊อปโอเวอร์นี้ หากป๊อปโอเวอร์ยึดอยู่กับเครื่องหมายแบบอินเทอร์แอกทีฟ ระบบจะใช้ตำแหน่งของเครื่องหมายแทน แอตทริบิวต์ HTML: `position-anchor="lat,lng"` `position-anchor="lat,lng,altitude"` `position-anchor="marker-id"`

สล็อต
`default`	วางเนื้อหาที่กำหนดช่องไว้ในส่วนหลักของป๊อปโอเวอร์
`header`	วางเนื้อหาที่กำหนดช่องไว้ในส่วนส่วนหัวของป๊อปโอเวอร์

พร็อพเพอร์ตี้ CSS
`--gmp-popover-max-width`	ความกว้างสูงสุดของป๊อปโอเวอร์ โดยไม่คำนึงถึงความกว้างของเนื้อหา
`--gmp-popover-min-width`	ความกว้างขั้นต่ำของป๊อปโอเวอร์ โดยไม่คำนึงถึงความกว้างของเนื้อหา เมื่อใช้พร็อพเพอร์ตี้นี้ เราขอแนะนำอย่างยิ่งให้ตั้งค่าเป็นค่าที่น้อยกว่าความกว้างของแผนที่ (เป็นพิกเซล)
`--gmp-popover-pixel-offset-x`	ออฟเซ็ตบนแกน X (หน่วยเป็นพิกเซล) ของปลายป๊อปโอเวอร์จากจุดบนแผนที่ซึ่งมีพิกัดทางภูมิศาสตร์ที่ป๊อปโอเวอร์ยึดอยู่
`--gmp-popover-pixel-offset-y`	ออฟเซ็ตบนแกน Y (หน่วยเป็นพิกเซล) ของปลายป๊อปโอเวอร์จากจุดบนแผนที่ซึ่งมีพิกัดทางภูมิศาสตร์ที่ป๊อปโอเวอร์ยึดอยู่
`background-color`	สีพื้นหลังของป๊อปโอเวอร์ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `background-color` โปรดทราบว่าป๊อปโอเวอร์สถานที่เริ่มต้นจะได้รับผลกระทบจากพร็อพเพอร์ตี้นี้ด้วย ใช้คลาส CSS ที่กำหนดเป้าหมายหรือสไตล์ในบรรทัดในป๊อปโอเวอร์ที่กำหนดเองเพื่อหลีกเลี่ยงการจัดสไตล์ป๊อปโอเวอร์สถานที่เริ่มต้น
`border-radius`	รัศมีเส้นขอบของป๊อปโอเวอร์ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `border-radius` โปรดทราบว่าป๊อปโอเวอร์สถานที่เริ่มต้นจะได้รับผลกระทบจากพร็อพเพอร์ตี้นี้ด้วย ใช้คลาส CSS ที่กำหนดเป้าหมายหรือสไตล์ในบรรทัดในป๊อปโอเวอร์ที่กำหนดเองเพื่อหลีกเลี่ยงการจัดสไตล์ป๊อปโอเวอร์สถานที่เริ่มต้น
`box-shadow`	เงากล่องของป๊อปโอเวอร์ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `box-shadow` โปรดทราบว่าป๊อปโอเวอร์สถานที่เริ่มต้นจะได้รับผลกระทบจากพร็อพเพอร์ตี้นี้ด้วย ใช้คลาส CSS ที่กำหนดเป้าหมายหรือสไตล์ในบรรทัดในป๊อปโอเวอร์ที่กำหนดเองเพื่อหลีกเลี่ยงการจัดสไตล์ป๊อปโอเวอร์สถานที่เริ่มต้น
`color-scheme`	ระบุรูปแบบสีที่สามารถแสดงป๊อปโอเวอร์นี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `color-scheme` หากไม่ได้ระบุไว้ ระบบจะใช้ค่าเริ่มต้นเป็นค่ากำหนดรูปแบบสีของผู้ใช้
`padding`	ระยะห่างจากขอบของป๊อปโอเวอร์ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ `padding` โปรดทราบว่าป๊อปโอเวอร์สถานที่เริ่มต้นจะได้รับผลกระทบจากพร็อพเพอร์ตี้นี้ด้วย ใช้คลาส CSS ที่กำหนดเป้าหมายหรือสไตล์ในบรรทัดในป๊อปโอเวอร์ที่กำหนดเองเพื่อหลีกเลี่ยงการจัดสไตล์ป๊อปโอเวอร์สถานที่เริ่มต้น

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`altitudeMode` ไม่บังคับ	ประเภท: `AltitudeMode optional` ดู`PopoverElement.altitudeMode`
`autoPanDisabled` ไม่บังคับ	ประเภท: `boolean optional` ดู`PopoverElement.autoPanDisabled`
`lightDismissDisabled` ไม่บังคับ	ประเภท: `boolean optional` ดู`PopoverElement.lightDismissDisabled`
`open` ไม่บังคับ	ประเภท: `boolean optional` ดู`PopoverElement.open`
`positionAnchor` ไม่บังคับ	ประเภท: `LatLngLiteral\|LatLngAltitudeLiteral\|string\|Marker3DInteractiveElement\|MarkerInteractiveElement optional` ดู`PopoverElement.positionAnchor`

ค่าคงที่ AltitudeMode

google.maps.maps3d.AltitudeMode ค่าคงที่
ไลบรารี "maps3d"

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

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท AltitudeModeString

const {AltitudeMode} = await google.maps.importLibrary("maps3d");

ค่าคงที่
`ABSOLUTE`	ช่วยให้แสดงวัตถุที่สัมพันธ์กับระดับน้ำทะเลปานกลางได้ ซึ่งหมายความว่าหากระดับรายละเอียดของภูมิประเทศเปลี่ยนแปลงใต้วัตถุ ตำแหน่งสัมบูรณ์ของวัตถุจะยังคงเหมือนเดิม
`CLAMP_TO_GROUND`	ช่วยให้แสดงออบเจ็กต์ที่วางอยู่บนพื้นได้ โดยจะยังคงอยู่ที่ระดับพื้นดินตามภูมิประเทศ ไม่ว่าจะระบุระดับความสูงไว้เท่าใดก็ตาม หากวัตถุอยู่เหนือแหล่งน้ำขนาดใหญ่ ระบบจะวางวัตถุไว้ที่ระดับน้ำทะเล
`RELATIVE_TO_GROUND`	ช่วยให้แสดงออบเจ็กต์ที่สัมพันธ์กับพื้นผิวได้ หากระดับรายละเอียดของภูมิประเทศเปลี่ยนแปลง ตำแหน่งของวัตถุจะยังคงที่เมื่อเทียบกับพื้นดิน เมื่ออยู่เหนือน้ำ ระบบจะตีความระดับความสูงเป็นค่าในหน่วยเมตรเหนือระดับน้ำทะเล
`RELATIVE_TO_MESH`	ช่วยให้แสดงวัตถุที่สัมพันธ์กับพื้นดิน+อาคาร+ผิวน้ำที่สูงที่สุด เมื่ออยู่เหนือน้ำ ข้อมูลนี้จะเป็นพื้นผิวน้ำ เมื่ออยู่เหนือภูมิประเทศ ข้อมูลนี้จะเป็นพื้นผิวอาคาร (หากมี) หรือพื้นผิวพื้นดิน (หากไม่มีอาคาร)

คลาส CirclePathElement

google.maps.maps3d.CirclePathElement class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"

ภาพซ้อนทับวงกลม 3 มิติบนแผนที่ 3 มิติ

 
<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>

const {CirclePathElement} = await google.maps.importLibrary("maps3d");

ผู้ผลิต
`CirclePathElement`	`CirclePathElement([options])` พารามิเตอร์ `options`: `CirclePathElementOptions optional` สร้าง `CirclePathElement` พร้อมตัวเลือกที่ระบุ

พร็อพเพอร์ตี้
`center` attr: center	ประเภทอินพุต: `LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral optional` ประเภทเอาต์พุต: `LatLngAltitude optional` จุดศูนย์กลางของวงกลม แอตทริบิวต์ HTML: `center="lat,lng,altitude"`
`radius` attr: radius	ประเภทอินพุต: `number optional` ประเภทเอาต์พุต: `number optional` รัศมีของวงกลมในหน่วยเมตร แอตทริบิวต์ HTML: `radius="number"`

เมธอด
สืบทอด: `addEventListener`, `removeEventListener`

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

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

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

พร็อพเพอร์ตี้
`center` ไม่บังคับ	ประเภท: `LatLngAltitude\|LatLngAltitudeLiteral\|LatLngLiteral optional` ดู`CirclePathElement.center`
`radius` ไม่บังคับ	ประเภท: `number optional` ดู`CirclePathElement.radius`

Draw on the map จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

คลาส MarkerElement

ผู้ผลิต

พร็อพเพอร์ตี้

สล็อต

พร็อพเพอร์ตี้ CSS

เมธอด

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

พร็อพเพอร์ตี้

คลาส MarkerInteractiveElement

ผู้ผลิต

พร็อพเพอร์ตี้

สล็อต

พร็อพเพอร์ตี้ CSS

เมธอด

กิจกรรม

MarkerInteractiveElementOptions interface

พร็อพเพอร์ตี้

คลาส Marker3DElement

ผู้ผลิต

พร็อพเพอร์ตี้

สล็อต

เมธอด

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

พร็อพเพอร์ตี้

Marker3DInteractiveElement class

ผู้ผลิต

พร็อพเพอร์ตี้

สล็อต

เมธอด

กิจกรรม

Marker3DInteractiveElementOptions interface

พร็อพเพอร์ตี้

คลาส Model3DElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

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

พร็อพเพอร์ตี้

Model3DInteractiveElement class

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

กิจกรรม

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

พร็อพเพอร์ตี้

คลาส Polyline3DElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

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

พร็อพเพอร์ตี้

คลาส Polyline3DInteractiveElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

กิจกรรม

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

พร็อพเพอร์ตี้

คลาส Polygon3DElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

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

พร็อพเพอร์ตี้

คลาส Polygon3DInteractiveElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

กิจกรรม

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

พร็อพเพอร์ตี้

คลาส FlattenerElement

ผู้ผลิต

พร็อพเพอร์ตี้

เมธอด

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

พร็อพเพอร์ตี้

คลาส PopoverElement

ผู้ผลิต

Draw on the map