3D Maps

Lớp Map3DElement

Lớp google.maps.maps3d.Map3DElement

Map3DElement là một giao diện HTML cho chế độ xem Bản đồ 3D. Xin lưu ý rằng bạn phải đặt mode để Bản đồ 3D bắt đầu hiển thị.

Phần tử tuỳ chỉnh:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number" default-ui-disabled></gmp-map-3d>

Lớp này mở rộng HTMLElement.

Lớp này triển khai Map3DElementOptions.

Truy cập bằng cách gọi const {Map3DElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Map3DElement
Map3DElement([options])
Tham số: 
bounds
Khi được đặt, thuộc tính này sẽ giới hạn vị trí của camera trong ranh giới vĩ độ/kinh độ đã chỉ định. Xin lưu ý rằng các đối tượng nằm ngoài ranh giới vẫn được kết xuất. Ranh giới có thể hạn chế cả kinh độ và vĩ độ, hoặc chỉ hạn chế vĩ độ hoặc kinh độ. Đối với các ranh giới chỉ có vĩ độ, hãy sử dụng kinh độ tây và kinh độ đông lần lượt là -180 và 180. Đối với các ranh giới chỉ có kinh độ, hãy sử dụng vĩ độ bắc và vĩ độ nam tương ứng là 90 và -90.
center
Tâm của bản đồ được cung cấp dưới dạng LatLngAltitude, trong đó độ cao tính bằng mét so với mặt đất. Xin lưu ý rằng đây không nhất thiết là vị trí của camera, vì trường range ảnh hưởng đến khoảng cách của camera từ tâm bản đồ. Nếu không được đặt, giá trị mặc định sẽ là {lat: 0, lng: 0, altitude: 63170000}. 63.170.000 mét là độ cao tối đa được phép (bán kính Trái Đất nhân với 10).
Thuộc tính HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden
Loại:  boolean optional
Mặc định: false
Khi true, tất cả các nút giao diện người dùng mặc định đều bị ẩn.
Thuộc tính HTML:
  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description
Loại:  string optional
Nếu được cung cấp, nội dung mô tả về khả năng hỗ trợ tiếp cận (ví dụ: để sử dụng với trình đọc màn hình) sẽ được thêm vào bản đồ cùng với giá trị được cung cấp.
Thuộc tính HTML:
  • <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling
Loại:  GestureHandling optional
Mặc định: GestureHandling.GREEDY
Kiểm soát việc xử lý cử chỉ hợp tác. Khi bạn đặt thành COOPERATIVE, người dùng phải sử dụng phím bổ trợ hoặc cử chỉ bằng hai ngón tay để di chuyển bản đồ. Khi bạn đặt thành GREEDY, trang lưu trữ không thể cuộn từ các sự kiện của người dùng trên phần tử bản đồ. Khi được đặt thành AUTO, việc xử lý cử chỉ sẽ được xác định bằng khả năng cuộn của trang lưu trữ.
Thuộc tính HTML:
  • <gmp-map-3d gesture-handling="auto"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading
Loại:  number optional
Hướng la bàn của bản đồ, tính bằng độ, trong đó hướng chính bắc là 0. Khi không có độ nghiêng, mọi độ lăn sẽ được hiểu là hướng.
Thuộc tính HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds
Loại:  Iterable<string> optional
Thêm mã phân bổ mức sử dụng vào trình khởi tạo, giúp Google hiểu được thư viện và mẫu nào hữu ích cho nhà phát triển, chẳng hạn như mức sử dụng thư viện phân cụm điểm đánh dấu. Để chọn không gửi mã nhận dạng nguồn gốc sử dụng, bạn có thể xoá thuộc tính này. Chỉ gửi các giá trị riêng biệt. Các thay đổi đối với giá trị này sau khi tạo thực thể có thể bị bỏ qua.
Thuộc tính HTML:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language
Loại:  string optional
Ngôn ngữ mà bạn muốn hiển thị trên bản đồ cơ sở. Sẽ mặc định là ngôn ngữ mà nhà phát triển yêu cầu khi tải Maps JS API.
mapId
Loại:  string optional
Chỉ định mã bản đồ sẽ được dùng để tìm nạp kiểu bản đồ dựa trên đám mây cho bản đồ. Bạn không nên đặt giá trị này sau khi bản đồ đã được khởi chạy. Do đó, chúng tôi đảm bảo mapId chỉ được đặt trong quá trình khởi chạy và không xuất bản thuộc tính này lên các kênh công khai.
Thuộc tính HTML:
  • <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude
Loại:  number optional
Độ cao tối đa so với mặt đất sẽ hiển thị trên bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 63170000 mét (bán kính Trái Đất nhân với 10).
Thuộc tính HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Loại:  number optional
Góc hướng (xoay) tối đa của bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 360 độ. minHeading và maxHeading biểu thị một khoảng <= 360 độ mà trong đó cử chỉ đầu sẽ được cho phép. minHeading = 180 và maxHeading = 90 sẽ cho phép tiêu đề trong [0, 90] và tiêu đề trong [180, 360]. minHeading = 90 và maxHeading = 180 sẽ cho phép hướng đi trong [90, 180].
Thuộc tính HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Loại:  number optional
Góc tới tối đa của bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 90 độ.
Thuộc tính HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Loại:  number optional
Độ cao tối thiểu so với mặt đất sẽ được hiển thị trên bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 63170000 mét (bán kính Trái Đất nhân với 10).
Thuộc tính HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Loại:  number optional
Góc tối thiểu của hướng (xoay) của bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 360 độ. minHeading và maxHeading biểu thị một khoảng <= 360 độ mà trong đó cử chỉ đầu sẽ được cho phép. minHeading = 180 và maxHeading = 90 sẽ cho phép tiêu đề trong [0, 90] và tiêu đề trong [180, 360]. minHeading = 90 và maxHeading = 180 sẽ cho phép hướng đi trong [90, 180].
Thuộc tính HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Loại:  number optional
Góc tới tối thiểu của bản đồ. Giá trị hợp lệ nằm trong khoảng từ 0 đến 90 độ.
Thuộc tính HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
Loại:  MapMode optional
Chỉ định chế độ hiển thị bản đồ. Nếu bạn không đặt, bản đồ sẽ không được kết xuất.
Thuộc tính HTML:
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></gmp-map-3d>
range
Loại:  number optional
Khoảng cách từ camera đến tâm bản đồ, tính bằng mét.
Thuộc tính HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
region
Loại:  string optional
Khu vực để thử kết xuất các địa điểm yêu thích của bản đồ cơ sở. Theo mặc định, hệ thống sẽ sử dụng vùng mà nhà phát triển yêu cầu khi tải Maps JS API.
roll
Loại:  number optional
Góc xoay của camera xung quanh vectơ xem, tính bằng độ. Để giải quyết các trường hợp không rõ ràng, khi không có độ nghiêng, mọi độ lăn sẽ được hiểu là hướng.
Thuộc tính HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Loại:  number optional
Độ nghiêng của vectơ chế độ xem camera, tính bằng độ. Vectơ chế độ xem nhìn thẳng xuống trái đất sẽ có độ nghiêng bằng 0 độ. Vectơ chế độ xem hướng ra xa trái đất sẽ có độ nghiêng là 180 độ.
Thuộc tính HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled
Loại:  boolean optional
Mặc định: false
Khi true, tất cả các nút giao diện người dùng mặc định đều bị tắt. Không tắt các chế độ điều khiển bằng bàn phím và cử chỉ.
Thuộc tính HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
addEventListener
addEventListener(type, listener[, options])
Tham số: 
  • type:  string Chuỗi phân biệt chữ hoa chữ thường đại diện cho loại sự kiện cần theo dõi.
  • listener:  EventListener|EventListenerObject Đối tượng nhận thông báo. Đây phải là một hàm hoặc một đối tượng có phương thức handleEvent
  • options:  boolean|AddEventListenerOptions optional Xem các lựa chọn. Sự kiện tuỳ chỉnh chỉ hỗ trợ capture và passive.
Giá trị trả về:  void
Thiết lập một hàm sẽ được gọi bất cứ khi nào sự kiện được chỉ định được phân phối đến mục tiêu. Xem addEventListener.
flyCameraAround
flyCameraAround(options)
Tham số: 
Giá trị trả về:  Không có
Phương thức này xoay camera quanh một vị trí nhất định trong một khoảng thời gian nhất định. Ảnh động có thể lặp lại theo số lần FlyAroundAnimationOptions.repeatCount đã cho.

Camera sẽ di chuyển theo chiều kim đồng hồ.

Phương thức này không đồng bộ vì ảnh động chỉ có thể bắt đầu sau khi bản đồ đã tải một lượng tối thiểu. Phương thức này sẽ trả về sau khi ảnh động bắt đầu.

Nếu số lần FlyAroundAnimationOptions.repeatCount là 0, thì sẽ không có vòng quay nào xảy ra và ảnh động sẽ hoàn tất ngay sau khi bắt đầu.
flyCameraTo
flyCameraTo(options)
Tham số: 
Giá trị trả về:  Không có
Phương thức này di chuyển camera theo hình parabol từ vị trí hiện tại đến một vị trí kết thúc nhất định trong một khoảng thời gian nhất định.

Phương thức này không đồng bộ vì ảnh động chỉ có thể bắt đầu sau khi bản đồ đã tải một lượng tối thiểu. Phương thức này sẽ trả về sau khi ảnh động bắt đầu.
removeEventListener
removeEventListener(type, listener[, options])
Tham số: 
Giá trị trả về:  void
Xoá trình nghe sự kiện đã đăng ký trước đó bằng addEventListener khỏi mục tiêu. Xem removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Tham số:  Không có
Giá trị trả về:  Không có
Phương thức này sẽ dừng mọi ảnh động bay có thể đang chạy. Máy ảnh sẽ giữ nguyên vị trí ở giữa ảnh động; máy ảnh không dịch chuyển đến điểm cuối.

Phương thức này không đồng bộ vì ảnh động chỉ có thể bắt đầu hoặc dừng sau khi bản đồ đã tải một lượng tối thiểu. Phương thức này sẽ trả về sau khi ảnh động dừng.
gmp-animationend
function(animationEndEvent)
Đối số: 
  • animationEndEvent:  Event
Sự kiện này được kích hoạt khi ảnh động bay kết thúc. Sự kiện này nổi lên thông qua cây DOM.
gmp-centerchange
function(centerChangeEvent)
Đối số: 
  • centerChangeEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính trung tâm của Map3DElement thay đổi.
gmp-click
function(clickEvent)
Đối số: 
Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử Map3DElement.
gmp-error
function(mapInitializationErrorEvent)
Đối số: 
  • mapInitializationErrorEvent:  Event
Sự kiện này được kích hoạt khi không thể khởi chạy bản đồ.
gmp-headingchange
function(headingChangeEvent)
Đối số: 
  • headingChangeEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính hướng của Map3DElement thay đổi.
gmp-map-id-error
function(mapIdErrorEvent)
Đối số: 
  • mapIdErrorEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính mapId của Map3DElement không hợp lệ.
gmp-rangechange
function(rangeChangeEvent)
Đối số: 
  • rangeChangeEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính phạm vi của Map3DElement thay đổi.
gmp-rollchange
function(rollChangeEvent)
Đối số: 
  • rollChangeEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính roll của Map3DElement thay đổi.
gmp-steadychange
function(steadyChangeEvent)
Đối số: 
Sự kiện này được kích hoạt khi trạng thái ổn định của Map3DElement thay đổi.
gmp-tiltchange
function(tiltChangeEvent)
Đối số: 
  • tiltChangeEvent:  Event
Sự kiện này được kích hoạt khi thuộc tính độ nghiêng của Map3DElement thay đổi.

Giao diện Map3DElementOptions

google.maps.maps3d.Map3DElementOptions giao diện

Đối tượng Map3DElementOptions dùng để xác định các thuộc tính có thể đặt trên Map3DElement.
bounds optional
Vui lòng xem Map3DElement.bounds.
center optional
Vui lòng xem Map3DElement.center.
defaultUIDisabled optional
Loại:  boolean optional
Vui lòng xem Map3DElement.defaultUIDisabled.
defaultUIHidden optional
Loại:  boolean optional
Vui lòng xem Map3DElement.defaultUIHidden.
description optional
Loại:  string optional
Vui lòng xem Map3DElement.description.
gestureHandling optional
Loại:  GestureHandling optional
Vui lòng xem Map3DElement.gestureHandling.
heading optional
Loại:  number optional
Vui lòng xem Map3DElement.heading.
internalUsageAttributionIds optional
Loại:  Iterable<string> optional
Vui lòng xem Map3DElement.internalUsageAttributionIds.
language optional
Loại:  string optional
Vui lòng xem Map3DElement.language.
mapId optional
Loại:  string optional
Vui lòng xem Map3DElement.mapId.
maxAltitude optional
Loại:  number optional
Vui lòng xem Map3DElement.maxAltitude.
maxHeading optional
Loại:  number optional
Vui lòng xem Map3DElement.maxHeading.
maxTilt optional
Loại:  number optional
Vui lòng xem Map3DElement.maxTilt.
minAltitude optional
Loại:  number optional
Vui lòng xem Map3DElement.minAltitude.
minHeading optional
Loại:  number optional
Vui lòng xem Map3DElement.minHeading.
minTilt optional
Loại:  number optional
Vui lòng xem Map3DElement.minTilt.
mode optional
Loại:  MapMode optional
Vui lòng xem Map3DElement.mode.
range optional
Loại:  number optional
Vui lòng xem Map3DElement.range.
region optional
Loại:  string optional
Vui lòng xem Map3DElement.region.
roll optional
Loại:  number optional
Vui lòng xem Map3DElement.roll.
tilt optional
Loại:  number optional
Vui lòng xem Map3DElement.tilt.

Hằng số MapMode

hằng số google.maps.maps3d.MapMode

Chỉ định chế độ hiển thị bản đồ.

Truy cập bằng cách gọi const {MapMode} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
HYBRID Chế độ bản đồ này hiển thị một lớp trong suốt gồm các đường phố chính trên hình ảnh vệ tinh hoặc hình ảnh chân thực.
SATELLITE Chế độ bản đồ này hiển thị hình ảnh vệ tinh hoặc hình ảnh chân thực (nếu có).

Hằng số GestureHandling

hằng số google.maps.maps3d.GestureHandling

Chỉ định cách xử lý các sự kiện cử chỉ trên phần tử bản đồ.

Truy cập bằng cách gọi const {GestureHandling} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
AUTO Điều này cho phép bản đồ chọn sử dụng tính năng xử lý cử chỉ hợp tác hay tham lam. Đây là hành vi mặc định nếu không được chỉ định.

Thao tác này sẽ khiến bản đồ chuyển sang chế độ hợp tác nếu bản đồ chiếm ưu thế so với thành phần mẹ cuộn (thường là trang lưu trữ) đến mức người dùng không thể cuộn ra khỏi bản đồ để xem nội dung khác.
COOPERATIVE Thao tác này sẽ buộc sử dụng chế độ hợp tác, trong đó cần có các phím bổ trợ hoặc cử chỉ bằng hai ngón tay để cuộn bản đồ.
GREEDY Thao tác này sẽ buộc bật chế độ tham lam, trong đó trang lưu trữ không thể cuộn từ các sự kiện của người dùng trên phần tử bản đồ.

Giao diện FlyAroundAnimationOptions

google.maps.maps3d.FlyAroundAnimationOptions giao diện

Các tuỳ chọn tuỳ chỉnh cho Hoạt ảnh FlyCameraAround.
camera
Loại:  CameraOptions
Điểm trung tâm mà camera sẽ nhìn vào trong ảnh động quỹ đạo. Lưu ý rằng hướng bản đồ sẽ thay đổi khi camera quay quanh điểm trung tâm này.
durationMillis optional
Loại:  number optional
Thời lượng của một chu kỳ ảnh động tính bằng mili giây.
repeatCount optional
Loại:  number optional
Chỉ định số lần ảnh động sẽ lặp lại. Nếu số này bằng 0, ảnh động sẽ hoàn tất ngay sau khi bắt đầu.
rounds optional
Loại:  number optional
Số vòng xoay quanh tâm trong khoảng thời gian nhất định. Chế độ này kiểm soát tốc độ xoay tổng thể. Nếu bạn truyền một số âm vào tham số rounds, camera sẽ xoay theo hướng ngược chiều kim đồng hồ thay vì hướng mặc định là theo chiều kim đồng hồ.

Giao diện FlyToAnimationOptions

google.maps.maps3d.FlyToAnimationOptions giao diện

Các lựa chọn tuỳ chỉnh cho Ảnh động FlyCameraTo.
endCamera
Loại:  CameraOptions
Vị trí mà camera sẽ hướng đến khi kết thúc ảnh động.
durationMillis optional
Loại:  number optional
Thời lượng của ảnh động tính bằng mili giây. Thời lượng bằng 0 sẽ dịch chuyển camera thẳng đến vị trí kết thúc.

Giao diện CameraOptions

google.maps.maps3d.CameraOptions giao diện

Đối tượng CameraOptions dùng để xác định các thuộc tính có thể đặt trên đối tượng camera. Đối tượng camera có thể là bất kỳ đối tượng nào có vị trí camera, ví dụ: trạng thái bản đồ hiện tại hoặc trạng thái ảnh động được yêu cầu trong tương lai.
center optional
Vui lòng xem Map3DElement.center.
heading optional
Loại:  number optional
Vui lòng xem Map3DElement.heading.
range optional
Loại:  number optional
Vui lòng xem Map3DElement.range.
roll optional
Loại:  number optional
Vui lòng xem Map3DElement.roll.
tilt optional
Loại:  number optional
Vui lòng xem Map3DElement.tilt.

Lớp SteadyChangeEvent

Lớp google.maps.maps3d.SteadyChangeEvent

Sự kiện này được tạo từ việc theo dõi trạng thái ổn định của Map3DElement. Sự kiện này nổi lên thông qua cây DOM.

Lớp này mở rộng Event.

Truy cập bằng cách gọi const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
isSteady
Loại:  boolean
Cho biết Map3DElement có ổn định (tức là tất cả hoạt động kết xuất cho cảnh hiện tại đã hoàn tất) hay không.

Lớp LocationClickEvent

Lớp google.maps.maps3d.LocationClickEvent

Sự kiện này được tạo bằng cách nhấp vào Map3DElement.

Lớp này mở rộng Event.

Truy cập bằng cách gọi const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
position
Loại:  LatLngAltitude optional
Vĩ độ/kinh độ/cao độ nằm dưới con trỏ khi sự kiện xảy ra. Xin lưu ý rằng ở các cấp độ khái quát hơn, dữ liệu được trả về sẽ kém chính xác hơn. Ngoài ra, độ cao của đáy biển có thể được trả về cho giá trị độ cao khi nhấp vào mặt nước từ các vị trí camera cao hơn. Sự kiện này nổi lên thông qua cây DOM.

Lớp PlaceClickEvent

Lớp google.maps.maps3d.PlaceClickEvent

Sự kiện này được tạo bằng cách nhấp vào biểu tượng địa điểm trên Map3DElement. Để ngăn cửa sổ bật lên mặc định xuất hiện, hãy gọi phương thức preventDefault() cho sự kiện này để ngăn Map3DElement xử lý sự kiện đó.

Lớp này mở rộng LocationClickEvent.

Truy cập bằng cách gọi const {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
placeId
Loại:  string
Mã địa điểm của đối tượng trên bản đồ.
Được kế thừa: position
fetchPlace
fetchPlace()
Tham số:  Không có
Giá trị trả về:  Promise<Place>
Tìm nạp Place cho mã địa điểm này. Trong đối tượng Place thu được, thuộc tính id sẽ được điền sẵn. Sau đó, bạn có thể yêu cầu các trường bổ sung thông qua Place.fetchFields(), tuân theo quy trình kích hoạt và thanh toán thông thường của Places API. Lời hứa sẽ bị từ chối nếu có lỗi khi tìm nạp Place.