Maps

Lớp MapElement

Lớp google.maps.MapElement

MapElement là một lớp con HTMLElement để hiển thị bản đồ. Sau khi tải thư viện maps, bạn có thể tạo một bản đồ bằng HTML. Ví dụ: 

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
  <button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>
Về nội bộ, nó sử dụng Map. Bạn có thể truy cập vào Map bằng thuộc tính MapElement.innerMap.

Phần tử tuỳ chỉnh:
<gmp-map center="lat,lng" heading-interaction-disabled internal-usage-attribution-ids="id1 id2" map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>

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

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

Truy cập bằng cách gọi const {MapElement} = await google.maps.importLibrary("maps").
Xem Thư viện trong Maps JavaScript API.
MapElement
MapElement([options])
Tham số: 
center
Loại:  LatLng|LatLngLiteral optional
Vĩ độ/kinh độ trung tâm của bản đồ.
Thuộc tính HTML:
  • <gmp-map center="lat,lng"></gmp-map>
headingInteractionDisabled
Loại:  boolean optional
Mặc định: false
Liệu bản đồ có cho phép người dùng kiểm soát hướng camera (xoay) hay không. Tuỳ chọn này chỉ có hiệu lực khi bản đồ là bản đồ vectơ. Nếu không được đặt trong mã, thì cấu hình đám mây cho mã bản đồ sẽ được dùng (nếu có).
Thuộc tính HTML:
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
Loại:  Map
Một tham chiếu đến Map mà MapElement sử dụng nội bộ.
internalUsageAttributionIds
Loại:  Iterable<string> optional
Mặc định: null
Thêm mã nhận dạng phân bổ mức sử dụng vào trình khởi tạo. Mã này giúp Google hiểu được những 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 phân bổ mức sử dụng, bạn có thể xoá thuộc tính này hoặc thay thế giá trị bằng một chuỗi trống. Hệ thống sẽ chỉ gửi các giá trị riêng biệt. Những thay đổi đối với giá trị này sau khi khởi tạo có thể bị bỏ qua.
Thuộc tính HTML:
  • <gmp-map internal-usage-attribution-ids="id1 id2"></gmp-map>
mapId
Loại:  string optional
Mã bản đồ của bản đồ. Bạn không thể đặt hoặc thay đổi tham số này sau khi một bản đồ được khởi tạo. Bạn có thể dùng Map.DEMO_MAP_ID để dùng thử các tính năng yêu cầu mã bản đồ nhưng không yêu cầu bật đám mây.
Thuộc tính HTML:
  • <gmp-map map-id="string"></gmp-map>
renderingType
Loại:  RenderingType optional
Mặc định: RenderingType.VECTOR
Bản đồ phải là bản đồ raster hay bản đồ vectơ. Bạn không thể đặt hoặc thay đổi tham số này sau khi một bản đồ được khởi tạo. Nếu bạn không đặt chế độ này, thì cấu hình đám mây cho mã bản đồ sẽ xác định loại kết xuất (nếu có). Xin lưu ý rằng bản đồ vectơ có thể không dùng được trên một số thiết bị và trình duyệt. Bản đồ sẽ chuyển về bản đồ raster khi cần.
Thuộc tính HTML:
  • <gmp-map rendering-type="vector"></gmp-map>
  • <gmp-map rendering-type="raster"></gmp-map>
