Draw on the map

Class MarkerElement

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

Menampilkan posisi di peta 3D. Perhatikan bahwa position harus ditetapkan agar MarkerElement ditampilkan.

MarkerElement mendukung penyesuaian tinggi melalui elemen HTML kustom, tetapi memiliki performa interaksi yang lebih rendah daripada Marker3DElement, terutama saat menangani lebih dari 1.000 penanda di peta.

<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])
Parameter:
Membuat MarkerElement dengan opsi yang ditentukan.
altitudeMode
attr: altitude-mode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara komponen ketinggian posisi ditafsirkan.
Atribut HTML: altitude-mode="value-name"
anchorLeft
attr: anchor-left
Jenis input: string optional
Jenis output: string
Default: -50%
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dari titik tengah bawah standar penanda default.
Atribut HTML: anchor-left="string"
anchorTop
attr: anchor-top
Jenis input: string optional
Jenis output: string
Default: -100%
Nilai persentase panjang CSS yang digunakan untuk mengimbangi titik anchor dari sudut kiri atas penanda. Hal ini berguna saat menggunakan visual yang memiliki titik anchor yang berbeda dari titik tengah bawah standar penanda default.
Atribut HTML: anchor-top="string"
AlphaautofitsCamera
attr: autofits-camera
Jenis: boolean optional
Default: false
Jika diberikan, penanda yang ditentukan akan terlihat dalam area pandang peta, bersama dengan elemen lain yang telah diikutsertakan.
Atribut HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Jenis input: CollisionBehavior optional
Jenis output: CollisionBehavior
Enumerasi yang menentukan perilaku MarkerElement saat tumpang-tindih dengan MarkerElement, Marker3DElement, atau label peta dasar lainnya.
Atribut HTML: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Jenis input: number optional
Jenis output: number optional
Angka yang digunakan untuk membantu menentukan prioritas relatif di antara penanda CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY (termasuk Marker3DElement). Nilai collisionPriority yang lebih tinggi menunjukkan prioritas yang lebih tinggi.
Atribut HTML: collision-priority="number"
position
attr: position
Jenis input: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Jenis output: LatLngAltitude optional
Lokasi ujung penanda. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Atribut HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Jenis: string
Teks rollover. Jika disediakan, teks aksesibilitas (misalnya, untuk digunakan dengan pembaca layar) akan ditambahkan ke MarkerElement dengan nilai yang diberikan.
Atribut HTML: title="string"
default
Setiap elemen kustom yang ditambahkan langsung ke MarkerElement akan ditempatkan.
z-index
Indeks z penanda ini. Lihat dokumentasi z-index untuk mengetahui detail selengkapnya. Penanda yang tumpang-tindih dengan indeks z yang lebih besar akan menutupi penanda dengan indeks z yang lebih kecil. Secara default, penanda ditampilkan sesuai dengan posisi DOM-nya, dengan penanda yang ditambahkan kemudian di DOM muncul di depan penanda yang ditambahkan ke DOM sebelumnya.
Diwarisi: addEventListener, removeEventListener

Antarmuka MarkerElementOptions

antarmuka google.maps.maps3d.MarkerElementOptions
diperluas oleh MarkerInteractiveElementOptions
diimplementasikan oleh MarkerElement, MarkerInteractiveElement

Objek MarkerElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada MarkerElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
anchorLeft
opsional
Jenis: string optional
anchorTop
opsional
Jenis: string optional
AlphaautofitsCamera
opsional
Jenis: boolean optional
collisionBehavior
opsional
Jenis: CollisionBehavior optional
collisionPriority
opsional
Jenis: number optional
position
opsional
title
opsional
Jenis: string optional

Class MarkerInteractiveElement

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

Menampilkan posisi di peta 3D. Perhatikan bahwa position harus ditetapkan agar MarkerInteractiveElement ditampilkan. Tidak seperti MarkerElement, MarkerInteractiveElement menerima peristiwa gmp-click.

<gmp-marker-interactive
  gmp-popover-target-element="popover-id">
</gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
MarkerInteractiveElement
MarkerInteractiveElement([options])
Parameter:
Membuat MarkerInteractiveElement dengan opsi yang ditentukan.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Jenis input: PopoverElement optional
Jenis output: PopoverElement optional
Jika ditetapkan, elemen popover akan terbuka saat penanda ini diklik.
Atribut HTML: gmp-popover-target-element="popover-id"
Diwarisi: altitudeMode (attr: altitude-mode), anchorLeft (attr: anchor-left), anchorTop (attr: anchor-top), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), position (attr: position), title (attr: title)
Diwarisi: default
Diwarisi: z-index
Diwarisi: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumen:
Peristiwa ini diaktifkan saat elemen MarkerInteractiveElement diklik.

Antarmuka MarkerInteractiveElementOptions

antarmuka google.maps.maps3d.MarkerInteractiveElementOptions memperluas MarkerElementOptions
diimplementasikan oleh MarkerInteractiveElement

Objek MarkerInteractiveElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada MarkerInteractiveElement.

gmpPopoverTargetElement
opsional
Jenis: PopoverElement optional
Diwarisi: altitudeMode, anchorLeft, anchorTop, AlphaautofitsCamera, collisionBehavior, collisionPriority, position, title

Class Marker3DElement

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

Menampilkan posisi di peta 3D. Perhatikan bahwa position harus ditetapkan agar Marker3DElement ditampilkan.

<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])
Parameter:
Membuat Marker3DElement dengan opsi yang ditentukan.
altitudeMode
attr: altitude-mode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara komponen ketinggian posisi ditafsirkan.
Atribut HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika diberikan, penanda yang ditentukan akan terlihat dalam area pandang peta, bersama dengan elemen lain yang telah diikutsertakan.
Atribut HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Jenis input: CollisionBehavior optional
Jenis output: CollisionBehavior
Enumerasi yang menentukan perilaku Marker3DElement saat tumpang-tindih dengan Marker3DElement lain atau dengan label peta dasar.
Atribut HTML: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Jenis input: number optional
Jenis output: number optional
Prioritas tabrakan yang digunakan untuk deteksi tabrakan.
Atribut HTML: collision-priority="number"
drawsWhenOccluded
attr: draws-when-occluded
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah penanda ini harus digambar atau tidak saat terhalang. Penanda dapat terhalang oleh geometri peta (misalnya, bangunan).
Atribut HTML: draws-when-occluded
extruded
attr: extruded
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah akan menghubungkan penanda ke permukaan tanah. Untuk mengekstrusi penanda, altitudeMode harus berupa RELATIVE_TO_GROUND atau ABSOLUTE.
Atribut HTML: extruded
label
attr: label
Jenis input: string optional
Jenis output: string optional
Teks yang akan ditampilkan oleh penanda ini.
Atribut HTML: label="string"
position
attr: position
Jenis input: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Jenis output: LatLngAltitude optional
Lokasi ujung penanda. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Atribut HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
sizePreserved
attr: size-preserved
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah penanda ini harus mempertahankan ukurannya atau tidak, terlepas dari jaraknya dari kamera. Secara default, penanda diskalakan berdasarkan jarak dari kamera/kemiringan.
Atribut HTML: size-preserved
zIndex
attr: z-index
Jenis input: number optional
Jenis output: number optional
zIndex dibandingkan dengan penanda lainnya.
Atribut HTML: z-index="number"
default
Setiap elemen kustom yang langsung ditambahkan ke Marker3DElement akan ditempatkan, tetapi hanya elemen jenis HTMLImageElement, SVGElement, dan PinElement yang akan digunakan untuk menggambar penanda, elemen lainnya akan diabaikan.
HTMLImageElement dan SVGElement harus digabungkan dalam elemen <template> sebelum ditetapkan ke slot default Marker3DElement.

Gambar dan SVG saat ini diraster sebelum dirender dalam tampilan 3D, sehingga HTML kustom yang disematkan ke dalam SVG atau class CSS yang ditambahkan ke gambar tidak akan diterapkan dan mungkin tidak akan terlihat saat penanda ditampilkan di layar.
Diwarisi: addEventListener, removeEventListener

Antarmuka Marker3DElementOptions

