Draw on the map

Lớp Marker3DElement

Lớp google.maps.maps3d.Marker3DElement

Cho thấy một vị trí trên bản đồ 3D. Xin lưu ý rằng bạn phải đặt position để Marker3DElement xuất hiện.

Phần tử tuỳ chỉnh:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

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

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

Truy cập bằng cách gọi const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Marker3DElement
Marker3DElement([options])
Tham số: 
Tạo Marker3DElement với các tuỳ chọn được chỉ định.
altitudeMode
Loại:  AltitudeMode optional
Mặc định: AltitudeMode.CLAMP_TO_GROUND
Chỉ định cách diễn giải thành phần độ cao của vị trí.
Thuộc tính HTML:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Loại:  CollisionBehavior optional
Mặc định: CollisionBehavior.REQUIRED
Một kiểu liệt kê chỉ định cách Marker3DElement sẽ hoạt động khi va chạm với một Marker3DElement khác hoặc với nhãn bản đồ cơ sở.
Thuộc tính HTML:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Loại:  boolean optional
Mặc định: false
Chỉ định xem có nên vẽ điểm đánh dấu này hay không khi điểm đánh dấu bị che khuất. Điểm đánh dấu có thể bị che khuất bởi hình học bản đồ (ví dụ: toà nhà).
Thuộc tính HTML:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Loại:  boolean optional
Mặc định: false
Chỉ định xem có kết nối điểm đánh dấu với mặt đất hay không. Để kéo dài điểm đánh dấu, altitudeMode phải là RELATIVE_TO_GROUND hoặc ABSOLUTE.
Thuộc tính HTML:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Loại:  string optional
Văn bản sẽ được hiển thị bằng điểm đánh dấu này.
Thuộc tính HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Vị trí của đầu điểm đánh dấu. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
Thuộc tính HTML:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Loại:  boolean optional
Mặc định: false
Chỉ định xem điểm đánh dấu này có nên giữ nguyên kích thước hay không, bất kể khoảng cách từ camera. Theo mặc định, điểm đánh dấu được điều chỉnh theo tỷ lệ dựa trên khoảng cách từ camera/độ nghiêng.
Thuộc tính HTML:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Loại:  number optional
zIndex so với các điểm đánh dấu khác.
Thuộc tính HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Mọi phần tử tuỳ chỉnh được thêm trực tiếp vào Marker3DElement sẽ được đưa vào vùng chứa, tuy nhiên chỉ các phần tử thuộc loại HTMLImageElement, SVGElement và PinElement mới được dùng để vẽ điểm đánh dấu, các phần tử khác sẽ bị bỏ qua.
HTMLImageElement và SVGElement phải được gói trong phần tử <template> trước khi gán cho vùng mặc định của Marker3DElement.

Hình ảnh và SVG hiện được tạo điểm ảnh trước khi hiển thị trong cảnh 3D, vì vậy, HTML tuỳ chỉnh được nhúng vào SVG hoặc các lớp CSS được thêm vào hình ảnh sẽ không được áp dụng và có thể không được phản ánh khi điểm đánh dấu xuất hiện trên màn hình.
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.
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.

Giao diện Marker3DElementOptions

google.maps.maps3d.Marker3DElementOptions giao diện

Đối tượng Marker3DElementOptions dùng để xác định các thuộc tính có thể đặt trên Marker3DElement.
altitudeMode optional
Loại:  AltitudeMode optional
Vui lòng xem Marker3DElement.altitudeMode.
collisionBehavior optional
Loại:  CollisionBehavior optional
Vui lòng xem Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Loại:  boolean optional
Vui lòng xem Marker3DElement.drawsWhenOccluded.
extruded optional
Loại:  boolean optional
Vui lòng xem Marker3DElement.extruded.
label optional
Loại:  string optional
Vui lòng xem Marker3DElement.label.
position optional
Vui lòng xem Marker3DElement.position.
sizePreserved optional
Loại:  boolean optional
Vui lòng xem Marker3DElement.sizePreserved.
zIndex optional
Loại:  number optional
Vui lòng xem Marker3DElement.zIndex.

Lớp Marker3DInteractiveElement

Lớp google.maps.maps3d.Marker3DInteractiveElement

Cho thấy một vị trí trên bản đồ 3D. Xin lưu ý rằng bạn phải đặt position để Marker3DInteractiveElement xuất hiện. Không giống như Marker3DElement, Marker3DInteractiveElement nhận được một sự kiện gmp-click.

Phần tử tuỳ chỉnh:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

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

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

Truy cập bằng cách gọi const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Tham số: 
Tạo Marker3DInteractiveElement với các tuỳ chọn được chỉ định.
gmpPopoverTargetElement
Loại:  PopoverElement optional
Khi được đặt, phần tử cửa sổ bật lên sẽ mở khi người dùng nhấp vào điểm đánh dấu này.
Thuộc tính HTML:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Loại:  string
Văn bản di chuột qua. Nếu được cung cấp, văn bản 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 Marker3DInteractiveElement cùng với giá trị được cung cấp.
Thuộc tính HTML:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Được kế thừa: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Mọi phần tử tuỳ chỉnh được thêm trực tiếp vào Marker3DInteractiveElement sẽ được đưa vào vùng chứa, tuy nhiên, chỉ các phần tử thuộc loại PinElement mới được dùng để vẽ điểm đánh dấu, các phần tử khác sẽ bị bỏ qua.
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.
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.
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ử Marker3DInteractiveElement.

Marker3DInteractiveElementOptions interface

google.maps.maps3d.Marker3DInteractiveElementOptions giao diện

Đối tượng Marker3DInteractiveElementOptions dùng để xác định các thuộc tính có thể đặt trên Marker3DInteractiveElement.

Giao diện này mở rộng Marker3DElementOptions.

gmpPopoverTargetElement optional
Loại:  PopoverElement optional
Vui lòng xem Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Loại:  string optional
Vui lòng xem Marker3DInteractiveElement.title.
Được kế thừa: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Lớp Model3DElement

Lớp google.maps.maps3d.Model3DElement

Mô hình 3D cho phép kết xuất mô hình gLTF. Xin lưu ý rằng bạn phải đặt position và src để Model3DElement hiển thị.

Các thuộc tính cốt lõi của gLTF PBR phải được hỗ trợ. Hiện không có tiện ích hoặc thuộc tính tiện ích nào được hỗ trợ.

Phần tử tuỳ chỉnh:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

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

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

