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).
controls
Các chế độ điều khiển bổ sung để đính kèm vào bản đồ. Để thêm một chế độ điều khiển vào bản đồ, hãy thêm <div> của chế độ điều khiển vào MVCArray tương ứng với ControlPosition mà chế độ điều khiển đó sẽ được hiển thị.
data
Loại:  Data
Một thực thể của Data, được liên kết với bản đồ. Thêm các đối tượng vào Data này để hiển thị một cách thuận tiện trên bản đồ này.
mapTypes
Loại:  MapTypeRegistry
Một sổ đăng ký các thực thể MapType theo mã nhận dạng chuỗi.
overlayMapTypes
Loại:  MVCArray<MapType optional>
Các loại bản đồ bổ sung để phủ lên. Các loại bản đồ lớp phủ sẽ hiển thị ở trên cùng của bản đồ cơ sở mà chúng được đính kèm, theo thứ tự xuất hiện trong mảng overlayMapTypes (các lớp phủ có giá trị chỉ mục cao hơn sẽ hiển thị trước các lớp phủ có giá trị chỉ mục thấp hơn).
fitBounds
fitBounds(bounds[, padding])
Tham số: 
  • bounds:  LatLngBounds|LatLngBoundsLiteral Ranh giới cần hiển thị.
  • padding:  number|Padding optional Khoảng đệm tính bằng pixel. Các ranh giới sẽ vừa với phần còn lại của bản đồ sau khi khoảng đệm bị xoá. Giá trị số sẽ tạo ra khoảng đệm giống nhau ở cả 4 phía. Cung cấp 0 ở đây để tạo một fitBounds có tính chất luỹ đẳng trên kết quả của getBounds.
Giá trị trả về:  Không có
Đặt khung nhìn để chứa các ranh giới đã cho.
Lưu ý: Khi bản đồ được đặt thành display: none, hàm fitBounds sẽ đọc kích thước của bản đồ là 0x0 và do đó không làm gì cả. Để thay đổi khung nhìn trong khi bản đồ bị ẩn, hãy đặt bản đồ thành visibility: hidden, nhờ đó đảm bảo div bản đồ có kích thước thực tế. Đối với bản đồ vectơ, phương thức này đặt độ nghiêng và hướng của bản đồ thành giá trị mặc định là 0. Việc gọi phương thức này có thể tạo ra một ảnh động mượt mà khi bản đồ di chuyển và thu phóng để vừa với ranh giới. Việc phương thức này có tạo hiệu ứng hay không phụ thuộc vào một phương pháp phỏng đoán nội bộ.
getBounds
getBounds()
Tham số:  Không có
Giá trị trả về:  LatLngBounds|undefined Ranh giới vĩ độ/kinh độ của khung nhìn hiện tại.
Trả về ranh giới vĩ độ/kinh độ của khung nhìn hiện tại. Nếu có nhiều bản sao của thế giới xuất hiện, thì phạm vi ranh giới theo kinh độ sẽ từ -180 đến 180 độ (bao gồm). Nếu bản đồ chưa được khởi chạy hoặc tâm và mức thu phóng chưa được đặt, thì kết quả sẽ là undefined. Đối với bản đồ vectơ có độ nghiêng hoặc hướng khác 0, ranh giới vĩ độ/kinh độ được trả về sẽ biểu thị hộp giới hạn nhỏ nhất bao gồm vùng hiển thị của khung nhìn bản đồ. Xem MapCanvasProjection.getVisibleRegion để biết chính xác khu vực hiển thị của khung hiển thị bản đồ.
getCenter
getCenter()
Tham số:  Không có
Giá trị trả về:  LatLng|undefined
Trả về vị trí xuất hiện ở tâm bản đồ. Xin lưu ý rằng đối tượng LatLng này không được bao bọc. Vui lòng tham khảo LatLng để biết thêm thông tin. Nếu bạn chưa đặt tâm hoặc ranh giới, thì kết quả sẽ là undefined.
getClickableIcons
getClickableIcons()
Tham số:  Không có
Giá trị trả về:  boolean|undefined
Trả về khả năng nhấp vào các biểu tượng trên bản đồ. Biểu tượng bản đồ đại diện cho một địa điểm yêu thích, còn được gọi là POI. Nếu giá trị trả về là true, thì bạn có thể nhấp vào các biểu tượng trên bản đồ.
BetagetDatasetFeatureLayer
getDatasetFeatureLayer(datasetId)
Tham số: 
  • datasetId:  string
Giá trị trả về:  FeatureLayer
Trả về FeatureLayer cho datasetId được chỉ định. Bạn phải định cấu hình mã nhận dạng tập dữ liệu trong Google Cloud Console. Nếu mã nhận dạng tập dữ liệu không được liên kết với kiểu bản đồ của bản đồ hoặc nếu tính năng Tạo kiểu dựa trên dữ liệu không có sẵn (không có mã nhận dạng bản đồ, không có ô vectơ, không có lớp đối tượng hoặc Tập dữ liệu Tạo kiểu dựa trên dữ liệu được định cấu hình trong Kiểu bản đồ), thì thao tác này sẽ ghi lại một lỗi và FeatureLayer.isAvailable kết quả sẽ là false.
getDiv
getDiv()
Tham số:  Không có
Giá trị trả về:  HTMLElement mapDiv của bản đồ.
getFeatureLayer
getFeatureLayer(featureType)
Tham số: 
Giá trị trả về:  FeatureLayer
Trả về FeatureLayer của FeatureType cụ thể. Bạn phải bật FeatureLayer trong Google Cloud Console. Nếu FeatureLayer của FeatureType được chỉ định không tồn tại trên bản đồ này hoặc nếu không có tính năng Tạo kiểu dựa trên dữ liệu (không có mã bản đồ, không có ô vectơ và không có FeatureLayer nào được bật trong kiểu bản đồ), thì thao tác này sẽ ghi lại một lỗi và FeatureLayer.isAvailable kết quả sẽ là false.
getHeading
getHeading()
Tham số:  Không có
Giá trị trả về:  number|undefined
Trả về hướng la bàn của bản đồ. Giá trị hướng được đo bằng độ (theo chiều kim đồng hồ) từ hướng Bắc. Nếu bản đồ chưa được khởi tạo, thì kết quả là undefined.
getHeadingInteractionEnabled
getHeadingInteractionEnabled()
Tham số:  Không có
Giá trị trả về:  boolean|null
Trả về trạng thái bật/tắt của các tương tác với tiêu đề. 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ó).
getInternalUsageAttributionIds
getInternalUsageAttributionIds()
Tham số:  Không có
Giá trị trả về: