3D Maps

Class Map3DElement

class google.maps.maps3d.Map3DElement extends HTMLElement implements Map3DElementOptions
library "maps3d"

Map3DElement adalah antarmuka HTML untuk tampilan Peta 3D. Perhatikan bahwa mode harus ditetapkan agar Peta 3D mulai dirender.

<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  color-scheme="value-name"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  heading="number"
  internal-usage-attribution-ids="id1 id2"
  map-id="string"
  max-altitude="number"
  max-heading="number"
  max-memory-megabytes="number"
  max-tilt="number"
  min-altitude="number"
  min-heading="number"
  min-tilt="number"
  mode="value-name"
  quality-mode="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>
const {Map3DElement} = await google.maps.importLibrary("maps3d");
Map3DElement
Map3DElement([options])
Parameter:
AlphaautofitsCameraAnimation
attr: autofits-camera-animation
Jenis input: AutofitsCameraAnimation optional
Jenis output: AutofitsCameraAnimation optional
Default: none
Animasi yang akan digunakan untuk penyesuaian kamera otomatis.
Atribut HTML: autofits-camera-animation="value-name"
bounds
Jenis input: LatLngBounds|LatLngBoundsLiteral optional
Jenis output: LatLngBounds optional
Jika ditetapkan, membatasi posisi kamera dalam batas lintang/bujur yang ditentukan. Perhatikan bahwa objek di luar batas masih dirender. Batas dapat membatasi bujur dan lintang, atau hanya dapat membatasi lintang atau bujur. Untuk batas khusus lintang, gunakan bujur barat dan timur masing-masing -180 dan 180. Untuk batas khusus bujur, gunakan lintang utara dan selatan masing-masing 90 dan -90.
cameraPosition
attr: camera-position
Jenis input: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Jenis output: LatLngAltitude optional
Posisi kamera yang diberikan sebagai LatLngAltitude. Akan diperoleh jika dihilangkan. Jika center dihilangkan, tetapi cameraPosition ditentukan, center akan berasal dari cameraPosition.. Jika keduanya diperbarui dalam loop operasi yang sama, cameraPosition akan lebih diutamakan. Kolom cameraPosition dan center dapat diturunkan satu per satu dari satu sama lain dalam konteks arah, rentang, rotasi, dan kemiringan bersama yang diberikan.
Atribut HTML: camera-position="lat,lng,altitude"
center
attr: center
Jenis input: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Jenis output: LatLngAltitude optional
Pusat peta yang diberikan sebagai LatLngAltitude, dengan ketinggian dalam meter di atas permukaan laut rata-rata. Perhatikan bahwa ini belum tentu lokasi kamera, karena kolom range memengaruhi jarak kamera dari pusat peta. Jika tidak ditetapkan, setelan defaultnya adalah {lat: 0, lng: 0, altitude: 63710000}. 63.710.000 meter adalah ketinggian maksimum yang diizinkan (jari-jari Bumi dikalikan 10).
Atribut HTML: center="lat,lng,altitude"
BetacolorScheme
attr: color-scheme
Jenis input: ColorScheme optional
Jenis output: ColorScheme optional
Menentukan skema warna untuk peta. Jika tidak ditetapkan, setelan defaultnya adalah ColorScheme.FOLLOW_SYSTEM.
Atribut HTML: color-scheme="value-name"
defaultUIHidden
attr: default-ui-hidden
Jenis input: boolean optional
Jenis output: boolean
Default: false
Jika true, semua tombol UI default akan disembunyikan.
Atribut HTML: default-ui-hidden
description
attr: description
Jenis input: string optional
Jenis output: string optional
Jika diberikan, deskripsi aksesibilitas (misalnya, untuk digunakan dengan pembaca layar) akan ditambahkan ke peta dengan nilai yang diberikan.
Atribut HTML: description="string"
fov
attr: fov
Jenis input: number optional
Jenis output: number optional
Menentukan ruang pandang vertikal dalam derajat. Nilai yang valid berkisar dari 5,0 hingga 80,0. Nilai yang lebih tinggi akan meningkatkan area yang terlihat, tetapi dapat menyebabkan distorsi perspektif. Default: 35.0.
Atribut HTML: fov="number"
gestureHandling
attr: gesture-handling
Jenis input: GestureHandling optional
Jenis output: GestureHandling
Mengontrol penanganan gestur kooperatif. Jika disetel ke COOPERATIVE, tombol pengubah atau gestur dua jari diperlukan untuk men-scroll peta. Jika disetel ke GREEDY, halaman host tidak dapat di-scroll dari peristiwa pengguna di elemen peta. Jika disetel ke AUTO, penanganan gestur ditentukan oleh kemampuan scroll halaman host.
Atribut HTML: gesture-handling="value-name"
heading
attr: heading
Jenis input: number optional
Jenis output: number optional
Arah kompas peta, dalam derajat, dengan utara sejati adalah nol. Jika tidak ada kemiringan, setiap rotasi akan ditafsirkan sebagai arah.
Atribut HTML: heading="number"
internalUsageAttributionIds
attr: internal-usage-attribution-ids
Jenis input: Iterable<string> optional
Jenis output: Array<string> optional
Menambahkan ID atribusi penggunaan ke penginisialisasi, yang membantu Google memahami library dan contoh mana yang berguna bagi developer, seperti penggunaan library pengelompokan penanda. Untuk memilih tidak mengirim ID atribusi penggunaan, Anda dapat menghapus properti ini dengan aman. Hanya nilai unik yang akan dikirim. Perubahan pada nilai ini setelah pembuatan instance dapat diabaikan.
Atribut HTML: internal-usage-attribution-ids="id1 id2"
language
Jenis input: string optional
Jenis output: string optional
Bahasa yang akan digunakan untuk merender bahasa peta dasar. Akan ditetapkan secara default ke bahasa yang diminta oleh developer saat memuat Maps JS API.
mapId
attr: map-id
Jenis input: string optional
Jenis output: string optional
Menentukan ID Peta yang akan digunakan untuk mengambil gaya visual peta berbasis cloud untuk peta.
Atribut HTML: map-id="string"
maxAltitude
attr: max-altitude
Jenis input: number optional
Jenis output: number optional
Ketinggian maksimum di atas permukaan tanah yang akan ditampilkan di peta. Nilai yang valid adalah antara 0 dan 63710000 meter (radius Bumi dikalikan 10).
Atribut HTML: max-altitude="number"
maxHeading
attr: max-heading
Jenis input: number optional
Jenis output: number optional
Sudut maksimum arah (rotasi) peta. Nilai yang valid adalah antara 0 dan 360 derajat. minHeading dan maxHeading mewakili interval <= 360 derajat yang memungkinkan gestur kepala. minHeading = 180 dan maxHeading = 90 akan memungkinkan heading di [0, 90] dan heading di [180, 360]. minHeading = 90 dan maxHeading = 180 akan memungkinkan heading di [90, 180].
Atribut HTML: max-heading="number"
BetamaxMemoryMegabytes
attr: max-memory-megabytes
Jenis input: number optional
Jenis output: number optional
Jumlah memori maksimum, dalam megabyte, yang dapat digunakan peta untuk rendering. Nilai yang lebih rendah mengurangi penggunaan memori dengan mengorbankan detail visual; nilai yang lebih tinggi memungkinkan lebih banyak detail disimpan dalam memori. Nilai yang valid berkisar dari 64 hingga 2048. Jika tidak ditetapkan, batas akan dipilih secara otomatis berdasarkan perangkat dan ukuran peta. Harus ditetapkan sebelum peta diinisialisasi; perubahan yang dilakukan setelahnya akan diabaikan.
Atribut HTML: max-memory-megabytes="number"
maxTilt
attr: max-tilt
Jenis input: number optional
Jenis output: number optional
Sudut datang maksimum peta. Nilai yang valid adalah antara 0 dan 90 derajat.
Atribut HTML: max-tilt="number"
minAltitude
attr: min-altitude
Jenis input: number optional
Jenis output: number optional
Ketinggian minimum di atas permukaan tanah yang akan ditampilkan di peta. Nilai yang valid adalah antara 0 dan 63710000 meter (radius Bumi dikalikan 10).
Atribut HTML: min-altitude="number"
minHeading
attr: min-heading
Jenis input: number optional
Jenis output: number optional
Sudut arah (rotasi) minimum peta. Nilai yang valid adalah antara 0 dan 360 derajat. minHeading dan maxHeading mewakili interval <= 360 derajat yang memungkinkan gestur kepala. minHeading = 180 dan maxHeading = 90 akan memungkinkan heading di [0, 90] dan heading di [180, 360]. minHeading = 90 dan maxHeading = 180 akan memungkinkan heading di [90, 180].
Atribut HTML: min-heading="number"
minTilt
attr: min-tilt
Jenis input: number optional
Jenis output: number optional
Sudut datang minimum peta. Nilai yang valid adalah antara 0 dan 90 derajat.
Atribut HTML: min-tilt="number"
mode
attr: mode
Jenis input: MapMode optional
Jenis output: MapMode optional
Menentukan mode yang harus digunakan untuk merender peta. Jika tidak ditetapkan, peta tidak akan dirender.
Atribut HTML: mode="value-name"
BetaqualityMode
attr: quality-mode
Jenis input: QualityMode optional
Jenis output: QualityMode optional
Menentukan kualitas rendering peta. Tetapkan ke QualityMode.PERFORMANCE untuk merender dengan detail visual yang dikurangi, sehingga menurunkan penggunaan memori.
Atribut HTML: quality-mode="value-name"
range
attr: range
Jenis input: number optional
Jenis output: number optional
Jarak dari kamera ke pusat peta, dalam meter.
Atribut HTML: range="number"
region
Jenis input: string optional
Jenis output: string optional
Wilayah yang akan digunakan untuk mencoba merender POI peta dasar. Akan ditetapkan secara default ke wilayah yang diminta oleh developer saat memuat Maps JS API.
roll
attr: roll
Jenis input: number optional
Jenis output: number optional
Rotasi kamera di sekitar vektor tampilan dalam derajat. Untuk mengatasi ambiguitas, jika tidak ada kemiringan, setiap rotasi akan ditafsirkan sebagai arah.
Atribut HTML: roll="number"
tilt
attr: tilt
Jenis input: number optional
Jenis output: number optional
Kemiringan vektor tampilan kamera dalam derajat. Vektor tampilan yang melihat langsung ke bumi akan memiliki kemiringan nol derajat. Vektor tampilan yang mengarah menjauh dari bumi akan memiliki kemiringan 180 derajat.
Atribut HTML: tilt="number"
defaultUIDisabled
attr: default-ui-disabled
Jenis: boolean optional
Default: false
Jika true, semua tombol UI default akan dinonaktifkan. Tidak menonaktifkan kontrol keyboard dan gestur.
Atribut HTML: default-ui-disabled
flyCameraAround
flyCameraAround(options)
Parameter:
Nilai Hasil: Tidak ada
Metode ini mengorbitkan kamera di sekitar lokasi tertentu selama durasi tertentu. Animasi dapat diulang sebanyak FlyAroundAnimationOptions.repeatCount kali.

Kamera akan bergerak searah jarum jam.

Lokasi yang diorbit ditentukan melalui CameraOptions.center. Ini adalah lokasi yang akan ditampilkan di tengah area pandang selama animasi orbit, sementara kamera bergerak di sekitarnya.

Metode ini bersifat asinkron karena animasi hanya dapat dimulai setelah peta dimuat dalam jumlah minimum. Metode ini akan ditampilkan setelah animasi dimulai.

Jika jumlah putaran FlyAroundAnimationOptions.repeatCount adalah nol, tidak akan ada putaran, dan animasi akan langsung selesai setelah dimulai.
flyCameraTo
flyCameraTo(options)
Parameter:
Nilai Hasil: Tidak ada
Metode ini menggerakkan kamera secara parabolik dari lokasi saat ini ke lokasi akhir yang ditentukan selama durasi yang ditentukan. Lokasi akhir dapat ditentukan melalui CameraOptions.cameraPosition, yang mengontrol posisi kamera yang tepat, atau melalui CameraOptions.center, yang mengontrol pusat area pandang peta yang terlihat.

Metode ini bersifat asinkron karena animasi hanya dapat dimulai setelah peta dimuat dalam jumlah minimum. Metode ini akan ditampilkan setelah animasi dimulai.
stopCameraAnimation
stopCameraAnimation()
Parameter: Tidak ada
Nilai Hasil: Tidak ada
Metode ini menghentikan animasi terbang yang mungkin sedang berjalan. Kamera tetap berada di tempatnya di tengah animasi; kamera tidak berteleportasi ke titik akhir.

Metode ini bersifat asinkron karena animasi hanya dapat dimulai atau dihentikan setelah peta dimuat dalam jumlah minimum. Metode ini akan ditampilkan setelah animasi berhenti.
Diwarisi: addEventListener, removeEventListener
gmp-animationend
function(animationEndEvent)
Argumen:
  • animationEndEvent: Event optional
Peristiwa ini diaktifkan saat animasi terbang berakhir. Peristiwa ini menggelembung melalui hierarki DOM.
gmp-camerapositionchange
function(cameraPositionChangeEvent)
Argumen:
  • cameraPositionChangeEvent: Event optional
Peristiwa ini dipicu saat properti cameraPosition Map3DElement berubah.
gmp-centerchange
function(centerChangeEvent)
Argumen:
  • centerChangeEvent: Event optional
Peristiwa ini dipicu saat properti pusat Map3DElement berubah.
gmp-click
function(clickEvent)
Argumen:
Peristiwa ini diaktifkan saat elemen Map3DElement diklik.
gmp-error
function(mapInitializationErrorEvent)
Argumen:
  • mapInitializationErrorEvent: Event optional
Peristiwa ini diaktifkan saat peta gagal diinisialisasi.
gmp-fovchange
function(fovChangeEvent)
Argumen:
  • fovChangeEvent: Event optional