antarmuka google.maps.maps3d.Marker3DElementOptions
diperluas oleh Marker3DInteractiveElementOptions
diimplementasikan oleh Marker3DElement, Marker3DInteractiveElement

Objek Marker3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Marker3DElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
AlphaautofitsCamera
opsional
Jenis: boolean optional
collisionBehavior
opsional
Jenis: CollisionBehavior optional
collisionPriority
opsional
Jenis: number optional
drawsWhenOccluded
opsional
Jenis: boolean optional
extruded
opsional
Jenis: boolean optional
label
opsional
Jenis: string optional
position
opsional
sizePreserved
opsional
Jenis: boolean optional
zIndex
opsional
Jenis: number optional

Class Marker3DInteractiveElement

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

Menampilkan posisi di peta 3D. Perhatikan bahwa position harus ditetapkan agar Marker3DInteractiveElement ditampilkan. Tidak seperti Marker3DElement, Marker3DInteractiveElement menerima peristiwa gmp-click.

<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])
Parameter:
Membuat Marker3DInteractiveElement dengan opsi yang ditentukan.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Jenis input: PopoverElement optional
Jenis output: PopoverElement optional
Jika ditetapkan, elemen popover akan terbuka saat penanda ini diklik.
Atribut HTML: gmp-popover-target-element="popover-id"
title
attr: title
Jenis: string
Teks rollover. Jika disediakan, teks aksesibilitas (misalnya, untuk digunakan dengan pembaca layar) akan ditambahkan ke Marker3DInteractiveElement dengan nilai yang diberikan.
Atribut HTML: title="string"
Diwarisi: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (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
Setiap elemen kustom yang ditambahkan langsung ke Marker3DInteractiveElement akan ditempatkan, tetapi hanya elemen jenis PinElement yang akan digunakan untuk menggambar penanda, elemen lainnya akan diabaikan.
Diwarisi: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumen:
Peristiwa ini diaktifkan saat elemen Marker3DInteractiveElement diklik.
gmp-pointermove
function(pointerMoveEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor bergerak dalam elemen Marker3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor meninggalkan elemen Marker3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor memasuki elemen Marker3DInteractiveElement.

Antarmuka Marker3DInteractiveElementOptions

antarmuka google.maps.maps3d.Marker3DInteractiveElementOptions memperluas Marker3DElementOptions
diimplementasikan oleh Marker3DInteractiveElement

Objek Marker3DInteractiveElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Marker3DInteractiveElement.

gmpPopoverTargetElement
opsional
Jenis: PopoverElement optional
title
opsional
Jenis: string optional
Diwarisi: altitudeMode, AlphaautofitsCamera, collisionBehavior, collisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Class Model3DElement

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

Model 3D yang memungkinkan rendering model gLTF. Perhatikan bahwa position dan src harus ditetapkan agar Model3DElement ditampilkan.

Properti inti gLTF PBR harus didukung. Saat ini, tidak ada ekstensi atau properti ekstensi yang didukung.

<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])
Parameter:
Membuat Model3DElement dengan opsi yang ditentukan.
altitudeMode
attr: altitude-mode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara penafsiran ketinggian dalam posisi.
Atribut HTML: altitude-mode="value-name"
orientation
attr: orientation
Jenis input: Orientation3D|Orientation3DLiteral optional
Jenis output: Orientation3D optional
Menjelaskan rotasi sistem koordinat model 3D untuk memosisikan model di Peta 3D.

Rotasi diterapkan ke model dalam urutan berikut: roll, tilt, lalu heading.
Atribut HTML: orientation="heading,tilt,roll"
position
attr: position
Jenis input: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Jenis output: LatLngAltitude optional
Menetapkan posisi Model3DElement. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Atribut HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
scale
attr: scale
Jenis input: number|Vector3D|Vector3DLiteral optional
Jenis output: Vector3D optional
Default: 1
Menskalakan model di sepanjang sumbu x, y, dan z dalam ruang koordinat model.
Atribut HTML:
  • scale="number"
  • scale="x,y,z"