Truy cập bằng cách gọi const {Model3DElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Model3DElement
Model3DElement([options])
Tham số: 
Tạo Model3DElement với các tuỳ chọn được chỉ định.
altitudeMode
Loại:  AltitudeMode optional
Mặc định: AltitudeMode.CLAMP_TO_GROUND
Chỉ định cách diễn giải độ cao ở vị trí.
Thuộc tính HTML:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Mô tả chế độ xoay của hệ toạ độ của mô hình 3D để định vị mô hình trên Bản đồ 3D.

Các phép xoay được áp dụng cho mô hình theo thứ tự sau: xoay quanh trục dọc, nghiêng rồi đến hướng.
Thuộc tính HTML:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Đặt vị trí của Model3DElement. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
Thuộc tính HTML:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Loại:  number|Vector3D|Vector3DLiteral optional
Mặc định: 1
Điều chỉnh tỷ lệ mô hình dọc theo các trục x, y và z trong không gian toạ độ của mô hình.
Thuộc tính HTML:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Loại:  string|URL optional
Chỉ định URL của mô hình 3D. Hiện tại, chúng tôi chỉ hỗ trợ các mô hình ở định dạng .glb.

Mọi URL loại HTTP tương đối sẽ được phân giải thành URL tuyệt đối tương ứng.

Xin lưu ý rằng nếu bạn lưu trữ các tệp mô hình .glb trên một trang web hoặc máy chủ khác với ứng dụng chính, hãy nhớ thiết lập đúng tiêu đề HTTP CORS. Điều này cho phép ứng dụng của bạn truy cập một cách an toàn vào các tệp mô hình từ miền khác.
Thuộc tính HTML:
  • <gmp-model-3d src="url"></gmp-model-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.
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.

Giao diện Model3DElementOptions

google.maps.maps3d.Model3DElementOptions giao diện

Đối tượng Model3DElementOptions dùng để xác định các thuộc tính có thể đặt trên Model3DElement.
altitudeMode optional
Loại:  AltitudeMode optional
Vui lòng xem Model3DElement.altitudeMode.
orientation optional
Vui lòng xem Model3DElement.orientation.
position optional
Vui lòng xem Model3DElement.position.
scale optional
Loại:  number|Vector3D|Vector3DLiteral optional
Vui lòng xem Model3DElement.scale.
src optional
Loại:  string|URL optional
Vui lòng xem Model3DElement.src.

Lớp Model3DInteractiveElement

Lớp google.maps.maps3d.Model3DInteractiveElement

Mô hình 3D cho phép kết xuất mô hình gLTF. Xin lưu ý rằng bạn phải đặt position và src để Model3DElement hiển thị.

Các thuộc tính cốt lõi của gLTF PBR phải được hỗ trợ. Hiện không có tiện ích hoặc thuộc tính tiện ích nào được hỗ trợ.

Không giống như Model3DElement, Model3DInteractiveElement nhận được sự kiện gmp-click.

Phần tử tuỳ chỉnh:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

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

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

Truy cập bằng cách gọi const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Tham số: 
Tạo Model3DInteractiveElement với các tuỳ chọn được chỉ định.
Kế thừa: altitudeMode, orientation, position, scale, src
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.
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.
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ử Model3DInteractiveElement.

Giao diện Model3DInteractiveElementOptions

google.maps.maps3d.Model3DInteractiveElementOptions giao diện

Đối tượng Model3DInteractiveElementOptions dùng để xác định các thuộc tính có thể đặt trên Model3DInteractiveElement.

Giao diện này mở rộng Model3DElementOptions.

Kế thừa: altitudeMode, orientation, position, scale, src

Lớp Polyline3DElement

Lớp google.maps.maps3d.Polyline3DElement

Hình nhiều đường 3D là một lớp phủ tuyến tính gồm các đoạn thẳng được kết nối trên bản đồ 3D.

Phần tử tuỳ chỉnh:
<gmp-polyline-3d altitude-mode="absolute" 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>

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

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

Truy cập bằng cách gọi const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Polyline3DElement
Polyline3DElement([options])
Tham số: 
Tạo Polyline3DElement với các tuỳ chọn được chỉ định.
altitudeMode
Loại:  AltitudeMode optional
Mặc định: AltitudeMode.CLAMP_TO_GROUND
Chỉ định cách diễn giải các thành phần độ cao trong toạ độ.
Thuộc tính HTML:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
Loại:  boolean optional
Mặc định: false
Chỉ định xem có vẽ các phần của hình nhiều đường có thể bị che khuất hay không. Hình nhiều đường có thể bị che khuất bởi hình học bản đồ (ví dụ: toà nhà).
Thuộc tính HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Loại:  boolean optional
Mặc định: false
Chỉ định xem có kết nối hình nhiều đường với mặt đất hay không. Để kéo dài một đường đa tuyến, altitudeMode phải là RELATIVE_TO_GROUND hoặc ABSOLUTE.
Thuộc tính HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Loại:  boolean optional
Mặc định: false
Khi true, các cạnh của hình nhiều đường được hiểu là đường trắc địa và sẽ tuân theo độ cong của Trái Đất. Khi false, các cạnh của hình nhiều đường được kết xuất dưới dạng đường thẳng trong không gian màn hình.
Thuộc tính HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Loại:  string optional
Màu bên ngoài. Tất cả màu CSS3 đều được hỗ trợ.
Thuộc tính HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Loại:  number optional
Chiều rộng bên ngoài nằm trong khoảng từ 0.0 đến 1.0. Đây là tỷ lệ phần trăm của strokeWidth.
Thuộc tính HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
Trình tự toạ độ được sắp xếp của Hình nhiều đường. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
Thuộc tính HTML:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Loại:  string optional
Màu nét vẽ. Tất cả màu CSS3 đều được hỗ trợ.
Thuộc tính HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Loại:  number optional
Độ rộng của nét vẽ tính bằng pixel.
Thuộc tính HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Loại:  number optional
zIndex so với các đa giác khác.
Thuộc tính HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
Trình tự toạ độ được sắp xếp của Hình nhiều đường. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
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.
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.

Giao diện Polyline3DElementOptions

google.maps.maps3d.Polyline3DElementOptions giao diện

Đối tượng Polyline3DElementOptions dùng để xác định các thuộc tính có thể đặt trên Polyline3DElement.
altitudeMode optional
Loại:  AltitudeMode optional
Vui lòng xem Polyline3DElement.altitudeMode.
coordinates optional
Vui lòng xem Polyline3DElement.coordinates.
drawsOccludedSegments optional
Loại:  boolean optional
Vui lòng xem Polyline3DElement.drawsOccludedSegments.
extruded optional
Loại:  boolean optional
Vui lòng xem Polyline3DElement.extruded.
geodesic optional
Loại:  boolean optional
Vui lòng xem Polyline3DElement.geodesic.
outerColor optional
Loại:  string optional
Vui lòng xem Polyline3DElement.outerColor.
outerWidth optional
Loại:  number optional
Vui lòng xem Polyline3DElement.outerWidth.
strokeColor optional
Loại:  string optional
Vui lòng xem Polyline3DElement.strokeColor.
strokeWidth optional
Loại:  number optional
Vui lòng xem Polyline3DElement.strokeWidth.
zIndex optional
Loại:  number optional
Vui lòng xem Polyline3DElement.zIndex.

Lớp Polyline3DInteractiveElement

Lớp google.maps.maps3d.Polyline3DInteractiveElement

Hình nhiều đường 3D là một lớp phủ tuyến tính gồm các đoạn thẳng được kết nối trên bản đồ 3D. Không giống như Polyline3DElement, Polyline3DInteractiveElement nhận được một sự kiện gmp-click.

Phần tử tuỳ chỉnh:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

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

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

Truy cập bằng cách gọi const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Tham số: 
Tạo Polyline3DInteractiveElement với các tuỳ chọn được chỉ định.
Kế thừa: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
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.
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.
gmp-click
function(clickEvent)
Đối số: 
  • clickEvent:  LocationClickEvent Đối tượng sự kiện sẽ chứa vị trí vĩ độ-kinh độ-độ cao của lượt nhấp.
Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử Polyline3DInteractiveElement.

Giao diện Polyline3DInteractiveElementOptions

google.maps.maps3d.Polyline3DInteractiveElementOptions giao diện

Đối tượng Polyline3DInteractiveElementOptions dùng để xác định các thuộc tính có thể đặt trên Polyline3DInteractiveElement.

Giao diện này mở rộng Polyline3DElementOptions.

Kế thừa: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Lớp Polygon3DElement

Lớp google.maps.maps3d.Polygon3DElement

Hình đa giác 3D (như hình nhiều đường 3D) xác định một loạt toạ độ được kết nối theo trình tự có thứ tự. Ngoài ra, đa giác tạo thành một vòng lặp khép kín và xác định một vùng được lấp đầy.

Phần tử tuỳ chỉnh:
<gmp-polygon-3d altitude-mode="absolute" 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>

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

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

Truy cập bằng cách gọi const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Polygon3DElement
Polygon3DElement([options])
Tham số: 
Tạo Polygon3DElement với các tuỳ chọn được chỉ định.
altitudeMode
Loại:  AltitudeMode optional
Mặc định: AltitudeMode.CLAMP_TO_GROUND
Chỉ định cách diễn giải các thành phần độ cao trong toạ độ.
Thuộc tính HTML:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Loại:  boolean optional
Mặc định: false
Chỉ định xem các phần của đa giác có thể bị che khuất có được vẽ hay không. Đa giác có thể bị che khuất bởi hình học bản đồ (ví dụ: toà nhà).
Thuộc tính HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Loại:  boolean optional
Mặc định: false
Chỉ định xem có kết nối đa giác với mặt đất hay không. Để kéo dài một đa giác, altitudeMode phải là RELATIVE_TO_GROUND hoặc ABSOLUTE.
Thuộc tính HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Loại:  string optional
Màu nền. Tất cả màu CSS3 đều được hỗ trợ.
Thuộc tính HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Loại:  boolean optional
Mặc định: false
Khi true, các cạnh của đa giác được diễn giải là đường trắc địa và sẽ tuân theo độ cong của Trái Đất. Khi false, các cạnh của đa giác được kết xuất dưới dạng đường thẳng trong không gian màn hình.
Thuộc tính HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
Trình tự toạ độ có thứ tự chỉ định một vòng lặp khép kín. Không giống như hình nhiều đường, một đa giác có thể bao gồm một hoặc nhiều đường dẫn, tạo ra nhiều đường cắt bên trong đa giác.
path
Trình tự toạ độ có thứ tự chỉ định một vòng lặp khép kín. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
Thuộc tính HTML:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Loại:  string optional
Màu nét vẽ. Tất cả màu CSS3 đều được hỗ trợ.
Thuộc tính HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Loại:  number optional
Độ rộng của nét vẽ tính bằng pixel.
Thuộc tính HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Loại:  number optional
zIndex so với các đa giác khác.
Thuộc tính HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
Trình tự toạ độ có thứ tự chỉ định một vòng lặp khép kín. Độ cao bị bỏ qua ở một số chế độ nhất định nên không bắt buộc.
innerCoordinates
Trình tự toạ độ có thứ tự chỉ định một vòng lặp khép kín. Không giống như hình nhiều đường, một đa giác có thể bao gồm một hoặc nhiều đường dẫn, tạo ra nhiều đường cắt bên trong đa giác.
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.
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.

Giao diện Polygon3DElementOptions

google.maps.maps3d.Polygon3DElementOptions giao diện

Đối tượng Polygon3DElementOptions dùng để xác định các thuộc tính có thể đặt trên Polygon3DElement.
altitudeMode optional
Loại:  AltitudeMode optional
Vui lòng xem Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Loại:  boolean optional
Vui lòng xem Polygon3DElement.drawsOccludedSegments.
extruded optional
Loại:  boolean optional
Vui lòng xem Polygon3DElement.extruded.
fillColor optional
Loại:  string optional
Vui lòng xem Polygon3DElement.fillColor.
geodesic optional
Loại:  boolean optional
Vui lòng xem Polygon3DElement.geodesic.
innerCoordinates optional
Vui lòng xem Polygon3DElement.innerCoordinates.
outerCoordinates optional
Vui lòng xem Polygon3DElement.outerCoordinates.
strokeColor optional
Loại:  string optional
Vui lòng xem Polygon3DElement.strokeColor.
strokeWidth optional
Loại:  number optional
Vui lòng xem Polygon3DElement.strokeWidth.
zIndex optional
Loại:  number optional
Vui lòng xem Polygon3DElement.zIndex.

Lớp Polygon3DInteractiveElement

Lớp google.maps.maps3d.Polygon3DInteractiveElement

Hình đa giác 3D (như hình nhiều đường 3D) xác định một loạt toạ độ được kết nối theo trình tự có thứ tự. Ngoài ra, đa giác tạo thành một vòng lặp khép kín và xác định một vùng được lấp đầy. Không giống như Polygon3DElement, Polygon3DInteractiveElement nhận được một sự kiện gmp-click.

Phần tử tuỳ chỉnh:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

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

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

Truy cập bằng cách gọi const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Tham số: 
Tạo Polygon3DInteractiveElement với các tuỳ chọn được chỉ định.
Kế thừa: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
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.
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.
gmp-click
function(clickEvent)
Đối số: 
  • clickEvent:  LocationClickEvent Đối tượng sự kiện sẽ chứa vị trí vĩ độ-kinh độ-độ cao của lượt nhấp.
Sự kiện này được kích hoạt khi người dùng nhấp vào phần tử Polygon3DInteractiveElement.

Polygon3DInteractiveElementOptions giao diện

google.maps.maps3d.Polygon3DInteractiveElementOptions giao diện

Đối tượng Polygon3DInteractiveElementOptions dùng để xác định các thuộc tính có thể đặt trên Polygon3DInteractiveElement.

Giao diện này mở rộng Polygon3DElementOptions.

Kế thừa: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

Lớp PopoverElement

Lớp google.maps.maps3d.PopoverElement

Một phần tử HTML tuỳ chỉnh hiển thị cửa sổ bật lên. Cửa sổ thông tin trông giống như một bong bóng và thường được kết nối với một điểm đánh dấu.

Phần tử tuỳ chỉnh:
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

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

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

Truy cập bằng cách gọi const {PopoverElement} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
PopoverElement
PopoverElement([options])
Tham số: 
altitudeMode
Loại:  AltitudeMode optional
Mặc định: AltitudeMode.CLAMP_TO_GROUND
Chỉ định cách diễn giải thành phần độ cao của vị trí.
Thuộc tính HTML:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
Loại:  boolean optional
Mặc định: false
Nếu bạn đặt thành true, thì thao tác kéo bản đồ sẽ bị tắt để làm cho cửa sổ bật lên hiển thị đầy đủ khi mở.
Thuộc tính HTML:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Loại:  boolean optional
Mặc định: false
Chỉ định xem cửa sổ bật lên này có nên được "loại bỏ nhẹ" hay không. Hành vi "loại bỏ nhẹ" tương tự như việc đặt thuộc tính popover="auto", một phần của Popover API của trình duyệt.
Thuộc tính HTML:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Loại:  boolean optional
Mặc định: false
Chỉ định xem cửa sổ bật lên này có nên mở hay không.
Thuộc tính HTML:
  • <gmp-popover open></gmp-popover>
positionAnchor
Vị trí hiển thị cửa sổ bật lên này. Nếu cửa sổ bật lên được liên kết với một điểm đánh dấu tương tác, thì vị trí của điểm đánh dấu sẽ được sử dụng.
Thuộc tính HTML:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Đặt nội dung có rãnh vào phần chính của cửa sổ bật lên.
header
Đặt nội dung có rãnh vào phần tiêu đề của cửa sổ bật lên.
--gmp-popover-max-width
Chiều rộng tối đa của cửa sổ bật lên, bất kể chiều rộng của nội dung.
--gmp-popover-min-width
Chiều rộng tối thiểu của cửa sổ bật lên, bất kể chiều rộng của nội dung. Khi sử dụng thuộc tính này, bạn nên đặt giá trị nhỏ hơn chiều rộng của bản đồ (tính bằng pixel).
--gmp-popover-pixel-offset-x
Độ lệch trên trục x (tính bằng pixel) của đầu cửa sổ bật lên so với điểm trên bản đồ có toạ độ địa lý mà cửa sổ bật lên được neo vào.
--gmp-popover-pixel-offset-y
Độ lệch trên trục y (tính bằng pixel) của đầu cửa sổ bật lên so với điểm trên bản đồ có toạ độ địa lý mà cửa sổ bật lên được neo vào.
background-color
Màu nền của cửa sổ bật lên. Hãy xem tài liệu về background-color để biết thêm thông tin chi tiết. Xin lưu ý rằng cửa sổ bật lên mặc định của địa điểm cũng chịu ảnh hưởng của thuộc tính này. Sử dụng các lớp CSS được nhắm mục tiêu hoặc kiểu cùng dòng trên cửa sổ bật lên tuỳ chỉnh để tránh tạo kiểu cho cửa sổ bật lên mặc định của địa điểm.
border-radius
Bán kính đường viền của cửa sổ bật lên. Hãy xem tài liệu về border-radius để biết thêm thông tin chi tiết. Xin lưu ý rằng cửa sổ bật lên mặc định của địa điểm cũng chịu ảnh hưởng của thuộc tính này. Sử dụng các lớp CSS được nhắm mục tiêu hoặc kiểu cùng dòng trên cửa sổ bật lên tuỳ chỉnh để tránh tạo kiểu cho cửa sổ bật lên mặc định của địa điểm.
box-shadow
Độ bóng hộp của cửa sổ bật lên. Hãy xem tài liệu về box-shadow để biết thêm thông tin chi tiết. Xin lưu ý rằng cửa sổ bật lên mặc định của địa điểm cũng chịu ảnh hưởng của thuộc tính này. Sử dụng các lớp CSS được nhắm mục tiêu hoặc kiểu cùng dòng trên cửa sổ bật lên tuỳ chỉnh để tránh tạo kiểu cho cửa sổ bật lên mặc định của địa điểm.
color-scheme
Cho biết bảng phối màu mà cửa sổ bật lên này có thể hiển thị. Hãy xem tài liệu về color-scheme để biết thêm thông tin chi tiết. Nếu không được chỉ định, thì giá trị này sẽ mặc định là lựa chọn ưu tiên về bảng phối màu của người dùng.
padding
Khoảng đệm của cửa sổ bật lên. Hãy xem tài liệu về padding để biết thêm thông tin chi tiết. Xin lưu ý rằng cửa sổ bật lên mặc định của địa điểm cũng chịu ảnh hưởng của thuộc tính này. Sử dụng các lớp CSS được nhắm mục tiêu hoặc kiểu cùng dòng trên cửa sổ bật lên tuỳ chỉnh để tránh tạo kiểu cho cửa sổ bật lên mặc định của địa điểm.
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.
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.

Giao diện PopoverElementOptions

google.maps.maps3d.PopoverElementOptions giao diện

Đối tượng PopoverElementOptions dùng để xác định các thuộc tính có thể đặt trên PopoverElement.
altitudeMode optional
Loại:  AltitudeMode optional
Vui lòng xem PopoverElement.altitudeMode.
autoPanDisabled optional
Loại:  boolean optional
Vui lòng xem PopoverElement.autoPanDisabled.
lightDismissDisabled optional
Loại:  boolean optional
Vui lòng xem PopoverElement.lightDismissDisabled.
open optional
Loại:  boolean optional
Vui lòng xem PopoverElement.open.
positionAnchor optional
Vui lòng xem PopoverElement.positionAnchor.

Hằng số AltitudeMode

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

Chỉ định cách diễn giải các thành phần độ cao trong toạ độ.

Truy cập bằng cách gọi const {AltitudeMode} = await google.maps.importLibrary("maps3d").
Xem Thư viện trong API JavaScript của Maps.
ABSOLUTE Cho phép thể hiện các đối tượng so với mực nước biển trung bình. Điều này cũng có nghĩa là nếu mức độ chi tiết của địa hình thay đổi bên dưới đối tượng, thì vị trí tuyệt đối của đối tượng đó sẽ không thay đổi.
CLAMP_TO_GROUND Cho phép thể hiện các đối tượng được đặt trên mặt đất. Các điểm đánh dấu này sẽ vẫn ở mặt đất theo địa hình bất kể độ cao được cung cấp là bao nhiêu. Nếu đối tượng nằm trên một vùng nước lớn, thì đối tượng đó sẽ được đặt ở mực nước biển.
RELATIVE_TO_GROUND Cho phép thể hiện các đối tượng so với bề mặt mặt đất. Nếu mức độ chi tiết của địa hình thay đổi, thì vị trí của đối tượng sẽ không đổi so với mặt đất. Khi ở trên mặt nước, độ cao sẽ được hiểu là giá trị tính bằng mét so với mực nước biển.
RELATIVE_TO_MESH Cho phép thể hiện các đối tượng so với bề mặt cao nhất của mặt đất + toà nhà + mặt nước. Khi ở trên mặt nước, đây sẽ là mặt nước; khi ở trên địa hình, đây sẽ là bề mặt toà nhà (nếu có) hoặc bề mặt mặt đất (nếu không có toà nhà).