Map3DElement class
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
ผู้ผลิต | |
---|---|
Map3DElement |
Map3DElement([options]) พารามิเตอร์:
|
พร็อพเพอร์ตี้ | |
---|---|
bounds |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optional เมื่อตั้งค่าแล้ว จะจำกัดตำแหน่งของกล้องภายในขอบเขตละติจูด/ลองจิจูดที่ระบุ โปรดทราบว่าระบบจะยังคงแสดงผลวัตถุที่อยู่นอกขอบเขต ขอบเขตสามารถจํากัดทั้งลองจิจูดและละติจูด หรือจํากัดเฉพาะลองจิจูดหรือละติจูดก็ได้ สำหรับขอบเขตเฉพาะละติจูด ให้ใช้ลองจิจูดตะวันตกและตะวันออกของ -180 และ 180 ตามลำดับ สำหรับขอบเขตเฉพาะลองจิจูด ให้ใช้ละติจูดเหนือและใต้ของ 90 และ -90 ตามลำดับ |
center |
ประเภท:
LatLngAltitude|LatLngAltitudeLiteral optional ศูนย์กลางของแผนที่ที่ระบุเป็น LatLngAltitude โดยที่ระดับความสูงเป็นเมตรเหนือระดับพื้นดิน โปรดทราบว่าตำแหน่งนี้ไม่จำเป็นต้องเป็นตำแหน่งของกล้อง เนื่องจากช่อง
range จะส่งผลต่อระยะห่างของกล้องจากจุดศูนย์กลางของแผนที่ หากไม่ได้ตั้งค่าไว้ ระบบจะใช้ {lat: 0, lng: 0, altitude: 63170000} เป็นค่าเริ่มต้น 63170000 เมตรคือความสูงสูงสุดที่อนุญาต (รัศมีของโลกคูณด้วย 10)แอตทริบิวต์ HTML:
|
defaultLabelsDisabled |
ประเภท:
boolean optional ค่าเริ่มต้น:
false เมื่อเป็น
true ระบบจะไม่แสดงผลป้ายกำกับแผนที่เริ่มต้นแอตทริบิวต์ HTML:
|
defaultUIDisabled |
ประเภท:
boolean optional ค่าเริ่มต้น:
false เมื่อ
true ระบบจะปิดใช้ปุ่ม UI เริ่มต้นทั้งหมด ไม่ปิดใช้แป้นพิมพ์และการควบคุมด้วยท่าทางแอตทริบิวต์ HTML:
|
heading |
ประเภท:
number optional เข็มทิศของแผนที่เป็นองศา โดยทิศเหนือเป็น 0 เมื่อไม่มีการเอียง ระบบจะตีความการหมุนเป็นทิศทาง
แอตทริบิวต์ HTML:
|
maxAltitude |
ประเภท:
number optional ความสูงจากพื้นดินสูงสุดที่จะแสดงบนแผนที่ ค่าที่ถูกต้องคือระหว่าง
0 ถึง 63170000 เมตร (รัศมีของโลกคูณด้วย 10)แอตทริบิวต์ HTML:
|
maxHeading |
ประเภท:
number optional มุมสูงสุดของทิศทาง (การหมุน) ของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง
0 ถึง 360 องศา minHeading และ maxHeading แสดงถึงช่วงเวลาที่ไม่เกิน 360 องศาซึ่งระบบจะอนุญาตท่าทางสัมผัสเพื่อเปลี่ยนหัวเรื่อง minHeading = 180 และ maxHeading = 90 จะอนุญาตส่วนหัวใน [0, 90] และส่วนหัวใน [180, 360] minHeading = 90 และ maxHeading = 180 จะอนุญาตส่วนหัวใน [90, 180] แอตทริบิวต์ HTML:
|
maxTilt |
ประเภท:
number optional มุมสูงสุดของการตกกระทบของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง
0 ถึง 90 องศาแอตทริบิวต์ HTML:
|
minAltitude |
ประเภท:
number optional ระดับความสูงขั้นต่ำจากพื้นดินที่จะแสดงบนแผนที่ ค่าที่ถูกต้องคือระหว่าง
0 ถึง 63170000 เมตร (รัศมีของโลกคูณด้วย 10)แอตทริบิวต์ HTML:
|
minHeading |
ประเภท:
number optional มุมต่ำสุดของทิศทาง (การหมุน) ของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง
0 ถึง 360 องศา minHeading และ maxHeading แสดงถึงช่วงเวลาที่ไม่เกิน 360 องศาซึ่งระบบจะอนุญาตท่าทางสัมผัสเพื่อเปลี่ยนหัวเรื่อง minHeading = 180 และ maxHeading = 90 จะอนุญาตส่วนหัวใน [0, 90] และส่วนหัวใน [180, 360] minHeading = 90 และ maxHeading = 180 จะอนุญาตส่วนหัวใน [90, 180] แอตทริบิวต์ HTML:
|
minTilt |
ประเภท:
number optional มุมตกกระทบต่ำสุดของแผนที่ ค่าที่ถูกต้องอยู่ระหว่าง
0 ถึง 90 องศาแอตทริบิวต์ HTML:
|
range |
ประเภท:
number optional ระยะทางจากกล้องถึงศูนย์กลางของแผนที่เป็นเมตร
แอตทริบิวต์ HTML:
|
roll |
ประเภท:
number optional การพลิกกล้องรอบเวกเตอร์มุมมองเป็นองศา หากไม่มีการเอียง ระบบจะตีความการหมุนเป็นทิศทางเพื่อแก้ไขความคลุมเครือ
แอตทริบิวต์ HTML:
|
tilt |
ประเภท:
number optional การเอียงเวกเตอร์มุมมองของกล้องเป็นองศา เวกเตอร์มุมมองที่มองลงไปยังพื้นโลกโดยตรงจะเอียง 0 องศา เวกเตอร์มุมมองที่ชี้ออกจากโลกจะเอียง
180 องศาแอตทริบิวต์ HTML:
|
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
flyCameraAround |
flyCameraAround(options) พารามิเตอร์:
ผลลัพธ์: ไม่มี
วิธีนี้จะหมุนกล้องรอบๆ ตำแหน่งหนึ่งๆ เป็นระยะเวลาหนึ่งๆ โดยหมุนครบจำนวนรอบที่กำหนดในช่วงเวลานั้น โดยค่าเริ่มต้น กล้องจะหมุนตามเข็มนาฬิกา หากระบุจำนวนรอบเป็นค่าลบ กล้องจะหมุนตามเข็มนาฬิกาแทน วิธีการนี้เป็นแบบไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มขึ้นได้หลังจากที่แผนที่โหลดข้อมูลขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวเริ่มเล่น หากจำนวนรอบเป็น 0 ระบบจะไม่หมุนและภาพเคลื่อนไหวจะจบลงทันทีหลังจากเริ่ม |
flyCameraTo |
flyCameraTo(options) พารามิเตอร์:
ผลลัพธ์: ไม่มี
วิธีนี้จะย้ายกล้องเป็นเส้นโค้งพาราโบลาจากตำแหน่งปัจจุบันไปยังตำแหน่งปลายที่กำหนดในระยะเวลาที่ระบุ วิธีการนี้เป็นแบบไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มขึ้นได้หลังจากที่แผนที่โหลดข้อมูลขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวเริ่มเล่น |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
stopCameraAnimation |
stopCameraAnimation() พารามิเตอร์: ไม่มี
ผลลัพธ์: ไม่มี
วิธีนี้จะหยุดภาพเคลื่อนไหวของผีเสื้อที่อาจกำลังทำงานอยู่ กล้องจะอยู่ในตำแหน่งที่แสดงอยู่กลางภาพเคลื่อนไหว จะไม่เทเลพอร์ตไปยังจุดสิ้นสุด วิธีการเป็นแบบไม่พร้อมกันเนื่องจากภาพเคลื่อนไหวจะเริ่มหรือหยุดได้หลังจากที่แผนที่โหลดข้อมูลขั้นต่ำแล้วเท่านั้น เมธอดจะแสดงผลเมื่อภาพเคลื่อนไหวหยุดลง |
กิจกรรม | |
---|---|
gmp-animationend |
function(animationEndEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มต้นเมื่อภาพเคลื่อนไหวของการบินสิ้นสุดลง เหตุการณ์นี้จะส่งผ่านไปยัง DOM Tree |
gmp-centerchange |
function(centerChangeEvent) อาร์กิวเมนต์:
ระบบจะเรียกเหตุการณ์นี้เมื่อพร็อพเพอร์ตี้ศูนย์ของ Map3DElement เปลี่ยนแปลง |
gmp-click |
function(clickEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มต้นเมื่อมีการคลิกองค์ประกอบ Map3DElement |
gmp-headingchange |
function(headingChangeEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะทํางานเมื่อพร็อพเพอร์ตี้ Heading ของ Map3DElement เปลี่ยนแปลง |
gmp-rangechange |
function(rangeChangeEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะทริกเกอร์เมื่อพร็อพเพอร์ตี้ช่วงของ Map3DElement เปลี่ยนแปลง |
gmp-rollchange |
function(rollChangeEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะทํางานเมื่อพร็อพเพอร์ตี้ Roll ของ Map3DElement เปลี่ยนแปลง |
gmp-steadychange |
function(steadyChangeEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะทํางานเมื่อสถานะคงที่ของ Map3DElement เปลี่ยนแปลง |
gmp-tiltchange |
function(tiltChangeEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะทริกเกอร์เมื่อพร็อพเพอร์ตี้การเอียงของ Map3DElement เปลี่ยนแปลง |
Map3DElementOptions interface
google.maps.maps3d.Map3DElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Map3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าใน Map3DElement ได้
พร็อพเพอร์ตี้ | |
---|---|
bounds optional |
ประเภท:
LatLngBounds|LatLngBoundsLiteral optional |
center optional |
ประเภท:
LatLngAltitude|LatLngAltitudeLiteral optional |
defaultLabelsDisabled optional |
ประเภท:
boolean optional |
defaultUIDisabled optional |
ประเภท:
boolean optional |
heading optional |
ประเภท:
number optional |
maxAltitude optional |
ประเภท:
number optional |
maxHeading optional |
ประเภท:
number optional |
maxTilt optional |
ประเภท:
number optional |
minAltitude optional |
ประเภท:
number optional |
minHeading optional |
ประเภท:
number optional |
minTilt optional |
ประเภท:
number optional |
range optional |
ประเภท:
number optional |
roll optional |
ประเภท:
number optional |
tilt optional |
ประเภท:
number optional |
FlyAroundAnimationOptions interface
google.maps.maps3d.FlyAroundAnimationOptions
อินเทอร์เฟซ
ตัวเลือกการปรับแต่งสำหรับภาพเคลื่อนไหว FlyCameraAround
พร็อพเพอร์ตี้ | |
---|---|
camera |
ประเภท:
CameraOptions จุดศูนย์กลางที่กล้องควรมองในระหว่างภาพเคลื่อนไหวแบบโคจร โปรดทราบว่าทิศทางบนแผนที่จะเปลี่ยนไปเมื่อกล้องโคจรรอบจุดศูนย์กลางนี้ |
durationMillis optional |
ประเภท:
number optional ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ระยะเวลานี้คือระยะเวลาทั้งหมดของภาพเคลื่อนไหว ไม่ใช่ระยะเวลาของการหมุนครั้งเดียว |
rounds optional |
ประเภท:
number optional จำนวนรอบที่จะหมุนรอบจุดศูนย์กลางในระยะเวลาที่กำหนด ซึ่งจะควบคุมความเร็วโดยรวมของการหมุน การส่งค่าลบไปยัง rounds จะทำให้กล้องหมุนทวนเข็มนาฬิกาแทนการหมุนตามเข็มนาฬิกาตามค่าเริ่มต้น |
FlyToAnimationOptions interface
google.maps.maps3d.FlyToAnimationOptions
อินเทอร์เฟซ
ตัวเลือกการปรับแต่งสำหรับภาพเคลื่อนไหว FlyCameraTo
พร็อพเพอร์ตี้ | |
---|---|
endCamera |
ประเภท:
CameraOptions ตำแหน่งที่กล้องควรชี้เมื่อภาพเคลื่อนไหวสิ้นสุด |
durationMillis optional |
ประเภท:
number optional ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ระยะเวลา 0 จะส่งกล้องไปยังตำแหน่งสุดท้ายโดยตรง |
CameraOptions interface
google.maps.maps3d.CameraOptions
อินเทอร์เฟซ
ออบเจ็กต์ CameraOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ในออบเจ็กต์กล้อง วัตถุกล้องอาจเป็นอะไรก็ได้ที่มีตำแหน่งกล้อง เช่น สถานะแผนที่ปัจจุบัน หรือสถานะภาพเคลื่อนไหวที่ขอในอนาคต
พร็อพเพอร์ตี้ | |
---|---|
center optional |
ประเภท:
LatLngAltitude|LatLngAltitudeLiteral optional |
heading optional |
ประเภท:
number optional |
range optional |
ประเภท:
number optional |
roll optional |
ประเภท:
number optional |
tilt optional |
ประเภท:
number optional |
SteadyChangeEvent class
google.maps.maps3d.SteadyChangeEvent
class
เหตุการณ์นี้สร้างขึ้นจากการเฝ้าติดตามสถานะคงที่ของ Map3DElement
เหตุการณ์นี้จะส่งผ่านไปยัง DOM Tree
คลาสนี้ขยายจาก Event
เข้าถึงโดยการโทรหา const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d")
โปรดดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
---|---|
isSteady |
ประเภท:
boolean บ่งบอกว่า Map3DElement ทำงานอย่างสม่ำเสมอหรือไม่ (กล่าวคือ การแสดงผลทั้งหมดสำหรับฉากปัจจุบันเสร็จสมบูรณ์แล้ว) |
LocationClickEvent class
google.maps.maps3d.LocationClickEvent
class
เหตุการณ์นี้สร้างขึ้นจากการคลิก Map3DElement
คลาสนี้ขยายจาก Event
เข้าถึงโดยการโทรหา const {LocationClickEvent} = await google.maps.importLibrary("maps3d")
โปรดดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
---|---|
position |
ประเภท:
LatLngAltitude optional ละติจูด/ลองจิจูด/ระดับความสูงที่อยู่ใต้เคอร์เซอร์เมื่อเกิดเหตุการณ์ โปรดทราบว่าระดับที่ละเอียดน้อยลงจะแสดงข้อมูลที่แม่นยำน้อยลง นอกจากนี้ ระบบอาจแสดงค่าระดับความสูงของพื้นทะเลสำหรับค่าระดับความสูงเมื่อคลิกที่ผิวน้ำจากตำแหน่งกล้องที่สูงกว่า เหตุการณ์นี้จะส่งผ่านไปยัง DOM Tree |
PlaceClickEvent class
google.maps.maps3d.PlaceClickEvent
class
เหตุการณ์นี้สร้างขึ้นจากการคลิก Map3DElement
คลาสนี้ขยายจาก LocationClickEvent
เข้าถึงโดยการโทรหา const {PlaceClickEvent} = await google.maps.importLibrary("maps3d")
โปรดดูไลบรารีใน Maps JavaScript API
พร็อพเพอร์ตี้ | |
---|---|
placeId |
ประเภท:
string รหัสสถานที่ขององค์ประกอบแผนที่ |
รับค่า:
position
|
เมธอด | |
---|---|
fetchPlace |
fetchPlace() พารามิเตอร์: ไม่มี
ดึงข้อมูล Place สำหรับรหัสสถานที่นี้ ระบบจะป้อนข้อมูลพร็อพเพอร์ตี้ id ลงในออบเจ็กต์ Place ที่เป็นผล คุณสามารถขอช่องเพิ่มเติมในภายหลังผ่าน Place.fetchFields() โดยขึ้นอยู่กับการเปิดใช้และการเรียกเก็บเงิน Places API ตามปกติ ระบบจะปฏิเสธการสัญญาหากเกิดข้อผิดพลาดในการดึงข้อมูล Place |
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
ผู้ผลิต | |
---|---|
Marker3DElement |
Marker3DElement([options]) พารามิเตอร์:
สร้าง Marker3DElement ด้วยตัวเลือกที่ระบุ |
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode |
ประเภท:
AltitudeMode optional ค่าเริ่มต้น:
AltitudeMode.CLAMP_TO_GROUND ระบุวิธีตีความองค์ประกอบระดับความสูงของตำแหน่ง
แอตทริบิวต์ HTML:
|
collisionBehavior |
ประเภท:
CollisionBehavior optional ค่าเริ่มต้น:
CollisionBehavior.REQUIRED การแจกแจงที่ระบุลักษณะการทํางานของ Marker3DElement เมื่อชนกับ Marker3DElement อื่นหรือป้ายกำกับแผนที่ฐาน
แอตทริบิวต์ HTML:
|
drawsWhenOccluded |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าควรวาดเครื่องหมายนี้หรือไม่เมื่อถูกบดบัง เครื่องหมายอาจถูกบดบังโดยเรขาคณิตของแผนที่ (เช่น อาคาร)
แอตทริบิวต์ HTML:
|
extruded |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าจะเชื่อมต่อเครื่องหมายกับพื้นหรือไม่ หากต้องการยื่นเครื่องหมาย
altitudeMode ต้องเป็น RELATIVE_TO_GROUND หรือ ABSOLUTE แอตทริบิวต์ HTML:
|
label |
ประเภท:
string optional ข้อความที่จะแสดงโดยเครื่องหมายนี้
แอตทริบิวต์ HTML:
|
position |
ประเภท:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ตำแหน่งของปลายเครื่องหมาย ระบบจะไม่สนใจระดับความสูงในบางโหมด จึงไม่จำเป็นต้องระบุ |
sizePreserved |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าควรคงขนาดของเครื่องหมายนี้ไว้หรือไม่ โดยไม่คำนึงถึงระยะห่างจากกล้อง โดยค่าเริ่มต้น เครื่องหมายจะปรับขนาดตามระยะทางจากกล้อง/การเอียง
แอตทริบิวต์ HTML:
|
zIndex |
ประเภท:
number optional zIndex เทียบกับเครื่องหมายอื่นๆ
แอตทริบิวต์ HTML:
|
สล็อต | |
---|---|
default |
องค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน Marker3DElement โดยตรงจะได้รับการใส่ลงในช่อง แต่ระบบจะใช้เฉพาะองค์ประกอบประเภท HTMLImageElement , SVGElement และ PinElement ในการวาดเครื่องหมาย โดยจะไม่สนใจองค์ประกอบอื่นๆ HTMLImageElement และ SVGElement ต้องอยู่ในองค์ประกอบ <template> ก่อนกำหนดให้กับช่องเริ่มต้นของ Marker3DElement ปัจจุบันระบบจะแรสเตอร์รูปภาพและ SVG ก่อนแสดงผลในฉาก 3 มิติ ดังนั้น HTML ที่กําหนดเองซึ่งฝังอยู่ในคลาส SVG หรือ CSS ที่เพิ่มลงในรูปภาพจะไม่มีผลและอาจไม่แสดงเมื่อเครื่องหมายแสดงบนหน้าจอ |
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
Marker3DElementOptions interface
google.maps.maps3d.Marker3DElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Marker3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Marker3DElement
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode optional |
ประเภท:
AltitudeMode optional |
collisionBehavior optional |
ประเภท:
CollisionBehavior optional |
drawsWhenOccluded optional |
ประเภท:
boolean optional |
extruded optional |
ประเภท:
boolean optional |
label optional |
ประเภท:
string optional |
position optional |
ประเภท:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
sizePreserved optional |
ประเภท:
boolean optional |
zIndex optional |
ประเภท:
number optional |
Marker3DInteractiveElement class
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
ผู้ผลิต | |
---|---|
Marker3DInteractiveElement |
Marker3DInteractiveElement([options]) พารามิเตอร์:
สร้าง Marker3DInteractiveElement ด้วยตัวเลือกที่ระบุ |
พร็อพเพอร์ตี้ | |
---|---|
รับค่ามา:
altitudeMode ,
collisionBehavior ,
drawsWhenOccluded ,
extruded ,
label ,
position ,
sizePreserved ,
zIndex
|
สล็อต | |
---|---|
default |
องค์ประกอบที่กำหนดเองซึ่งเพิ่มลงใน Marker3DInteractiveElement โดยตรงจะได้รับการใส่ลงในช่อง แต่ระบบจะใช้เฉพาะองค์ประกอบประเภท PinElement ในการวาดเครื่องหมาย โดยจะไม่สนใจองค์ประกอบอื่นๆ |
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
กิจกรรม | |
---|---|
gmp-click |
function(clickEvent) อาร์กิวเมนต์:
เหตุการณ์นี้จะเริ่มต้นเมื่อมีการคลิกองค์ประกอบ Marker3DInteractiveElement |
Marker3DInteractiveElementOptions interface
google.maps.maps3d.Marker3DInteractiveElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Marker3DInteractiveElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Marker3DInteractiveElement
อินเทอร์เฟซนี้ขยายจาก
Marker3DElementOptions
พร็อพเพอร์ตี้ | |
---|---|
รับค่ามา:
altitudeMode ,
collisionBehavior ,
drawsWhenOccluded ,
extruded ,
label ,
position ,
sizePreserved ,
zIndex
|
Model3DElement class
google.maps.maps3d.Model3DElement
class
โมเดล 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
ผู้ผลิต | |
---|---|
Model3DElement |
Model3DElement([options]) พารามิเตอร์:
สร้าง Model3DElement ด้วยตัวเลือกที่ระบุ |
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode |
ประเภท:
AltitudeMode optional ค่าเริ่มต้น:
AltitudeMode.CLAMP_TO_GROUND ระบุวิธีตีความระดับความสูงในตำแหน่ง
แอตทริบิวต์ HTML:
|
orientation |
ประเภท:
Orientation3D|Orientation3DLiteral optional อธิบายการหมุนระบบพิกัดของโมเดล 3 มิติเพื่อวางตำแหน่งโมเดลบนแผนที่ 3 มิติ ระบบจะหมุนโมเดลตามลําดับดังนี้ การหมุน การส่าย และการวางแนว |
position |
ประเภท:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ตั้งค่าตำแหน่งของ Model3DElement ระบบจะไม่สนใจระดับความสูงในบางโหมด จึงไม่จำเป็นต้องระบุ |
scale |
ประเภท:
number|Vector3D|Vector3DLiteral optional ค่าเริ่มต้น:
1 ปรับขนาดโมเดลตามแกน x, y และ z ในอวกาศพิกัดของโมเดล |
src |
ประเภท:
string|URL optional ระบุ URL ของโมเดล 3 มิติ ขณะนี้ระบบรองรับเฉพาะโมเดลในรูปแบบ
.glb เท่านั้น ระบบจะเปลี่ยนเส้นทาง URL สัมพัทธ์ของ HTTP เป็น URL ที่สมบูรณ์ที่เกี่ยวข้อง โปรดทราบว่าหากคุณโฮสต์ไฟล์โมเดล .glb ในเว็บไซต์หรือเซิร์ฟเวอร์อื่นที่ไม่ใช่แอปพลิเคชันหลัก โปรดตั้งค่าส่วนหัว CORS HTTP ที่ถูกต้อง ซึ่งจะช่วยให้แอปพลิเคชันเข้าถึงไฟล์โมเดลจากโดเมนอื่นได้อย่างปลอดภัยแอตทริบิวต์ HTML:
|
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
Model3DElementOptions interface
google.maps.maps3d.Model3DElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Model3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Model3DElement
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode optional |
ประเภท:
AltitudeMode optional |
orientation optional |
ประเภท:
Orientation3D|Orientation3DLiteral optional |
position optional |
ประเภท:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
scale optional |
ประเภท:
number|Vector3D|Vector3DLiteral optional |
src optional |
ประเภท:
string|URL optional |
Polyline3DElement class
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
ผู้ผลิต | |
---|---|
Polyline3DElement |
Polyline3DElement([options]) พารามิเตอร์:
สร้าง Polyline3DElement ด้วยตัวเลือกที่ระบุ |
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode |
ประเภท:
AltitudeMode optional ค่าเริ่มต้น:
AltitudeMode.ABSOLUTE ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด
แอตทริบิวต์ HTML:
|
coordinates |
ประเภท:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional ลำดับพิกัดของเส้นประกอบ ระบบจะไม่สนใจระดับความสูงในบางโหมด จึงไม่จำเป็นต้องระบุ |
drawsOccludedSegments |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าจะวาดส่วนของเส้นประกอบที่อาจถูกบดบังหรือไม่ รูปหลายเส้นอาจถูกบดบังโดยเรขาคณิตของแผนที่ (เช่น อาคาร)
แอตทริบิวต์ HTML:
|
extruded |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าจะเชื่อมต่อเส้นประกอบกับพื้นดินหรือไม่ หากต้องการยื่นเส้นประกอบ
altitudeMode ต้องเป็น RELATIVE_TO_GROUND หรือ ABSOLUTE แอตทริบิวต์ HTML:
|
geodesic |
ประเภท:
boolean optional ค่าเริ่มต้น:
false เมื่อเป็น
true ระบบจะตีความขอบของเส้นประกอบว่าเป็นเส้นโค้งทรงกลม และจะเป็นไปตามความโค้งของพื้นผิวโลก เมื่อ false ระบบจะแสดงผลขอบของเส้นประกอบเป็นเส้นตรงในพื้นที่หน้าจอแอตทริบิวต์ HTML:
|
outerColor |
ประเภท:
string optional สีด้านนอก รองรับสี CSS3 ทั้งหมด
แอตทริบิวต์ HTML:
|
outerWidth |
ประเภท:
number optional ความกว้างด้านนอกอยู่ระหว่าง
0.0 ถึง 1.0 ตัวเลขนี้เป็นเปอร์เซ็นต์ของ strokeWidth แอตทริบิวต์ HTML:
|
strokeColor |
ประเภท:
string optional สีเส้น รองรับสี CSS3 ทั้งหมด
แอตทริบิวต์ HTML:
|
strokeWidth |
ประเภท:
number optional ความหนาของเส้นเป็นพิกเซล
แอตทริบิวต์ HTML:
|
zIndex |
ประเภท:
number optional zIndex เมื่อเทียบกับรูปหลายเหลี่ยมอื่นๆ
แอตทริบิวต์ HTML:
|
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
Polyline3DElementOptions interface
google.maps.maps3d.Polyline3DElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Polyline3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Polyline3DElement
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode optional |
ประเภท:
AltitudeMode optional |
coordinates optional |
ประเภท:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
drawsOccludedSegments optional |
ประเภท:
boolean optional |
extruded optional |
ประเภท:
boolean optional |
geodesic optional |
ประเภท:
boolean optional |
outerColor optional |
ประเภท:
string optional |
outerWidth optional |
ประเภท:
number optional |
strokeColor optional |
ประเภท:
string optional |
strokeWidth optional |
ประเภท:
number optional |
zIndex optional |
ประเภท:
number optional |
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
ผู้ผลิต | |
---|---|
Polygon3DElement |
Polygon3DElement([options]) พารามิเตอร์:
สร้าง Polygon3DElement ด้วยตัวเลือกที่ระบุ |
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode |
ประเภท:
AltitudeMode optional ค่าเริ่มต้น:
AltitudeMode.ABSOLUTE ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด
แอตทริบิวต์ HTML:
|
drawsOccludedSegments |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าจะวาดส่วนของรูปหลายเหลี่ยมที่อาจถูกบดบังหรือไม่ รูปหลายเหลี่ยมอาจถูกบดบังโดยเรขาคณิตของแผนที่ (เช่น อาคาร)
แอตทริบิวต์ HTML:
|
extruded |
ประเภท:
boolean optional ค่าเริ่มต้น:
false ระบุว่าจะเชื่อมต่อรูปหลายเหลี่ยมกับพื้นดินหรือไม่ หากต้องการยื่นรูปหลายเหลี่ยม
altitudeMode ต้องเป็น RELATIVE_TO_GROUND หรือ ABSOLUTE แอตทริบิวต์ HTML:
|
fillColor |
ประเภท:
string optional สีเติม รองรับสี CSS3 ทั้งหมด
แอตทริบิวต์ HTML:
|
geodesic |
ประเภท:
boolean optional ค่าเริ่มต้น:
false เมื่อเป็น
true ระบบจะตีความขอบของรูปหลายเหลี่ยมเป็นทรงลูกโลกและจะเป็นไปตามความโค้งของพื้นผิวโลก เมื่อ false ระบบจะแสดงผลขอบของรูปหลายเหลี่ยมเป็นเส้นตรงในพื้นที่หน้าจอแอตทริบิวต์ HTML:
|
innerCoordinates |
ประเภท:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional ลำดับพิกัดตามลําดับที่กําหนดเป็นลูปปิด รูปหลายเหลี่ยมอาจประกอบด้วยเส้นทางอย่างน้อย 1 เส้น ซึ่งจะสร้างส่วนที่ตัดออกหลายส่วนภายในรูปหลายเหลี่ยม ซึ่งแตกต่างจากเส้นประกอบ |
outerCoordinates |
ประเภท:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional ลำดับพิกัดตามลําดับที่กําหนดเป็นลูปปิด ระบบจะไม่สนใจระดับความสูงในบางโหมด จึงไม่จำเป็นต้องระบุ |
strokeColor |
ประเภท:
string optional สีเส้น รองรับสี CSS3 ทั้งหมด
แอตทริบิวต์ HTML:
|
strokeWidth |
ประเภท:
number optional ความหนาของเส้นเป็นพิกเซล
แอตทริบิวต์ HTML:
|
zIndex |
ประเภท:
number optional zIndex เมื่อเทียบกับรูปหลายเหลี่ยมอื่นๆ
แอตทริบิวต์ HTML:
|
เมธอด | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void ตั้งค่าฟังก์ชันที่จะเรียกใช้ทุกครั้งที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) พารามิเตอร์:
ผลลัพธ์:
void นํา Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener |
Polygon3DElementOptions interface
google.maps.maps3d.Polygon3DElementOptions
อินเทอร์เฟซ
ออบเจ็กต์ Polygon3DElementOptions ที่ใช้เพื่อกำหนดพร็อพเพอร์ตี้ที่ตั้งค่าได้ใน Polygon3DElement
พร็อพเพอร์ตี้ | |
---|---|
altitudeMode optional |
ประเภท:
AltitudeMode optional |
drawsOccludedSegments optional |
ประเภท:
boolean optional |
extruded optional |
ประเภท:
boolean optional |
fillColor optional |
ประเภท:
string optional |
geodesic optional |
ประเภท:
boolean optional |
innerCoordinates optional |
ประเภท:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral>|Iterable<LatLngLiteral>> optional |
outerCoordinates optional |
ประเภท:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional |
strokeColor optional |
ประเภท:
string optional |
strokeWidth optional |
ประเภท:
number optional |
zIndex optional |
ประเภท:
number optional |
AltitudeMode constants
google.maps.maps3d.AltitudeMode
constants
ระบุวิธีตีความองค์ประกอบระดับความสูงในพิกัด
เข้าถึงโดยการโทรหา const {AltitudeMode} = await google.maps.importLibrary("maps3d")
โปรดดูไลบรารีใน Maps JavaScript API
ค่าคงที่ | |
---|---|
ABSOLUTE |
ช่วยให้แสดงวัตถุสัมพันธ์กับระดับน้ำทะเลเฉลี่ย ซึ่งหมายความว่าหากรายละเอียดระดับภูมิประเทศใต้วัตถุมีการเปลี่ยนแปลง ตำแหน่งสัมบูรณ์ของวัตถุจะยังคงเหมือนเดิม |
CLAMP_TO_GROUND |
อนุญาตให้แสดงวัตถุที่วางอยู่บนพื้น ฟีเจอร์นี้จะยังคงอยู่ที่ระดับพื้นดินตามภูมิประเทศ ไม่ว่าจะระบุระดับความสูงเท่าใดก็ตาม หากวัตถุอยู่เหนือแหล่งน้ำขนาดใหญ่ ระบบจะวางวัตถุที่ระดับน้ำทะเล |
RELATIVE_TO_GROUND |
อนุญาตให้แสดงวัตถุสัมพันธ์กับพื้นดิน หากรายละเอียดระดับภูมิประเทศมีการเปลี่ยนแปลง ตำแหน่งของวัตถุจะยังคงเดิมเมื่อเทียบกับพื้นดิน เมื่ออยู่เหนือน้ำ ระบบจะตีความระดับความสูงเป็นค่าในหน่วยเมตรเหนือระดับน้ำทะเล |
RELATIVE_TO_MESH |
อนุญาตให้แสดงวัตถุสัมพันธ์กับพื้นดิน+อาคาร+พื้นน้ำที่สูงที่สุด เมื่ออยู่เหนือน้ำ จะเป็นพื้นผิวน้ำ เมื่ออยู่เหนือภูมิประเทศ จะเป็นพื้นผิวอาคาร (หากมี) หรือพื้นดิน (หากไม่มีอาคาร) |