Peristiwa ini dipicu saat properti fov Map3DElement berubah.
gmp-headingchange
function(headingChangeEvent)
Argumen:
  • headingChangeEvent: Event optional
Peristiwa ini dipicu saat properti heading Map3DElement berubah.
gmp-map-id-error
function(mapIdErrorEvent)
Argumen:
  • mapIdErrorEvent: Event optional
Peristiwa ini diaktifkan jika properti mapId Map3DElement tidak valid.
gmp-rangechange
function(rangeChangeEvent)
Argumen:
  • rangeChangeEvent: Event optional
Peristiwa ini dipicu saat properti rentang Map3DElement berubah.
gmp-rollchange
function(rollChangeEvent)
Argumen:
  • rollChangeEvent: Event optional
Peristiwa ini dipicu saat properti roll Map3DElement berubah.
gmp-steadychange
function(steadyChangeEvent)
Argumen:
Peristiwa ini diaktifkan saat status stabil Map3DElement berubah.
gmp-tiltchange
function(tiltChangeEvent)
Argumen:
  • tiltChangeEvent: Event optional
Peristiwa ini dipicu saat properti kemiringan Map3DElement berubah.

Antarmuka Map3DElementOptions

antarmuka google.maps.maps3d.Map3DElementOptions
diimplementasikan oleh Map3DElement

Objek Map3DElementOptions yang digunakan untuk menentukan properti yang dapat ditetapkan di Map3DElement.