src
attr: src
Jenis input: string|URL optional
Jenis output: URL optional
Menentukan URL model 3D. Saat ini, hanya model dalam format .glb yang didukung.

URL HTTP relatif apa pun akan di-resolve ke URL absolut yang sesuai.

Perhatikan bahwa jika Anda menghosting file model .glb di situs atau server yang berbeda dari aplikasi utama, pastikan untuk menyiapkan header HTTP CORS yang benar. Hal ini memungkinkan aplikasi Anda mengakses file model dari domain lain dengan aman.
Atribut HTML: src="url"
Diwarisi: addEventListener, removeEventListener

Antarmuka Model3DElementOptions

antarmuka google.maps.maps3d.Model3DElementOptions
diperluas oleh Model3DInteractiveElementOptions
diimplementasikan oleh Model3DElement, Model3DInteractiveElement

Objek Model3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Model3DElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
orientation
opsional
position
opsional
scale
opsional
Jenis: number|Vector3D|Vector3DLiteral optional
src
opsional
Jenis: string|URL optional

Class Model3DInteractiveElement

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

Model 3D yang memungkinkan rendering model gLTF. Perhatikan bahwa position dan src harus ditetapkan agar Model3DElement ditampilkan.

Properti inti gLTF PBR harus didukung. Saat ini, tidak ada ekstensi atau properti ekstensi yang didukung.

Tidak seperti Model3DElement, Model3DInteractiveElement menerima peristiwa gmp-click.

<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parameter:
Membuat Model3DInteractiveElement dengan opsi yang ditentukan.
Diwarisi: altitudeMode (attr: altitude-mode), orientation (attr: orientation), position (attr: position), scale (attr: scale), src (attr: src)
Diwarisi: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumen:
Peristiwa ini diaktifkan saat elemen Model3DInteractiveElement diklik.
gmp-pointermove
function(pointerMoveEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor bergerak dalam elemen Model3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor meninggalkan elemen Model3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor memasuki elemen Model3DInteractiveElement.

Antarmuka Model3DInteractiveElementOptions

antarmuka google.maps.maps3d.Model3DInteractiveElementOptions memperluas Model3DElementOptions
diimplementasikan oleh Model3DInteractiveElement

Objek Model3DInteractiveElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Model3DInteractiveElement.

Diwarisi: altitudeMode, orientation, position, scale, src

Polyline3DElement class

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

Polyline 3D adalah overlay linear segmen garis terhubung pada peta 3D.

<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])
Parameter:
Membuat Polyline3DElement dengan opsi yang ditentukan.
altitudeMode
attr: altitude-mode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara komponen ketinggian dalam koordinat ditafsirkan.
Atribut HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika diberikan, polyline yang ditentukan akan terlihat dalam area pandang peta, bersama dengan elemen lain yang telah diikutsertakan.
Atribut HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah bagian polyline yang dapat terhalang digambar atau tidak. Polyline dapat terhalang oleh geometri peta (misalnya, bangunan).
Atribut HTML: draws-occluded-segments
extruded
attr: extruded
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah akan menghubungkan polyline ke permukaan tanah. Untuk mengekstrusi polyline, altitudeMode harus berupa RELATIVE_TO_GROUND atau ABSOLUTE.
Atribut HTML: extruded
geodesic
attr: geodesic
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika true, tepi polyline ditafsirkan sebagai geodesi dan akan mengikuti kelengkungan Bumi. Jika false, tepi polyline dirender sebagai garis lurus di ruang layar.
Atribut HTML: geodesic
outerColor
attr: outer-color
Jenis input: string optional
Jenis output: string optional
Warna luar. Semua warna CSS3 didukung.
Atribut HTML: outer-color="string"
outerWidth
attr: outer-width
Jenis input: number optional
Jenis output: number optional
Lebar luar antara 0.0 dan 1.0. Ini adalah persentase dari strokeWidth.
Atribut HTML: outer-width="number"
path
attr: path
Urutan koordinat Polyline. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Atribut HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Jenis input: string optional
Jenis output: string optional
Warna garis luar. Semua warna CSS3 didukung.
Atribut HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Jenis input: number optional
Jenis output: number optional
Lebar garis luar dalam piksel.
Atribut HTML: stroke-width="number"
zIndex
attr: z-index
Jenis input: number optional
Jenis output: number optional
zIndex dibandingkan dengan poli lainnya.
Atribut HTML: z-index="number"
coordinates
Urutan koordinat Polyline. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Diwarisi: addEventListener, removeEventListener