tiltInteractionDisabled
Loại:  boolean optional
Mặc định: false
Liệu bản đồ có cho phép người dùng kiểm soát độ nghiêng của camera hay không. Tuỳ chọn này chỉ có hiệu lực khi bản đồ là bản đồ vectơ. Nếu không được đặt trong mã, thì cấu hình đám mây cho mã bản đồ sẽ được dùng (nếu có).
Thuộc tính HTML:
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
Loại:  number optional
Mức thu phóng của bản đồ. Giá trị thu phóng hợp lệ là các số từ 0 cho đến mức thu phóng tối đa được hỗ trợ. Giá trị thu phóng càng lớn thì độ phân giải càng cao.
Thuộc tính HTML:
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_END_INLINE_CENTER.
control-block-end-inline-end
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_END_INLINE_END.
control-block-end-inline-start
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_END_INLINE_START.
control-block-start-inline-center
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_START_INLINE_CENTER.
control-block-start-inline-end
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_START_INLINE_END.
control-block-start-inline-start
Đặt phần tử có khe cắm ở vị trí ControlPosition.BLOCK_START_INLINE_START.
control-inline-end-block-center
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_END_BLOCK_CENTER.
control-inline-end-block-end
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_END_BLOCK_END.
control-inline-end-block-start
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_END_BLOCK_START.
control-inline-start-block-center
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_START_BLOCK_CENTER.
control-inline-start-block-end
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_START_BLOCK_END.
control-inline-start-block-start
Đặt phần tử có khe cắm ở vị trí ControlPosition.INLINE_START_BLOCK_START.
default
Bạn có thể tạo các thành phần có thể tái sử dụng xung quanh Maps JavaScript Web Components, chẳng hạn như AdvancedMarkerElement, bằng cách sử dụng các phần tử tuỳ chỉnh. Theo mặc định, mọi phần tử tuỳ chỉnh được thêm trực tiếp vào MapElement sẽ được phân bổ và hiển thị trong MapPanes.overlayMouseTarget. Tuy nhiên, các Thành phần web của Maps JavaScript API có thể được chuyển lại vào các khe cắm nội bộ của MapElement.
addEventListener
addEventListener(type, listener[, options])
Tham số: 
  • type:  string Một chuỗi phân biệt chữ hoa chữ thường, biểu thị 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 gửi đến đích. Xem addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Tham số: 
Giá trị trả về:  void
Xoá một trình nghe sự kiện đã đăng ký trước đó bằng addEventListener khỏi đích. Xem removeEventListener.
gmp-zoomchange
function(event)
Đối số: 
Sự kiện này được kích hoạt khi thuộc tính thu phóng bản đồ thay đổi.

Giao diện MapElementOptions

google.maps.MapElementOptionsgiao diện

Đối tượng MapElementOptions dùng để xác định các thuộc tính có thể được đặt trên một MapElement.
center optional
Loại:  LatLng|LatLngLiteral optional
Vui lòng xem MapElement.center.
headingInteractionDisabled optional
Loại:  boolean optional
Vui lòng xem MapElement.headingInteractionDisabled.
internalUsageAttributionIds optional
Loại:  Iterable<string> optional
Vui lòng xem MapElement.internalUsageAttributionIds.
mapId optional
Loại:  string optional
Vui lòng xem MapElement.mapId.
renderingType optional
Loại:  RenderingType optional
Vui lòng xem MapElement.renderingType.
tiltInteractionDisabled optional
Loại:  boolean optional
Vui lòng xem MapElement.tiltInteractionDisabled.
zoom optional
Loại:  number optional
Vui lòng xem MapElement.zoom.

Lớp ZoomChangeEvent

Lớp google.maps.ZoomChangeEvent

Sự kiện này được tạo từ việc theo dõi thay đổi về mức thu phóng.

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

Truy cập bằng cách gọi const {ZoomChangeEvent} = await google.maps.importLibrary("maps").
Xem Thư viện trong Maps JavaScript API.

Lớp Map

Lớp google.maps.Map

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

Truy cập bằng cách gọi const {Map} = await google.maps.importLibrary("maps").
Xem Thư viện trong Maps JavaScript API.
Map
Map(mapDiv[, opts])
Tham số: 
  • mapDiv:  HTMLElement Bản đồ sẽ hiển thị để lấp đầy phần tử này.
  • opts:  MapOptions optional Lựa chọn
Tạo một bản đồ mới bên trong vùng chứa HTML đã cho, thường là một phần tử DIV.
DEMO_MAP_ID Mã bản đồ có thể dùng cho các mẫu mã yêu cầu mã bản đồ. Mã bản đồ này không dùng cho các ứng dụng phát hành công khai và không thể dùng cho những tính năng yêu cầu cấu hình đám mây (chẳng hạn như Kiểu đám mây).