AlphaautofitsCameraAnimation
opsional
Jenis: AutofitsCameraAnimation optional
bounds
opsional
cameraPosition
opsional
center
opsional
BetacolorScheme
opsional
Jenis: ColorScheme optional
defaultUIDisabled
opsional
Jenis: boolean optional
defaultUIHidden
opsional
Jenis: boolean optional
description
opsional
Jenis: string optional
fov
opsional
Jenis: number optional
gestureHandling
opsional
Jenis: GestureHandling optional
heading
opsional
Jenis: number optional
internalUsageAttributionIds
opsional
Jenis: Iterable<string> optional
language
opsional
Jenis: string optional
mapId
opsional
Jenis: string optional
maxAltitude
opsional
Jenis: number optional
maxHeading
opsional
Jenis: number optional
BetamaxMemoryMegabytes
opsional
Jenis: number optional
maxTilt
opsional
Jenis: number optional
minAltitude
opsional
Jenis: number optional
minHeading
opsional
Jenis: number optional
minTilt
opsional
Jenis: number optional
mode
opsional
Jenis: MapMode optional
BetaqualityMode
opsional
Jenis: QualityMode optional
range
opsional
Jenis: number optional
region
opsional
Jenis: string optional
roll
opsional
Jenis: number optional
tilt
opsional
Jenis: number optional

Konstanta MapMode

google.maps.maps3d.MapMode
library "maps3d"

Menentukan mode yang harus digunakan untuk merender peta.

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

const {MapMode} = await google.maps.importLibrary("maps3d");
HYBRID Mode peta ini menampilkan lapisan transparan jalan utama pada citra satelit atau fotorealistik.
BetaROADMAP Mode peta ini menampilkan peta jalan normal.
SATELLITE Mode peta ini menampilkan citra satelit atau fotorealistik jika tersedia.

Konstanta QualityMode

google.maps.maps3d.QualityMode
library "maps3d"

Menentukan kualitas rendering peta 3D.

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

const {QualityMode} = await google.maps.importLibrary("maps3d");
FIDELITY Merender peta dengan detail visual standar.
PERFORMANCE Merender peta dengan detail visual yang dikurangi untuk menurunkan penggunaan memori. Berguna pada perangkat dengan memori terbatas atau saat peta berbagi halaman dengan konten lain yang menggunakan banyak memori.

Konstanta GestureHandling

google.maps.maps3d.GestureHandling
library "maps3d"

Menentukan cara peristiwa gestur harus ditangani pada elemen peta.

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

const {GestureHandling} = await google.maps.importLibrary("maps3d");
AUTO Hal ini memungkinkan peta memilih apakah akan menggunakan penanganan gestur kooperatif atau greedy. Ini adalah perilaku default jika tidak ditentukan.

Hal ini akan menyebabkan peta memasuki mode kooperatif jika peta mendominasi induk scroll-nya (biasanya halaman host) sehingga pengguna tidak dapat men-scroll dari peta ke konten lain.
COOPERATIVE Tindakan ini akan memaksa mode kooperatif, yang memerlukan tombol pengubah atau gestur dua jari untuk men-scroll peta.
GREEDY Tindakan ini akan memaksa mode greedy, sehingga halaman host tidak dapat di-scroll dari peristiwa pengguna di elemen peta.

Konstanta AutofitsCameraAnimation

google.maps.maps3d.AutofitsCameraAnimation
library "maps3d"

Menentukan perilaku kamera saat berpindah ke posisi baru untuk memusatkan dirinya sesuai dengan elemen turunan yang diikutsertakan.

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

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");
FLY_TO Terbang ke posisi baru.
NONE Menyesuaikan ke posisi baru tanpa animasi.

Antarmuka FlyAroundAnimationOptions

antarmuka google.maps.maps3d.FlyAroundAnimationOptions

Opsi penyesuaian untuk Animasi FlyCameraAround.

camera
Titik pusat yang harus dilihat kamera selama animasi orbit. Perhatikan bahwa arah peta akan berubah saat kamera mengorbit di sekitar titik tengah ini.
durationMillis
opsional
Jenis: number optional
Durasi satu siklus animasi dalam milidetik.
repeatCount
opsional
Jenis: number optional
Menentukan frekuensi animasi harus diulang. Jika angkanya nol, animasi akan langsung selesai setelah dimulai. Jika Number.Infinity diteruskan, animasi akan diulang terus-menerus.
rounds
opsional
Jenis: number optional
Jumlah putaran untuk berputar di sekitar pusat dalam durasi yang ditentukan. Setelan ini mengontrol kecepatan rotasi secara keseluruhan. Meneruskan angka negatif ke putaran akan menyebabkan kamera berputar berlawanan arah jarum jam, bukan searah jarum jam default.