Antarmuka Polyline3DElementOptions

antarmuka google.maps.maps3d.Polyline3DElementOptions
diperluas oleh Polyline3DInteractiveElementOptions
diimplementasikan oleh Polyline3DElement, Polyline3DInteractiveElement

Objek Polyline3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Polyline3DElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
AlphaautofitsCamera
opsional
Jenis: boolean optional
coordinates
opsional
drawsOccludedSegments
opsional
Jenis: boolean optional
extruded
opsional
Jenis: boolean optional
geodesic
opsional
Jenis: boolean optional
outerColor
opsional
Jenis: string optional
outerWidth
opsional
Jenis: number optional
path
opsional
strokeColor
opsional
Jenis: string optional
strokeWidth
opsional
Jenis: number optional
zIndex
opsional
Jenis: number optional

Class Polyline3DInteractiveElement

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

Polyline 3D adalah overlay linear segmen garis terhubung pada peta 3D. Tidak seperti Polyline3DElement, Polyline3DInteractiveElement menerima peristiwa gmp-click.

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parameter:
Membuat Polyline3DInteractiveElement dengan opsi yang ditentukan.
Diwarisi: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (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
Diwarisi: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumen:
  • clickEvent: LocationClickEvent optional Objek peristiwa akan berisi lokasi lintang-bujur-ketinggian dari klik.
Peristiwa ini diaktifkan saat elemen Polyline3DInteractiveElement diklik.
gmp-pointermove
function(pointerMoveEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor bergerak dalam elemen Polyline3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor meninggalkan elemen Polyline3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor memasuki elemen Polyline3DInteractiveElement.

Antarmuka Polyline3DInteractiveElementOptions

antarmuka google.maps.maps3d.Polyline3DInteractiveElementOptions memperluas Polyline3DElementOptions
diimplementasikan oleh Polyline3DInteractiveElement

Objek Polyline3DInteractiveElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Polyline3DInteractiveElement.

Diwarisi: altitudeMode, AlphaautofitsCamera, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex

Class Polygon3DElement

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

Poligon 3D (seperti polyline 3D) menentukan serangkaian koordinat yang terhubung dalam urutan yang berurutan. Selain itu, poligon membentuk loop tertutup dan menentukan region yang terisi.

<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])
Parameter:
Membuat Polygon3DElement dengan opsi yang ditentukan.
altitudeMode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara komponen ketinggian dalam koordinat ditafsirkan.
AlphaautofitsCamera
attr: autofits-camera
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika diberikan, poligon yang ditentukan akan terlihat dalam area pandang peta, bersama dengan elemen lain yang telah diikutsertakan.
Atribut HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah bagian poligon yang dapat terhalang digambar atau tidak. Poligon dapat terhalang oleh geometri peta (misalnya, bangunan).
Atribut HTML: draws-occluded-segments
extruded
attr: extruded
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah akan menghubungkan poligon ke permukaan tanah. Untuk mengekstrusi poligon, altitudeMode harus berupa RELATIVE_TO_GROUND atau ABSOLUTE.
Atribut HTML: extruded
fillColor
attr: fill-color
Jenis input: string optional
Jenis output: string optional
Warna pengisi. Semua warna CSS3 didukung.
Atribut HTML: fill-color="string"
geodesic
attr: geodesic
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika true, tepi poligon ditafsirkan sebagai geodesi dan akan mengikuti kelengkungan Bumi. Jika false, tepi poligon dirender sebagai garis lurus di ruang layar.
Atribut HTML: geodesic
innerPaths
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Tidak seperti polyline, poligon dapat terdiri dari satu atau beberapa jalur, yang membuat beberapa potongan di dalam poligon.
path
attr: path
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
Atribut HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Jenis input: string optional
Jenis output: string optional
Warna garis luar. Semua warna CSS3 didukung.
Atribut HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Jenis input: number optional
Jenis output: number optional
Lebar garis luar dalam piksel.
Atribut HTML: stroke-width="number"
zIndex
attr: z-index
Jenis input: number optional
Jenis output: number optional
zIndex dibandingkan dengan poli lainnya.
Atribut HTML: z-index="number"
outerCoordinates
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Ketinggian diabaikan dalam mode tertentu, sehingga bersifat opsional.
innerCoordinates
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Tidak seperti polyline, poligon dapat terdiri dari satu atau beberapa jalur, yang membuat beberapa potongan di dalam poligon.
Diwarisi: addEventListener, removeEventListener

Antarmuka Polygon3DElementOptions

antarmuka google.maps.maps3d.Polygon3DElementOptions
diperluas oleh Polygon3DInteractiveElementOptions
diimplementasikan oleh Polygon3DElement, Polygon3DInteractiveElement

Objek Polygon3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Polygon3DElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
AlphaautofitsCamera
opsional
Jenis: boolean optional
drawsOccludedSegments
opsional
Jenis: boolean optional
extruded
opsional
Jenis: boolean optional
fillColor
opsional
Jenis: string optional
geodesic
opsional
Jenis: boolean optional
innerCoordinates
opsional
innerPaths
opsional
outerCoordinates
opsional
path
opsional
strokeColor
opsional
Jenis: string optional
strokeWidth
opsional
Jenis: number optional
zIndex
opsional
Jenis: number optional

Class Polygon3DInteractiveElement

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

Poligon 3D (seperti polyline 3D) menentukan serangkaian koordinat yang terhubung dalam urutan yang berurutan. Selain itu, poligon membentuk loop tertutup dan menentukan region yang terisi. Tidak seperti Polygon3DElement, Polygon3DInteractiveElement menerima peristiwa gmp-click.

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parameter:
Membuat Polygon3DInteractiveElement dengan opsi yang ditentukan.
Diwarisi: altitudeMode, AlphaautofitsCamera (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
Diwarisi: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argumen:
  • clickEvent: LocationClickEvent optional Objek peristiwa akan berisi lokasi lintang-bujur-ketinggian dari klik.
Peristiwa ini diaktifkan saat elemen Polygon3DInteractiveElement diklik.
gmp-pointermove
function(pointerMoveEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor bergerak dalam elemen Polygon3DInteractiveElement.
gmp-pointerout
function(pointerOutEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor meninggalkan elemen Polygon3DInteractiveElement.
gmp-pointerover
function(pointerOverEvent)
Argumen:
Peristiwa ini diaktifkan saat kursor memasuki elemen Polygon3DInteractiveElement.

Antarmuka Polygon3DInteractiveElementOptions

antarmuka google.maps.maps3d.Polygon3DInteractiveElementOptions memperluas Polygon3DElementOptions
diimplementasikan oleh Polygon3DInteractiveElement

Objek Polygon3DInteractiveElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Polygon3DInteractiveElement.

Diwarisi: altitudeMode, AlphaautofitsCamera, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, innerPaths, outerCoordinates, path, strokeColor, strokeWidth, zIndex

Class FlattenerElement

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

Elemen perata digunakan untuk meratakan area tertentu di peta.

<gmp-flattener
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ...">
</gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
FlattenerElement
FlattenerElement([options])
Parameter:
innerPaths
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Jalur ini menentukan Lubang Pengecualian dalam jalur utama poligon, yaitu Zona Perataan. Area dalam innerPath dikecualikan dari perataan.
path
attr: path
Urutan koordinat yang berurutan yang menetapkan loop tertutup. Siklus ini menentukan Zona Perataan.
Atribut HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
Diwarisi: addEventListener, removeEventListener

Antarmuka FlattenerElementOptions

antarmuka google.maps.maps3d.FlattenerElementOptions
diimplementasikan oleh FlattenerElement

Objek FlattenerElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada FlattenerElement.

innerPaths
opsional
path
opsional

Class Label3DElement

class google.maps.maps3d.Label3DElement extends HTMLElement implements Label3DElementOptions
library "maps3d"

Merepresentasikan label teks yang terkait dengan penanda 3D di peta, sehingga memungkinkan konfigurasi properti secara independen seperti perilaku saat tumpang tindih.

<gmp-label-3d
  collision-behavior="value-name"
  for="marker-id">
</gmp-label-3d>
const {Label3DElement} = await google.maps.importLibrary("maps3d");
Label3DElement
Label3DElement([options])
Parameter:
Membuat Label3DElement dengan opsi yang ditentukan.
collisionBehavior
attr: collision-behavior
Jenis input: CollisionBehavior optional
Jenis output: CollisionBehavior optional
Enumerasi yang menentukan perilaku label Marker3DElement saat tumpang-tindih dengan elemen lain.
Atribut HTML: collision-behavior="value-name"
for
attr: for
Jenis input: string|HTMLElement optional
Jenis output: string|HTMLElement optional
Marker3DElement yang menjadi tujuan label ini.
Atribut HTML: for="marker-id"
Diwarisi: addEventListener, removeEventListener

Antarmuka Label3DElementOptions

antarmuka google.maps.maps3d.Label3DElementOptions
diimplementasikan oleh Label3DElement

Objek Label3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada Label3DElement.

collisionBehavior
opsional
Jenis: CollisionBehavior optional
Enumerasi yang menentukan perilaku label Marker3DElement saat tumpang-tindih dengan elemen lain.
for
opsional
Jenis: string|HTMLElement optional
Marker3DElement yang menjadi tujuan label ini.

Class PopoverElement

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

Elemen HTML kustom yang merender popover. Bentuknya seperti balon dan sering kali terhubung ke penanda.

<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])
Parameter:
altitudeMode
Jenis input: AltitudeMode optional
Jenis output: AltitudeMode
Menentukan cara komponen ketinggian posisi ditafsirkan.
autoPanDisabled
attr: auto-pan-disabled
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika disetel ke benar (true), akan menonaktifkan penggeseran peta untuk membuat popover terlihat sepenuhnya saat dibuka.
Atribut HTML: auto-pan-disabled
lightDismissDisabled
attr: light-dismiss-disabled
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah popover ini harus "ditutup ringan" atau tidak. Perilaku "tutup ringan" mirip dengan menyetel atribut popover="auto" yang merupakan bagian dari Popover API browser.
Atribut HTML: light-dismiss-disabled
open
attr: open
Jenis input: boolean optional
Jenis output: boolean
Default: false
Menentukan apakah popover ini harus terbuka atau tidak.
Atribut HTML: open
positionAnchor
attr: position-anchor
Posisi untuk menampilkan popover ini. Jika popover ditambatkan ke penanda interaktif, posisi penanda akan digunakan.
Atribut HTML:
  • position-anchor="lat,lng"
  • position-anchor="lat,lng,altitude"
  • position-anchor="marker-id"
default
Menempatkan konten slot di bagian utama popover.
header
Menempatkan konten slot di bagian judul popover.
--gmp-popover-max-width
Lebar maksimum popover, terlepas dari lebar konten.
--gmp-popover-min-width
Lebar minimum popover, terlepas dari lebar konten. Saat menggunakan properti ini, sebaiknya tetapkan ke nilai yang lebih kecil dari lebar peta (dalam piksel).
--gmp-popover-pixel-offset-x
Offset pada sumbu x, dalam piksel, dari ujung popover dari titik di peta yang koordinat geografisnya menjadi titik anchor popover.
--gmp-popover-pixel-offset-y
Offset pada sumbu y, dalam piksel, dari ujung popover dari titik di peta yang koordinat geografisnya menjadi tempat popover ditambatkan.
background-color
Warna latar belakang popover. Lihat dokumentasi background-color untuk mengetahui detail selengkapnya. Perhatikan bahwa popover tempat default juga terpengaruh oleh properti ini. Gunakan class CSS yang ditargetkan atau gaya inline pada popover kustom untuk menghindari penataan gaya popover tempat default.
border-radius
Radius batas popover. Lihat dokumentasi border-radius untuk mengetahui detail selengkapnya. Perhatikan bahwa popover tempat default juga terpengaruh oleh properti ini. Gunakan class CSS yang ditargetkan atau gaya inline pada popover kustom untuk menghindari penataan gaya popover tempat default.
box-shadow
Bayangan kotak popover. Lihat dokumentasi box-shadow untuk mengetahui detail selengkapnya. Perhatikan bahwa popover tempat default juga terpengaruh oleh properti ini. Gunakan class CSS yang ditargetkan atau gaya inline pada popover kustom untuk menghindari penataan gaya popover tempat default.
color-scheme
Menunjukkan skema warna yang dapat digunakan untuk merender popover ini. Lihat dokumentasi color-scheme untuk mengetahui detail selengkapnya. Jika tidak ditentukan, setelan ini akan ditetapkan secara default ke preferensi skema warna pengguna.
padding
Padding popover. Lihat dokumentasi padding untuk mengetahui detail selengkapnya. Perhatikan bahwa popover tempat default juga terpengaruh oleh properti ini. Gunakan class CSS yang ditargetkan atau gaya inline pada popover kustom untuk menghindari penataan gaya popover tempat default.
Diwarisi: addEventListener, removeEventListener

Antarmuka PopoverElementOptions

antarmuka google.maps.maps3d.PopoverElementOptions
diimplementasikan oleh PopoverElement

Objek PopoverElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada PopoverElement.

altitudeMode
opsional
Jenis: AltitudeMode optional
autoPanDisabled
opsional
Jenis: boolean optional
lightDismissDisabled
opsional
Jenis: boolean optional
open
opsional
Jenis: boolean optional
positionAnchor
opsional

Konstanta AltitudeMode

google.maps.maps3d.AltitudeMode
library "maps3d"

Menentukan cara komponen ketinggian dalam koordinat ditafsirkan.

Konstanta ini juga dapat digunakan sebagai string. Di TypeScript, literal string ditentukan oleh jenis AltitudeModeString.

const {AltitudeMode} = await google.maps.importLibrary("maps3d");
ABSOLUTE Memungkinkan untuk mengekspresikan objek yang relatif terhadap permukaan laut rata-rata. Artinya, jika tingkat detail medan berubah di bawah objek, posisi absolutnya akan tetap sama.
CLAMP_TO_GROUND Memungkinkan untuk mengekspresikan objek yang ditempatkan di permukaan tanah. Ikon tersebut akan tetap berada di permukaan tanah mengikuti medan, terlepas dari ketinggian yang diberikan. Jika objek diposisikan di atas perairan besar, objek tersebut akan ditempatkan di permukaan laut.
RELATIVE_TO_GROUND Memungkinkan untuk mengekspresikan objek yang terkait dengan permukaan tanah. Jika tingkat detail medan berubah, posisi objek akan tetap konstan terhadap permukaan tanah. Jika berada di atas air, ketinggian akan ditafsirkan sebagai nilai dalam meter di atas permukaan laut.
RELATIVE_TO_MESH Memungkinkan untuk mengekspresikan objek yang sesuai dengan permukaan tanah+bangunan+permukaan air tertinggi. Jika di atas air, ini akan menjadi permukaan air; jika di atas medan, ini akan menjadi permukaan bangunan (jika ada) atau permukaan tanah (jika tidak ada bangunan).

Class CirclePathElement

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

Overlay lingkaran 3D pada peta 3D.

<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
CirclePathElement
CirclePathElement([options])
Parameter:
Membuat CirclePathElement dengan opsi yang ditentukan.
center
attr: center
Jenis input: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Jenis output: LatLngAltitude optional
Pusat lingkaran.
Atribut HTML: center="lat,lng,altitude"
radius
attr: radius
Jenis input: number optional
Jenis output: number optional
Radius lingkaran dalam meter.
Atribut HTML: radius="number"
Diwarisi: addEventListener, removeEventListener

Antarmuka CirclePathElementOptions

antarmuka google.maps.maps3d.CirclePathElementOptions
diimplementasikan oleh CirclePathElement

Objek CirclePathElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada CirclePathElement.

center
opsional
radius
opsional
Jenis: number optional