Antarmuka FlyToAnimationOptions

antarmuka google.maps.maps3d.FlyToAnimationOptions

Opsi penyesuaian untuk Animasi FlyCameraTo.

endCamera
Lokasi yang harus ditunjuk kamera di akhir animasi.
durationMillis
opsional
Jenis: number optional
Durasi animasi dalam milidetik. Durasi 0 akan memindahkan kamera langsung ke posisi akhir.

Antarmuka CameraOptions

antarmuka google.maps.maps3d.CameraOptions

Objek CameraOptions yang digunakan untuk menentukan properti yang dapat ditetapkan pada objek kamera. Objek kamera dapat berupa apa pun yang memiliki posisi kamera, misalnya, status peta saat ini, atau status animasi yang diminta di masa mendatang.

altitudeMode
opsional
Jenis: AltitudeMode optional
Enum yang menentukan cara menafsirkan nilai ketinggian objek CameraOptions yang diberikan. Tindakan ini menggunakan kembali enum AltitudeMode yang ada.
cameraPosition
opsional
center
opsional
fov
opsional
Jenis: number optional
heading
opsional
Jenis: number optional
range
opsional
Jenis: number optional
roll
opsional
Jenis: number optional
tilt
opsional
Jenis: number optional

Class SteadyChangeEvent

class google.maps.maps3d.SteadyChangeEvent extends Event
library "maps3d"

Peristiwa ini dibuat dari pemantauan status stabil Map3DElement. Peristiwa ini menggelembung melalui hierarki DOM.

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");
isSteady
Jenis: boolean
Menunjukkan apakah Map3DElement stabil (yaitu, semua rendering untuk tampilan saat ini telah selesai) atau tidak.

Class LocationClickEvent

class google.maps.maps3d.LocationClickEvent extends Event
extended by PlaceClickEvent
library "maps3d"

Peristiwa ini dibuat dengan mengklik Map3DElement.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");
position
Jenis: LatLngAltitude optional
Lintang/bujur/ketinggian yang berada di bawah kursor saat peristiwa terjadi. Perhatikan bahwa pada tingkat yang lebih kasar, data yang ditampilkan akan kurang akurat. Selain itu, elevasi dasar laut dapat ditampilkan untuk nilai ketinggian saat mengklik permukaan air dari posisi kamera yang lebih tinggi. Peristiwa ini menggelembung melalui hierarki DOM.

Class LocationPointerEvent

class google.maps.maps3d.LocationPointerEvent extends Event
library "maps3d"

Peristiwa ini dibuat saat interaksi pointer terjadi pada Map3DElement interaktif.

const {LocationPointerEvent} = await google.maps.importLibrary("maps3d");
position
Jenis: LatLngAltitude optional
Lintang/bujur/ketinggian yang berada di bawah kursor saat peristiwa terjadi. Perhatikan bahwa pada tingkat yang lebih kasar, data yang ditampilkan akan kurang akurat. Selain itu, elevasi dasar laut dapat ditampilkan untuk nilai ketinggian saat mengklik permukaan air dari posisi kamera yang lebih tinggi. Peristiwa ini menggelembung melalui hierarki DOM.

Class PlaceClickEvent

class google.maps.maps3d.PlaceClickEvent extends LocationClickEvent, Event
library "maps3d"

Peristiwa ini dibuat dengan mengklik ikon tempat di Map3DElement. Untuk mencegah popover default muncul, panggil metode preventDefault() pada peristiwa ini agar tidak ditangani oleh Map3DElement.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");
placeId
Jenis: string
ID tempat fitur peta.
Diwarisi: position
fetchPlace
fetchPlace()
Parameter: Tidak ada
Nilai Hasil: Promise<Place>
Mengambil Place untuk ID tempat ini. Dalam objek Place yang dihasilkan, properti id akan diisi. Kolom tambahan selanjutnya dapat diminta melalui Place.fetchFields(), yang tunduk pada pengaktifan dan penagihan Places API normal. Promise akan ditolak jika terjadi error saat mengambil Place.