Places Widgets

Lớp PlaceAutocompleteElement

Lớp google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement là một lớp con HTMLElement cung cấp thành phần giao diện người dùng cho API Place Autocomplete.

PlaceAutocompleteElement tự động sử dụng AutocompleteSessionToken trong nội bộ để nhóm các giai đoạn truy vấn và lựa chọn trong quá trình tìm kiếm tự động hoàn thành của người dùng.

Lần gọi đầu tiên đến Place.fetchFields trên Place do PlacePrediction.toPlace trả về sẽ tự động bao gồm mã thông báo phiên dùng để tìm nạp PlacePrediction.

Hãy xem https://developers.google.com/maps/documentation/places/web-service/place-session-tokens để biết thêm thông tin chi tiết về cách hoạt động của phiên.

Phần tử tuỳ chỉnh:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

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

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

Truy cập bằng cách gọi const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Tham số: 
includedPrimaryTypes
Loại:  Array<string> optional
Loại địa điểm chính được đưa vào (ví dụ: "nhà hàng" hoặc "trạm xăng").

Địa điểm chỉ được trả về nếu loại chính của địa điểm đó có trong danh sách này. Bạn có thể chỉ định tối đa 5 giá trị. Nếu bạn không chỉ định loại nào, thì tất cả các loại Địa điểm sẽ được trả về.
Thuộc tính HTML:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
Loại:  Array<string> optional
Chỉ bao gồm kết quả ở các khu vực được chỉ định, được chỉ định tối đa 15 mã khu vực gồm hai ký tự CLDR. Một tập hợp trống sẽ không hạn chế kết quả. Nếu bạn đặt cả locationRestriction và includedRegionCodes, thì kết quả sẽ nằm trong khu vực giao nhau.
Thuộc tính HTML:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
Loại:  LocationBias optional
Một ranh giới hoặc gợi ý không bắt buộc để sử dụng khi tìm kiếm địa điểm.
locationRestriction
Loại:  LocationRestriction optional
Ranh giới để ràng buộc kết quả tìm kiếm.
name
Loại:  string optional
Tên được dùng cho phần tử đầu vào. Hãy xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name để biết thông tin chi tiết. Tuân theo hành vi tương tự như thuộc tính tên cho dữ liệu đầu vào. Xin lưu ý rằng đây là tên sẽ được sử dụng khi bạn gửi biểu mẫu. Hãy xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form để biết thông tin chi tiết.
Thuộc tính HTML:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
Điểm xuất phát để tính khoảng cách. Nếu không được chỉ định, khoảng cách sẽ không được tính. Độ cao (nếu có) không được dùng trong phép tính.
Thuộc tính HTML:
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
placeholder
Loại:  string
Văn bản phần giữ chỗ sẽ hiển thị trong phần tử nhập.
requestedLanguage
Loại:  string optional
Giá trị nhận dạng ngôn ngữ cho ngôn ngữ mà kết quả sẽ được trả về, nếu có thể. Kết quả bằng ngôn ngữ đã chọn có thể được xếp hạng cao hơn, nhưng các đề xuất không chỉ giới hạn ở ngôn ngữ này. Xem danh sách ngôn ngữ được hỗ trợ.
Thuộc tính HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Loại:  string optional
Mã vùng dùng để định dạng và lọc kết quả. Tham số này không hạn chế các đề xuất cho quốc gia này. Mã khu vực chấp nhận giá trị gồm hai ký tự ccTLD ("miền cấp cao nhất"). Hầu hết các mã ccTLD đều giống với mã ISO 3166-1, ngoại trừ một số trường hợp ngoại lệ đáng chú ý. Ví dụ: ccTLD của Vương quốc Anh là "uk" (.co.uk) trong khi mã ISO 3166-1 của quốc gia này là "gb" (về mặt kỹ thuật là cho thực thể "Vương quốc Liên hiệp Anh và Bắc Ireland").
Thuộc tính HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
Loại:  UnitSystem optional
Hệ đơn vị dùng để hiển thị khoảng cách. Nếu bạn không chỉ định, hệ thống đơn vị sẽ được xác định theo requestedRegion.
Thuộc tính HTML:
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
value
Loại:  string
Giá trị của phần tử đầu vào.
prediction-item-icon
Vị trí này chấp nhận đúng một phần tử <template> để hiển thị dưới dạng biểu tượng bên cạnh mục dự đoán.
input
Phần tử đầu vào cho phần tử tự động hoàn thành.
prediction-item
Một mục trong trình đơn thả xuống của cụm từ gợi ý đại diện cho một cụm từ gợi ý.
prediction-item-icon
Biểu tượng hiển thị ở bên trái của mỗi mục trong danh sách cụm từ gợi ý.
prediction-item-main-text
Một phần của prediction-item, là văn bản chính của nội dung gợi ý. Đối với vị trí địa lý, thông tin này chứa tên địa điểm, chẳng hạn như "Sydney" hoặc tên đường và số nhà, chẳng hạn như "10 King Street". Theo mặc định, prediction-item-main-text có màu đen. Nếu có bất kỳ văn bản bổ sung nào trong prediction-item, thì văn bản đó sẽ nằm ngoài prediction-item-main-text và kế thừa kiểu của prediction-item. Màu mặc định là màu xám. Văn bản bổ sung thường là địa chỉ.
prediction-item-match
Phần của cụm từ gợi ý được trả về khớp với nội dung người dùng nhập. Theo mặc định, văn bản trùng khớp này được in đậm. Xin lưu ý rằng văn bản trùng khớp có thể nằm ở bất kỳ vị trí nào trong prediction-item. Nó không nhất thiết phải là một phần của prediction-item-main-text.
prediction-item-selected
Mục khi người dùng di chuyển đến mục đó bằng bàn phím. Lưu ý: Các mục đã chọn sẽ chịu ảnh hưởng của cả kiểu phần này và kiểu phần mục dự đoán.
prediction-list
Phần tử hình ảnh chứa danh sách cụm từ gợi ý do dịch vụ Place Autocomplete trả về. Danh sách này xuất hiện dưới dạng danh sách thả xuống bên dưới PlaceAutocompleteElement.
background-color
Ghi đè màu nền của phần tử.
border
Ghi đè đường viền của phần tử.
border-radius
Ghi đè bán kính đường viền của phần tử.
color
Ghi đè phông chữ của phần tử.
color-scheme
Cho biết bảng phối màu mà phần tử 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. Mặc định là color-scheme: light dark.
font
Ghi đè phông chữ của phần tử.
font-family
Ghi đè phông chữ của phần tử.
font-size
Ghi đè phông chữ của phần tử.
font-style
Ghi đè phông chữ của phần tử.
font-weight
Ghi đè phông chữ của phần tử.
line-height
Ghi đè phông chữ của phần tử.
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-error
function(errorEvent)
Đối số: 
Sự kiện này được kích hoạt khi một yêu cầu đến phần phụ trợ bị từ chối (ví dụ: khoá API không chính xác). Sự kiện này không tạo chuỗi bọt.
gmp-select
function(placePredictionSelectEvent)
Đối số: 
Sự kiện này được kích hoạt khi người dùng chọn một cụm từ gợi ý về địa điểm. Chứa một đối tượng PlacePrediction có thể chuyển đổi thành đối tượng Place.

Giao diện PlaceAutocompleteElementOptions

google.maps.places.PlaceAutocompleteElementOptions giao diện

Các lựa chọn để tạo PlaceAutocompleteElement. Để biết nội dung mô tả của từng thuộc tính, hãy tham khảo thuộc tính có cùng tên trong lớp PlaceAutocompleteElement.
includedPrimaryTypes optional
Loại:  Array<string> optional
includedRegionCodes optional
Loại:  Array<string> optional
locationBias optional
Loại:  LocationBias optional
locationRestriction optional
Loại:  LocationRestriction optional
name optional
Loại:  string optional
origin optional
requestedLanguage optional
Loại:  string optional
requestedRegion optional
Loại:  string optional
unitSystem optional
Loại:  UnitSystem optional
value optional
Loại:  string optional
Giá trị của phần tử đầu vào.

Lớp PlacePredictionSelectEvent

Lớp google.maps.places.PlacePredictionSelectEvent

Sự kiện này được tạo sau khi người dùng chọn một mục cụm từ gợi ý bằng PlaceAutocompleteElement. Truy cập vào lựa chọn bằng event.placePrediction.

Chuyển đổi placePrediction thành Place bằng cách gọi PlacePrediction.toPlace.

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

Truy cập bằng cách gọi const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
placePrediction
Loại:  PlacePrediction
Chuyển đổi thành Place bằng cách gọi PlacePrediction.toPlace.

Lớp BasicPlaceAutocompleteElement

Lớp google.maps.places.BasicPlaceAutocompleteElement

BasicPlaceAutocompleteElement là một lớp con HTMLElement cung cấp thành phần giao diện người dùng cho API Place Autocomplete.

Phần tử tuỳ chỉnh:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>

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

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

Truy cập bằng cách gọi const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement(options)
Tham số: 
includedPrimaryTypes
Loại:  Array<string> optional
Loại địa điểm chính được đưa vào (ví dụ: "nhà hàng" hoặc "trạm xăng").

Địa điểm chỉ được trả về nếu loại chính của địa điểm đó có trong danh sách này. Bạn có thể chỉ định tối đa 5 giá trị. Nếu bạn không chỉ định loại nào, thì tất cả các loại Địa điểm sẽ được trả về.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>
includedRegionCodes
Loại:  Array<string> optional
Chỉ bao gồm kết quả ở các khu vực được chỉ định, được chỉ định tối đa 15 mã khu vực gồm hai ký tự CLDR. Một tập hợp trống sẽ không hạn chế kết quả. Nếu bạn đặt cả locationRestriction và includedRegionCodes, thì kết quả sẽ nằm trong khu vực giao nhau.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>
locationBias
Loại:  LocationBias optional
Một ranh giới hoặc gợi ý không bắt buộc để sử dụng khi tìm kiếm địa điểm.
locationRestriction
Loại:  LocationRestriction optional
Ranh giới để ràng buộc kết quả tìm kiếm.
name
Loại:  string optional
Tên được dùng cho phần tử đầu vào. Hãy xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name để biết thông tin chi tiết. Tuân theo hành vi tương tự như thuộc tính tên cho dữ liệu đầu vào. Xin lưu ý rằng đây là tên sẽ được sử dụng khi bạn gửi biểu mẫu. Hãy xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form để biết thông tin chi tiết.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
Điểm xuất phát để tính khoảng cách. Nếu không được chỉ định, khoảng cách sẽ không được tính. Độ cao (nếu có) không được dùng trong phép tính.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>
requestedLanguage
Loại:  string optional
Giá trị nhận dạng ngôn ngữ cho ngôn ngữ mà kết quả sẽ được trả về, nếu có thể. Kết quả bằng ngôn ngữ đã chọn có thể được xếp hạng cao hơn, nhưng các đề xuất không chỉ giới hạn ở ngôn ngữ này. Xem danh sách ngôn ngữ được hỗ trợ.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>
requestedRegion
Loại:  string optional
Mã vùng dùng để định dạng và lọc kết quả. Tham số này không hạn chế các đề xuất cho quốc gia này. Mã khu vực chấp nhận giá trị gồm hai ký tự ccTLD ("miền cấp cao nhất"). Hầu hết các mã ccTLD đều giống với mã ISO 3166-1, ngoại trừ một số trường hợp ngoại lệ đáng chú ý. Ví dụ: ccTLD của Vương quốc Anh là "uk" (.co.uk) trong khi mã ISO 3166-1 của quốc gia này là "gb" (về mặt kỹ thuật là cho thực thể "Vương quốc Liên hiệp Anh và Bắc Ireland").
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>
unitSystem
Loại:  UnitSystem optional
Hệ đơn vị dùng để hiển thị khoảng cách. Nếu bạn không chỉ định, hệ thống đơn vị sẽ được xác định theo requestedRegion.
Thuộc tính HTML:
  • <gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>
prediction-item-icon
Vị trí này chấp nhận đúng một phần tử <template> để hiển thị dưới dạng biểu tượng bên cạnh mục dự đoán.
input
Phần tử đầu vào cho phần tử tự động hoàn thành.
prediction-item
Một mục trong trình đơn thả xuống của cụm từ gợi ý đại diện cho một cụm từ gợi ý.
prediction-item-icon
Biểu tượng hiển thị ở bên trái của mỗi mục trong danh sách cụm từ gợi ý.
prediction-item-main-text
Một phần của prediction-item, là văn bản chính của nội dung gợi ý. Đối với vị trí địa lý, thông tin này chứa tên địa điểm, chẳng hạn như "Sydney" hoặc tên đường và số nhà, chẳng hạn như "10 King Street". Theo mặc định, prediction-item-main-text có màu đen. Nếu có bất kỳ văn bản bổ sung nào trong prediction-item, thì văn bản đó sẽ nằm ngoài prediction-item-main-text và kế thừa kiểu của prediction-item. Màu mặc định là màu xám. Văn bản bổ sung thường là địa chỉ.
prediction-item-match
Phần của cụm từ gợi ý được trả về khớp với nội dung người dùng nhập. Theo mặc định, văn bản trùng khớp này được in đậm. Xin lưu ý rằng văn bản trùng khớp có thể nằm ở bất kỳ vị trí nào trong prediction-item. Nó không nhất thiết phải là một phần của prediction-item-main-text.
prediction-item-selected
Mục khi người dùng di chuyển đến mục đó bằng bàn phím. Lưu ý: Các mục đã chọn sẽ chịu ảnh hưởng của cả kiểu phần này và kiểu phần mục dự đoán.
prediction-list
Phần tử hình ảnh chứa danh sách cụm từ gợi ý do dịch vụ Place Autocomplete trả về. Danh sách này xuất hiện dưới dạng danh sách thả xuống bên dưới PlaceAutocompleteElement.
background-color
Ghi đè màu nền của phần tử.
border
Ghi đè đường viền của phần tử.
border-radius
Ghi đè bán kính đường viền của phần tử.
color
Ghi đè phông chữ của phần tử.
color-scheme
Cho biết bảng phối màu mà phần tử 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. Mặc định là color-scheme: light dark.
font
Ghi đè phông chữ của phần tử.
font-family
Ghi đè phông chữ của phần tử.
font-size
Ghi đè phông chữ của phần tử.
font-style
Ghi đè phông chữ của phần tử.
font-weight
Ghi đè phông chữ của phần tử.
line-height
Ghi đè phông chữ của phần tử.
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-error
function(errorEvent)
Đối số: 
Sự kiện này được kích hoạt khi một yêu cầu đến phần phụ trợ bị từ chối (ví dụ: khoá API không chính xác). Sự kiện này không tạo chuỗi bọt.
gmp-select
function(placeSelectEvent)
Đối số: 
Sự kiện này được kích hoạt khi người dùng chọn một cụm từ gợi ý về địa điểm. Chứa một đối tượng Địa điểm.

Giao diện BasicPlaceAutocompleteElementOptions

google.maps.places.BasicPlaceAutocompleteElementOptions giao diện

Các lựa chọn để tạo BasicPlaceAutocompleteElement.
includedPrimaryTypes optional
Loại:  Array<string> optional
includedRegionCodes optional
Loại:  Array<string> optional
locationBias optional
Loại:  LocationBias optional
locationRestriction optional
Loại:  LocationRestriction optional
name optional
Loại:  string optional
origin optional
requestedLanguage optional
Loại:  string optional
requestedRegion optional
Loại:  string optional
unitSystem optional
Loại:  UnitSystem optional

Lớp PlaceDetailsElement

Lớp google.maps.places.PlaceDetailsElement

Hiển thị thông tin chi tiết về một địa điểm trong bố cục đầy đủ. Thêm PlaceDetailsPlaceRequestElement hoặc PlaceDetailsLocationRequestElement để chỉ định địa điểm cần hiển thị. Thêm PlaceContentConfigElement, PlaceStandardContentElement hoặc PlaceAllContentElement để chỉ định nội dung cần hiển thị.

Ví dụ: 

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details>

Để sử dụng phần tử này, hãy bật Places UI Kit API cho dự án của bạn trong Google Cloud Console.

Phần tử tuỳ chỉnh:
<gmp-place-details></gmp-place-details>

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

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

Truy cập bằng cách gọi const {PlaceDetailsElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceDetailsElement
PlaceDetailsElement([options])
Tham số: 
place
Loại:  Place optional
Chỉ có thể đọc. Đối tượng địa điểm chứa mã nhận dạng, vị trí và khung nhìn của địa điểm hiện được kết xuất.
--gmp-button-border-color
Màu đường viền của nút "Mở trong Maps".
--gmp-button-border-radius
Bán kính đường viền của nút "Mở trong Maps".
--gmp-button-border-width
Độ rộng đường viền của nút "Mở trong Maps".
--gmp-collage-border-radius-outer
Bán kính đường viền của các góc ngoài của ảnh ghép nội dung nghe nhìn.
--gmp-dialog-border-radius
Bán kính đường viền của hộp thoại thông tin công bố trên Google Maps.
--gmp-mat-color-disabled-surface
Màu nền dùng để thể hiện trạng thái bị vô hiệu hoá hoặc không có mặt. Dùng cho các ngôi sao đánh giá trống.
--gmp-mat-color-info
Màu của các phần tử trên giao diện người dùng có sắc thái thông tin. Dùng cho biểu tượng xe lăn.
--gmp-mat-color-negative
Màu của các phần tử trên giao diện người dùng có cảm xúc tiêu cực. Dùng cho văn bản "Đã đóng cửa" trong trạng thái đang mở cửa.
--gmp-mat-color-neutral-container
Màu vùng chứa cho các phần tử trên giao diện người dùng được tô màu trung tính. Dùng cho phần giữ chỗ hình ảnh và huy hiệu ngày xuất bản bài đánh giá.
--gmp-mat-color-on-neutral-container
Màu của văn bản và biểu tượng so với màu vùng chứa trung tính. Dùng cho huy hiệu ngày xuất bản bài đánh giá và huy hiệu tình trạng còn hàng của bộ sạc xe điện khi không có sẵn.
--gmp-mat-color-on-positive-container
Màu của văn bản và biểu tượng so với màu vùng chứa tích cực. Dùng cho huy hiệu về tình trạng còn trống của bộ sạc xe điện (nếu có).
--gmp-mat-color-on-secondary-container
Màu của văn bản và biểu tượng so với màu vùng chứa phụ. Dùng cho văn bản và biểu tượng trên nút "Mở trong Maps".
--gmp-mat-color-on-surface
Màu cho văn bản và biểu tượng trên mọi màu nền. Dùng cho văn bản thông thường.
--gmp-mat-color-on-surface-variant
Màu ít nổi bật hơn cho văn bản và biểu tượng so với bất kỳ màu nền nào. Dùng cho văn bản ít được nhấn mạnh.
--gmp-mat-color-outline-decorative
Màu đường viền của các thành phần không tương tác. Dùng cho đường viền của phần tử.
--gmp-mat-color-positive
Màu của các phần tử trên giao diện người dùng có cảm nhận tích cực. Dùng cho văn bản "Mở cửa" trong trạng thái đang mở cửa.
--gmp-mat-color-positive-container
Màu vùng chứa cho các phần tử trên giao diện người dùng thể hiện cảm xúc tích cực. Dùng cho huy hiệu về tình trạng còn trống của bộ sạc xe điện (nếu có).
--gmp-mat-color-primary
Màu của văn bản và biểu tượng tương tác so với màu nền. Dùng cho số lượng bài đánh giá, đường liên kết trong hộp thoại thông tin công bố của Google Maps, đường liên kết đến trang web, biểu tượng trong thẻ tổng quan và (màu khi di chuột qua/màu khi được chọn/màu văn bản) trên tiêu đề của thanh chứa thẻ.
--gmp-mat-color-secondary-container
Màu nền ít nổi bật hơn so với màu nền tảng, dành cho các thành phần ít nổi bật như nút có tông màu. Dùng cho nền của nút "Mở trong Maps".
--gmp-mat-color-surface
Màu cho nền. Dùng cho nền của phần tử và hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-body-medium
Dùng cho địa chỉ, điểm xếp hạng, loại, giá, trạng thái đang mở cửa, giờ mở cửa, bài đánh giá, số điện thoại, trang web, Plus Code, các tính năng hàng đầu và nội dung trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-body-small
Dùng cho văn bản nội dung trong danh sách tính năng ở thẻ "Giới thiệu".
--gmp-mat-font-display-small
Được dùng cho tên địa điểm và văn bản cho từng tiêu đề tính năng trong thẻ "Giới thiệu".
--gmp-mat-font-family
Bộ phông chữ cơ bản dùng cho tất cả văn bản.
--gmp-mat-font-headline-medium
Dùng cho văn bản tiêu đề trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-label-large
Dùng cho tiêu đề thẻ, nút "Mở trong Maps", văn bản ghi công người đánh giá trong thư viện ảnh, văn bản ghi công người đánh giá trong phần bài đánh giá và đường liên kết trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-label-medium
Dùng cho huy hiệu số lượng ảnh và huy hiệu ngày xuất bản bài đánh giá.
--gmp-mat-font-title-small
Dùng cho tiêu đề của từng phần trong thẻ "Giới thiệu".
--gmp-mat-spacing-extra-large
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-extra-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-large
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-medium
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-two-extra-large
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-star-rating-color
Màu của các ngôi sao được tô trong điểm xếp hạng.
background-color
Ghi đè màu nền của phần tử.
border
Ghi đè đường viền của phần tử.
border-radius
Ghi đè bán kính đường viền của phần tử.
color-scheme
Cho biết bảng phối màu mà phần tử 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. Mặc định là color-scheme: light dark.
font-size
Điều chỉnh tỷ lệ tất cả văn bản và biểu tượng trong phần tử, được xác định nội bộ trong ems. Giá trị mặc định là 16px.
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-error
function(event)
Đối số: 
Sự kiện này được kích hoạt khi một yêu cầu đến phần phụ trợ bị từ chối (ví dụ: khoá API không chính xác). Sự kiện này không tạo chuỗi bọt.
gmp-load
function(event)
Đối số: 
Sự kiện này được kích hoạt khi phần tử tải và hiển thị nội dung của nó. Sự kiện này không tạo chuỗi bọt.

PlaceDetailsElementOptions giao diện

google.maps.places.PlaceDetailsElementOptions giao diện

Các lựa chọn cho PlaceDetailsElement.

Lớp PlaceDetailsCompactElement

Lớp google.maps.places.PlaceDetailsCompactElement

Hiển thị thông tin chi tiết về một địa điểm theo bố cục thu gọn. Thêm PlaceDetailsPlaceRequestElement hoặc PlaceDetailsLocationRequestElement để chỉ định vị trí cần hiển thị. Thêm PlaceContentConfigElement, PlaceStandardContentElement hoặc PlaceAllContentElement để chỉ định nội dung cần hiển thị.

Ví dụ: 

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact>

Để sử dụng phần tử này, hãy bật Places UI Kit API cho dự án của bạn trong Google Cloud Console.

Phần tử tuỳ chỉnh:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>

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

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

Truy cập bằng cách gọi const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
Tham số: 
orientation
Loại:  PlaceDetailsOrientation optional
Mặc định: PlaceDetailsOrientation.VERTICAL
Biến thể hướng (dọc hoặc ngang) của phần tử.
Thuộc tính HTML:
  • <gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
  • <gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>
place
Loại:  Place optional
Chỉ có thể đọc. Đối tượng địa điểm chứa mã nhận dạng, vị trí và khung nhìn của địa điểm hiện được kết xuất.
truncationPreferred
Loại:  boolean
Mặc định: false
Nếu đúng, hãy cắt bớt tên và địa chỉ địa điểm để vừa trên một dòng thay vì xuống dòng.
Thuộc tính HTML:
  • <gmp-place-details-compact truncation-preferred></gmp-place-details-compact>
--gmp-button-border-color
Màu đường viền của nút "Mở trong Maps".
--gmp-button-border-radius
Bán kính đường viền của nút "Mở trong Maps".
--gmp-button-border-width
Độ rộng đường viền của nút "Mở trong Maps".
--gmp-dialog-border-radius
Bán kính đường viền của hộp thoại thông tin công bố trên Google Maps.
--gmp-mat-color-info
Màu của các phần tử trên giao diện người dùng có sắc thái thông tin. Dùng cho biểu tượng xe lăn.
--gmp-mat-color-negative
Màu của các phần tử trên giao diện người dùng có cảm xúc tiêu cực. Dùng cho văn bản "Đã đóng cửa" trong trạng thái đang mở cửa.
--gmp-mat-color-neutral-container
Màu vùng chứa cho các phần tử trên giao diện người dùng được tô màu trung tính. Dùng cho phần giữ chỗ hình ảnh.
--gmp-mat-color-on-secondary-container
Màu của văn bản và biểu tượng so với màu vùng chứa phụ. Dùng cho văn bản và biểu tượng trên nút "Mở trong Maps".
--gmp-mat-color-on-surface
Màu cho văn bản và biểu tượng trên mọi màu nền. Dùng cho văn bản thông thường.
--gmp-mat-color-on-surface-variant
Màu ít nổi bật hơn cho văn bản và biểu tượng so với bất kỳ màu nền nào. Dùng cho văn bản ít được nhấn mạnh.
--gmp-mat-color-outline-decorative
Màu đường viền của các thành phần không tương tác. Dùng cho đường viền của phần tử.
--gmp-mat-color-positive
Màu của các phần tử trên giao diện người dùng có cảm nhận tích cực. Dùng cho văn bản "Mở cửa" trong trạng thái đang mở cửa.
--gmp-mat-color-primary
Màu của văn bản và biểu tượng tương tác so với màu nền. Dùng cho số lượng bài đánh giá, cũng như các đường liên kết trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-color-secondary-container
Màu nền ít nổi bật hơn so với màu nền tảng, dành cho các thành phần ít nổi bật như nút có tông màu. Dùng cho nền của nút "Mở trong Maps".
--gmp-mat-color-surface
Màu cho nền. Dùng cho nền của phần tử và hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-body-medium
Dùng cho văn bản nội dung trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-body-small
Dùng cho địa chỉ, điểm xếp hạng, loại, giá và trạng thái đang mở cửa của địa điểm.
--gmp-mat-font-family
Bộ phông chữ cơ bản dùng cho tất cả văn bản.
--gmp-mat-font-headline-medium
Dùng cho văn bản tiêu đề trong hộp thoại thông tin công bố của Google Maps.
--gmp-mat-font-label-large
Dùng cho nút "Mở trong Maps" cũng như các đường liên kết trong hộp thoại thông tin công bố của Google Maps và văn bản ghi công người đánh giá trong thư viện ảnh.
--gmp-mat-font-label-medium
Dùng cho huy hiệu số lượng ảnh.
--gmp-mat-font-title-small
Dùng cho tên địa điểm.
--gmp-mat-spacing-extra-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-large
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-medium
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-star-rating-color
Màu của các ngôi sao được tô trong điểm xếp hạng.
--gmp-thumbnail-border-radius
Bán kính đường viền của hình thu nhỏ địa điểm.
background-color
Ghi đè màu nền của phần tử.
border
Ghi đè đường viền của phần tử.
border-radius
Ghi đè bán kính đường viền của phần tử.
color-scheme
Cho biết bảng phối màu mà phần tử 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. Mặc định là color-scheme: light dark.
font-size
Điều chỉnh tỷ lệ tất cả văn bản và biểu tượng trong phần tử, được xác định nội bộ trong ems. Giá trị mặc định là 16px.
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-error
function(event)
Đối số: 
Sự kiện này được kích hoạt khi một yêu cầu đến phần phụ trợ bị từ chối (ví dụ: khoá API không chính xác). Sự kiện này không tạo chuỗi bọt.
gmp-load
function(event)
Đối số: 
Sự kiện này được kích hoạt khi phần tử tải và hiển thị nội dung của nó. Sự kiện này không tạo chuỗi bọt.

Giao diện PlaceDetailsCompactElementOptions

google.maps.places.PlaceDetailsCompactElementOptions giao diện

Các lựa chọn cho PlaceDetailsCompactElement.
orientation optional
Loại:  PlaceDetailsOrientation optional
Vui lòng xem PlaceDetailsCompactElement.orientation.
truncationPreferred optional
Loại:  boolean optional
Vui lòng xem PlaceDetailsCompactElement.truncationPreferred.

Hằng số PlaceDetailsOrientation

hằng số google.maps.places.PlaceDetailsOrientation

Biến thể hướng cho PlaceDetailsCompactElement.

Truy cập bằng cách gọi const {PlaceDetailsOrientation} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
HORIZONTAL Hướng ngang.
VERTICAL Hướng dọc.

Lớp PlaceDetailsPlaceRequestElement

Lớp google.maps.places.PlaceDetailsPlaceRequestElement

Định cấu hình PlaceDetailsCompactElement hoặc PlaceDetailsElement để tải dữ liệu dựa trên đối tượng địa điểm, mã nhận dạng hoặc tên tài nguyên. Thêm phần tử này dưới dạng phần tử con của PlaceDetailsCompactElement hoặc PlaceDetailsElement để tải dữ liệu cho địa điểm được chỉ định. Ví dụ: 

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details>

Phần tử tuỳ chỉnh:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>

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

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

Truy cập bằng cách gọi const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
Tham số: 
place
Loại:  Place optional
Mặc định: null
Đối tượng, mã nhận dạng hoặc tên tài nguyên của địa điểm để hiển thị thông tin chi tiết trong thành phần Thông tin tóm tắt về địa điểm. Thuộc tính này phản ánh thuộc tính dưới dạng tên tài nguyên.
Thuộc tính HTML:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
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 PlaceDetailsPlaceRequestElementOptions

google.maps.places.PlaceDetailsPlaceRequestElementOptions giao diện

Các lựa chọn cho PlaceDetailsPlaceRequestElement.
place optional
Loại:  Place|string optional
Xem PlaceDetailsPlaceRequestElement.place

Lớp PlaceDetailsLocationRequestElement

Lớp google.maps.places.PlaceDetailsLocationRequestElement

Định cấu hình PlaceDetailsCompactElement hoặc PlaceDetailsElement để tải dữ liệu dựa trên vị trí. Thêm phần tử này dưới dạng phần tử con của PlaceDetailsCompactElement hoặc PlaceDetailsElement để tải dữ liệu cho vị trí được chỉ định. Ví dụ: 

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details>

Phần tử tuỳ chỉnh:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>

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

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

Truy cập bằng cách gọi const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
Tham số: 
location
Mặc định: null
Vị trí để hiển thị thông tin chi tiết trong phần tử Place Details. Chuẩn hoá thành LatLngAltitude.
Thuộc tính HTML:
  • <gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
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 PlaceDetailsLocationRequestElementOptions

google.maps.places.PlaceDetailsLocationRequestElementOptions giao diện

Các lựa chọn cho PlaceDetailsLocationRequestElement.
location optional
Vị trí để hiển thị địa điểm.

Lớp PlaceSearchElement

Lớp google.maps.places.PlaceSearchElement

Hiển thị kết quả tìm kiếm địa điểm trong một danh sách. Thêm PlaceTextSearchRequestElement hoặc PlaceNearbySearchRequestElement để chỉ định yêu cầu hiển thị kết quả. Thêm PlaceContentConfigElement, PlaceStandardContentElement hoặc PlaceAllContentElement để chỉ định nội dung cần hiển thị.

Ví dụ: 

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Để sử dụng Thành phần tìm kiếm địa điểm, hãy bật Places UI Kit API cho dự án của bạn trong Google Cloud Console.

Phần tử tuỳ chỉnh:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

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

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

Truy cập bằng cách gọi const {PlaceSearchElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceSearchElement
PlaceSearchElement([options])
Tham số: 
attributionPosition
Mặc định: PlaceSearchAttributionPosition.TOP
Vị trí của biểu trưng ghi nhận tác giả và nút công bố thông tin theo quy định pháp lý.
Thuộc tính HTML:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
Loại:  PlaceSearchOrientation optional
Mặc định: PlaceSearchOrientation.VERTICAL
Biến thể hướng (dọc hoặc ngang) của phần tử.
Thuộc tính HTML:
  • <gmp-place-search orientation="vertical"></gmp-place-search>
  • <gmp-place-search orientation="horizontal"></gmp-place-search>
places
Loại:  Array<Place>
Chỉ có thể đọc. Mảng đối tượng Place chứa mã nhận dạng, vị trí và khung nhìn của các địa điểm hiện được kết xuất.
selectable
Loại:  boolean optional
Mặc định: false
Liệu các mục trong danh sách có thể chọn được hay không. Nếu đúng, các mục trong danh sách sẽ là các nút gửi sự kiện gmp-select khi được nhấp vào. Tính năng lựa chọn và di chuyển bằng bàn phím hỗ trợ tiếp cận cũng được hỗ trợ.
Thuộc tính HTML:
  • <gmp-place-search selectable></gmp-place-search>
truncationPreferred
Loại:  boolean optional
Mặc định: false
Nếu đúng, hãy cắt bớt một số dòng nội dung nhất định để vừa với một dòng thay vì xuống dòng.
Thuộc tính HTML:
  • <gmp-place-search truncation-preferred></gmp-place-search>
--gmp-button-border-color
Màu đường viền cho nút "Mở trong Maps".
--gmp-button-border-radius
Bán kính đường viền cho nút "Mở trong Maps".
--gmp-button-border-width
Độ rộng đường viền cho nút "Mở trong Maps".
--gmp-card-border-radius
Bán kính đường viền cho thẻ địa điểm.
--gmp-dialog-border-radius
Bán kính đường viền cho hộp thoại thông tin công bố của Google Maps.
--gmp-mat-color-info
Màu của các phần tử trên giao diện người dùng có sắc thái thông tin. Dùng cho biểu tượng lối vào cho người khuyết tật.
--gmp-mat-color-negative
Màu của các phần tử trên giao diện người dùng có cảm xúc tiêu cực. Dùng cho nhãn "Đóng cửa" trong giờ mở cửa của một địa điểm.
--gmp-mat-color-neutral-container
Màu vùng chứa cho các phần tử trên giao diện người dùng được tô màu trung tính. Dùng cho huy hiệu ngày đánh giá và hình dạng phần giữ chỗ đang tải.
--gmp-mat-color-on-neutral-container
Màu của văn bản và biểu tượng trên vùng chứa trung tính. Dùng cho văn bản ngày xem xét và văn bản lỗi tải.
--gmp-mat-color-on-secondary-container
Màu của văn bản và biểu tượng so với màu vùng chứa phụ. Dùng cho văn bản và biểu tượng của nút.
--gmp-mat-color-on-surface
Màu cho văn bản và biểu tượng so với màu nền. Dùng cho tiêu đề và nội dung hộp thoại.
--gmp-mat-color-on-surface-variant
Màu ít nhấn mạnh hơn cho văn bản và biểu tượng so với màu nền. Dùng cho thông tin địa điểm.
--gmp-mat-color-outline-decorative
Màu đường viền của các thành phần không tương tác. Dùng cho đường viền vùng chứa.
--gmp-mat-color-positive
Màu của các phần tử trên giao diện người dùng có cảm nhận tích cực. Dùng cho nhãn "Mở cửa" cho giờ mở cửa của một địa điểm.
--gmp-mat-color-primary
Màu của văn bản và biểu tượng tương tác so với màu nền. Dùng cho đường liên kết, chỉ báo đang tải và biểu tượng tổng quan.
--gmp-mat-color-secondary-container
Màu nền ít nổi bật hơn so với bề mặt. Dùng cho nền nút.
--gmp-mat-color-surface
Màu cho nền. Dùng cho nền của vùng chứa và hộp thoại.
--gmp-mat-font-body-small
Dùng cho thông tin địa điểm.
--gmp-mat-font-family
Bộ phông chữ cơ bản cho tất cả văn bản.
--gmp-mat-font-headline-medium
Dùng cho tiêu đề hộp thoại.
--gmp-mat-font-label-large
Dùng cho nội dung nút.
--gmp-mat-font-title-medium
Dùng cho tên địa điểm.
--gmp-mat-spacing-extra-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-large
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-medium
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-mat-spacing-small
Dùng để tạo khoảng cách trong phần tử, chẳng hạn như lề và khoảng đệm xung quanh văn bản.
--gmp-star-rating-color
Màu của các ngôi sao được tô màu trong điểm xếp hạng theo sao.
--gmp-thumbnail-border-radius
Bán kính đường viền cho hình thu nhỏ của địa điểm.
background-color
Ghi đè màu nền của phần tử.
border
Ghi đè đường viền của phần tử.
border-radius
Ghi đè bán kính đường viền của phần tử.
color-scheme
Cho biết bảng phối màu mà phần tử 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. Mặc định là color-scheme: light dark.
font-size
Điều chỉnh tỷ lệ tất cả văn bản và biểu tượng trong phần tử. Giá trị mặc định là 16px.
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-error
function(event)
Đối số: 
Sự kiện này được kích hoạt khi một yêu cầu đến phần phụ trợ bị từ chối (ví dụ: khoá API không chính xác). Sự kiện này không tạo chuỗi bọt.
gmp-load
function(event)
Đối số: 
Sự kiện này được kích hoạt khi phần tử tải và hiển thị nội dung của nó. Sự kiện này không tạo chuỗi bọt.
gmp-select
function(event)
Đối số: 
Sự kiện này được kích hoạt khi một địa điểm được chọn trong danh sách. Chứa một đối tượng Place có chứa mã nhận dạng, vị trí và khung nhìn của địa điểm đã chọn.

Giao diện PlaceSearchElementOptions

google.maps.places.PlaceSearchElementOptions giao diện

Các lựa chọn cho PlaceSearchElement.
attributionPosition optional
Vui lòng xem PlaceSearchElement.attributionPosition.
orientation optional
Loại:  PlaceSearchOrientation optional
Vui lòng xem PlaceSearchElement.orientation.
selectable optional
Loại:  boolean optional
Xem PlaceSearchElement.selectable
truncationPreferred optional
Loại:  boolean optional
Vui lòng xem PlaceSearchElement.truncationPreferred.

Hằng số PlaceSearchAttributionPosition

hằng số google.maps.places.PlaceSearchAttributionPosition

Vị trí của thông tin ghi nhận tác giả cho PlaceSearchElement.

Truy cập bằng cách gọi const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
BOTTOM Thông tin ghi nhận tác giả ở cuối PlaceSearchElement
TOP Thông tin ghi nhận tác giả ở đầu PlaceSearchElement

Hằng số PlaceSearchOrientation

hằng số google.maps.places.PlaceSearchOrientation

Biến thể hướng cho PlaceSearchElement.

Truy cập bằng cách gọi const {PlaceSearchOrientation} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
HORIZONTAL Hướng ngang.
VERTICAL Hướng dọc.

Lớp PlaceSelectEvent

Lớp google.maps.places.PlaceSelectEvent

Sự kiện này kích hoạt khi một địa điểm được chọn trong danh sách địa điểm. Truy cập vào lựa chọn bằng event.place.

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

Truy cập bằng cách gọi const {PlaceSelectEvent} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
place
Loại:  Place
Địa điểm đã chọn.

Lớp PlaceNearbySearchRequestElement

Lớp google.maps.places.PlaceNearbySearchRequestElement

Định cấu hình PlaceSearchElement để tải kết quả dựa trên yêu cầu Nearby Search. Bạn phải chỉ định thuộc tính locationRestriction để phần tử tìm kiếm tải. Mọi thuộc tính khác đã định cấu hình sẽ bị bỏ qua nếu bạn không đặt locationRestriction. Thêm phần tử này làm phần tử con của PlaceSearchElement để tải kết quả. Ví dụ: 

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Phần tử tuỳ chỉnh:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>

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

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

Truy cập bằng cách gọi const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
Tham số: 
excludedPrimaryTypes
Loại:  Array<string> optional
Mặc định: null
Các loại địa điểm chính bị loại trừ.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>
excludedTypes
Loại:  Array<string> optional
Mặc định: null
Các loại địa điểm bị loại trừ.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>
includedPrimaryTypes
Loại:  Array<string> optional
Mặc định: null
Bao gồm loại địa điểm chính.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>
includedTypes
Loại:  Array<string> optional
Mặc định: null
Loại địa điểm được bao gồm.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>
locationRestriction
Loại:  Circle|CircleLiteral optional
Mặc định: null
Khu vực cần tìm kiếm. Chuẩn hoá thành Circle.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
Loại:  number optional
Mặc định: null
Số lượng kết quả tối đa cần trả về.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
Loại:  SearchNearbyRankPreference optional
Mặc định: null
Cách xếp hạng kết quả trong phản hồi.
Thuộc tính HTML:
  • <gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>
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 PlaceNearbySearchRequestElementOptions

google.maps.places.PlaceNearbySearchRequestElementOptions giao diện

Các lựa chọn cho PlaceNearbySearchRequestElement.
excludedPrimaryTypes optional
Loại:  Array<string> optional
Các loại địa điểm chính bị loại trừ. Hãy xem PlaceNearbySearchRequestElement.excludedPrimaryTypes và SearchNearbyRequest.excludedPrimaryTypes để biết thêm thông tin chi tiết.
excludedTypes optional
Loại:  Array<string> optional
Các loại địa điểm bị loại trừ. Hãy xem PlaceNearbySearchRequestElement.excludedTypes và SearchNearbyRequest.excludedTypes để biết thêm thông tin chi tiết.
includedPrimaryTypes optional
Loại:  Array<string> optional
Các loại địa điểm chính được đưa vào. Hãy xem PlaceNearbySearchRequestElement.includedPrimaryTypes và SearchNearbyRequest.includedPrimaryTypes để biết thêm thông tin chi tiết.
includedTypes optional
Loại:  Array<string> optional
Các loại địa điểm được đưa vào. Hãy xem PlaceNearbySearchRequestElement.includedTypes và SearchNearbyRequest.includedTypes để biết thêm thông tin chi tiết.
locationRestriction optional
Loại:  Circle|CircleLiteral optional
Khu vực cần tìm kiếm. Hãy xem PlaceNearbySearchRequestElement.locationRestriction và SearchNearbyRequest.locationRestriction để biết thêm thông tin chi tiết.
maxResultCount optional
Loại:  number optional
Số lượng kết quả tối đa cần trả về. Hãy xem PlaceNearbySearchRequestElement.maxResultCount và SearchNearbyRequest.maxResultCount để biết thêm thông tin chi tiết.
rankPreference optional
Loại:  SearchNearbyRankPreference optional
Cách xếp hạng kết quả trong phản hồi. Hãy xem PlaceNearbySearchRequestElement.rankPreference và SearchNearbyRankPreference để biết thêm thông tin chi tiết.

Lớp PlaceTextSearchRequestElement

Lớp google.maps.places.PlaceTextSearchRequestElement

Định cấu hình PlaceSearchElement để tải kết quả dựa trên yêu cầu tìm kiếm văn bản. Bạn phải chỉ định thuộc tính textQuery để phần tử tìm kiếm tải. Mọi thuộc tính khác đã định cấu hình sẽ bị bỏ qua nếu bạn không đặt textQuery. Thêm phần tử này làm phần tử con của PlaceSearchElement để tải kết quả. Ví dụ: 

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

Phần tử tuỳ chỉnh:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

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

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

Truy cập bằng cách gọi const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceTextSearchRequestElement
PlaceTextSearchRequestElement([options])
Tham số: 
evConnectorTypes
Loại:  Array<EVConnectorType> optional
Mặc định: null
Danh sách các loại giắc cắm xe điện ưu tiên.
Thuộc tính HTML:
  • <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>
evMinimumChargingRateKw
Loại:  number optional
Mặc định: null
Tốc độ sạc tối thiểu cần thiết (tính bằng kilowatt).
Thuộc tính HTML:
  • <gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>
includedType
Loại:  string optional
Mặc định: null
Loại địa điểm được yêu cầu.
Thuộc tính HTML:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
Loại:  boolean optional
Mặc định: null
Dùng để giới hạn kết quả tìm kiếm ở những địa điểm hiện đang mở cửa.
Thuộc tính HTML:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
Loại:  LocationBias optional
Mặc định: null
Độ lệch vị trí cho nội dung tìm kiếm. Chuẩn hoá thành LatLngAltitude | LatLngBounds | Circle | string.
Thuộc tính HTML:
  • <gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>
locationRestriction
Mặc định: null
Hạn chế về vị trí cho nội dung tìm kiếm. Chuẩn hoá thành LatLngBounds.
Thuộc tính HTML:
  • <gmp-place-text-search-request location-restriction="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
maxResultCount
Loại:  number optional
Mặc định: null
Số lượng kết quả tối đa cần trả về.
Thuộc tính HTML:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
Loại:  number optional
Mặc định: null
Lọc ra những kết quả có điểm xếp hạng từ người dùng trung bình thấp hơn giới hạn này.
Thuộc tính HTML:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
Loại:  Array<PriceLevel> optional
Mặc định: null
Dùng để giới hạn kết quả tìm kiếm ở những địa điểm được đánh dấu là có mức giá nhất định.
Thuộc tính HTML:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
Loại:  SearchByTextRankPreference optional
Mặc định: null
Cách xếp hạng kết quả trong phản hồi.
Thuộc tính HTML:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
Loại:  string optional
Mặc định: null
Cụm từ tìm kiếm dạng văn bản để tìm kiếm văn bản.
Thuộc tính HTML:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
Loại:  boolean optional
Mặc định: null
Dùng để đặt bộ lọc loại nghiêm ngặt cho "includedType".
Thuộc tính HTML:
  • <gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>
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 PlaceTextSearchRequestElementOptions

google.maps.places.PlaceTextSearchRequestElementOptions giao diện

Các lựa chọn cho PlaceTextSearchRequestElement.
evConnectorTypes optional
Loại:  Array<EVConnectorType> optional
Danh sách các loại giắc cắm xe điện ưu tiên. Hãy xem SearchByTextRequest.evSearchOptions và PlaceTextSearchRequestElement.evConnectorTypes để biết thêm thông tin chi tiết.
evMinimumChargingRateKw optional
Loại:  number optional
Tốc độ sạc tối thiểu cần thiết (tính bằng kilowatt). Hãy xem SearchByTextRequest.evSearchOptions và PlaceTextSearchRequestElement.evMinimumChargingRateKw để biết thêm thông tin chi tiết.
includedType optional
Loại:  string optional
Loại địa điểm được yêu cầu. Hãy xem SearchByTextRequest.includedType và PlaceTextSearchRequestElement.includedType để biết thêm thông tin chi tiết.
isOpenNow optional
Loại:  boolean optional
Dùng để giới hạn kết quả tìm kiếm ở những địa điểm hiện đang mở cửa. Hãy xem SearchByTextRequest.isOpenNow và PlaceTextSearchRequestElement.isOpenNow để biết thêm thông tin chi tiết.
locationBias optional
Loại:  LocationBias optional
Độ lệch vị trí cho nội dung tìm kiếm. Hãy xem SearchByTextRequest.locationBias và PlaceTextSearchRequestElement.locationBias để biết thêm thông tin chi tiết.
locationRestriction optional
Hạn chế về vị trí cho nội dung tìm kiếm. Hãy xem SearchByTextRequest.locationRestriction và PlaceTextSearchRequestElement.locationRestriction để biết thêm thông tin chi tiết.
maxResultCount optional
Loại:  number optional
Số lượng kết quả tối đa cần trả về. Hãy xem SearchByTextRequest.maxResultCount và PlaceTextSearchRequestElement.maxResultCount để biết thêm thông tin chi tiết.
minRating optional
Loại:  number optional
Lọc ra những kết quả có điểm xếp hạng từ người dùng trung bình thấp hơn giới hạn này. Hãy xem SearchByTextRequest.minRating và PlaceTextSearchRequestElement.minRating để biết thêm thông tin chi tiết.
priceLevels optional
Loại:  Array<PriceLevel> optional
Dùng để giới hạn kết quả tìm kiếm ở những địa điểm được đánh dấu là có mức giá nhất định. Hãy xem SearchByTextRequest.priceLevels và PlaceTextSearchRequestElement.priceLevels để biết thêm thông tin chi tiết.
rankPreference optional
Loại:  SearchByTextRankPreference optional
Cách xếp hạng kết quả trong phản hồi. Hãy xem SearchByTextRequest.rankPreference và PlaceTextSearchRequestElement.rankPreference để biết thêm thông tin chi tiết.
textQuery optional
Loại:  string optional
Cụm từ tìm kiếm dạng văn bản để tìm kiếm văn bản. Hãy xem SearchByTextRequest.textQuery và PlaceTextSearchRequestElement.textQuery để biết thêm thông tin chi tiết.
useStrictTypeFiltering optional
Loại:  boolean optional
Dùng để đặt bộ lọc loại nghiêm ngặt cho SearchByTextRequest.includedType. Hãy xem SearchByTextRequest.useStrictTypeFiltering và PlaceTextSearchRequestElement.useStrictTypeFiltering để biết thêm thông tin chi tiết.

Lớp Autocomplete

Lớp google.maps.places.Autocomplete

Một tiện ích cung cấp cụm từ gợi ý về Địa điểm dựa trên nội dung người dùng nhập. Thành phần này đính kèm vào một phần tử nhập thuộc loại text và theo dõi hoạt động nhập văn bản trong trường đó. Danh sách cụm từ gợi ý được trình bày dưới dạng danh sách thả xuống và được cập nhật khi bạn nhập văn bản.

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

Truy cập bằng cách gọi const {Autocomplete} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
Autocomplete
Autocomplete(inputField[, opts])
Tham số: 
Tạo một thực thể mới của Autocomplete đính kèm vào trường nhập văn bản được chỉ định bằng các tuỳ chọn đã cho.
getBounds
getBounds()
Tham số:  Không có
Giá trị trả về:  LatLngBounds|undefined Các ranh giới thiên vị.
Trả về các ranh giới mà cụm từ gợi ý thiên về.
getFields
getFields()
Tham số:  Không có
Giá trị trả về:  Array<string>|undefined
Trả về các trường cần đưa vào cho Địa điểm trong phản hồi chi tiết khi truy xuất thành công thông tin chi tiết. Để xem danh sách các trường, hãy xem PlaceResult.
getPlace
getPlace()
Tham số:  Không có
Giá trị trả về:  PlaceResult Địa điểm do người dùng chọn.
Trả về thông tin chi tiết của Địa điểm mà người dùng chọn nếu truy xuất thành công thông tin chi tiết. Nếu không, hàm này sẽ trả về một đối tượng Địa điểm giả lập, trong đó thuộc tính name được đặt thành giá trị hiện tại của trường nhập dữ liệu.
setBounds
setBounds(bounds)
Tham số: 
Giá trị trả về:  Không có
Đặt khu vực ưu tiên để trả về kết quả Địa điểm. Kết quả sẽ ưu tiên nhưng không chỉ giới hạn ở khu vực này.
setComponentRestrictions
setComponentRestrictions(restrictions)
Tham số: 
Giá trị trả về:  Không có
Đặt các quy định hạn chế đối với thành phần. Các quy định hạn chế về thành phần được dùng để chỉ đưa ra kết quả dự đoán trong thành phần mẹ. Ví dụ: quốc gia.
setFields
setFields(fields)
Tham số: 
  • fields:  Array<string> optional
Giá trị trả về:  Không có
Đặt các trường cần đưa vào cho Địa điểm trong phản hồi chi tiết khi truy xuất thành công thông tin chi tiết. Để xem danh sách các trường, hãy xem PlaceResult.
setOptions
setOptions(options)
Tham số: 
Giá trị trả về:  Không có
setTypes
setTypes(types)
Tham số: 
  • types:  Array<string> optional Các loại cụm từ gợi ý cần đưa vào.
Giá trị trả về:  Không có
Đặt loại cụm từ gợi ý sẽ được trả về. Để biết các loại được hỗ trợ, hãy xem hướng dẫn dành cho nhà phát triển. Nếu bạn không chỉ định loại nào, thì tất cả các loại sẽ được trả về.
Được kế thừa: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
place_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi PlaceResult được cung cấp cho một Địa điểm mà người dùng đã chọn.
Nếu người dùng nhập tên của một Địa điểm không được thành phần điều khiển đề xuất và nhấn phím Enter, hoặc nếu yêu cầu Place Details không thành công, thì PlaceResult sẽ chứa dữ liệu do người dùng nhập trong thuộc tính name mà không có thuộc tính nào khác được xác định.

Giao diện AutocompleteOptions

google.maps.places.AutocompleteOptions giao diện

Các tuỳ chọn có thể được đặt trên đối tượng Autocomplete.
bounds optional
Khu vực để tìm kiếm địa điểm.
componentRestrictions optional
Loại:  ComponentRestrictions optional
Các quy định hạn chế đối với thành phần. Các quy định hạn chế về thành phần được dùng để chỉ đưa ra kết quả dự đoán trong thành phần mẹ. Ví dụ: quốc gia.
fields optional
Loại:  Array<string> optional
Các trường cần đưa vào cho Địa điểm trong phản hồi chi tiết khi truy xuất thành công thông tin chi tiết, sẽ được tính phí. Nếu bạn truyền ['ALL'] vào, thì tất cả các trường có sẵn sẽ được trả về và tính phí (bạn không nên làm như vậy khi triển khai chính thức). Để xem danh sách các trường, hãy xem PlaceResult. Bạn có thể chỉ định các trường lồng nhau bằng đường dẫn dấu chấm (ví dụ: "geometry.location"). Giá trị mặc định là ['ALL'].
placeIdOnly optional
Loại:  boolean optional
Có chỉ truy xuất Mã địa điểm hay không. PlaceResult được cung cấp khi sự kiện place_changed được kích hoạt sẽ chỉ có các trường mã địa điểm, types và name, trong đó mã địa điểm, types và description do dịch vụ Tự động hoàn thành trả về. Tắt theo mặc định.
strictBounds optional
Loại:  boolean optional
Giá trị boolean, cho biết tiện ích Tự động hoàn thành chỉ nên trả về những địa điểm nằm trong ranh giới của tiện ích Tự động hoàn thành tại thời điểm gửi cụm từ tìm kiếm. Việc đặt strictBounds thành false (là giá trị mặc định) sẽ khiến kết quả thiên về (nhưng không bị giới hạn ở) những địa điểm nằm trong ranh giới.
types optional
Loại:  Array<string> optional
Loại cụm từ gợi ý cần trả về. Để biết các loại được hỗ trợ, hãy xem hướng dẫn dành cho nhà phát triển. Nếu bạn không chỉ định loại nào, thì tất cả các loại sẽ được trả về.

Lớp google.maps.places.SearchBox

Một tiện ích cung cấp cụm từ gợi ý dựa trên nội dung người dùng nhập. Thành phần này đính kèm vào một phần tử nhập thuộc loại text và theo dõi hoạt động nhập văn bản trong trường đó. Danh sách cụm từ gợi ý được trình bày dưới dạng danh sách thả xuống và được cập nhật khi bạn nhập văn bản.

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

Truy cập bằng cách gọi const {SearchBox} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
SearchBox
SearchBox(inputField[, opts])
Tham số: 
Tạo một thực thể mới của SearchBox đính kèm vào trường nhập văn bản được chỉ định bằng các tuỳ chọn đã cho.
getBounds
getBounds()
Tham số:  Không có
Giá trị trả về:  LatLngBounds|undefined
Trả về các giới hạn mà cụm từ gợi ý tìm kiếm thiên về.
getPlaces
getPlaces()
Tham số:  Không có
Giá trị trả về:  Array<PlaceResult>|undefined
Trả về cụm từ tìm kiếm mà người dùng chọn để sử dụng với sự kiện places_changed.
setBounds
setBounds(bounds)
Tham số: 
Giá trị trả về:  Không có
Đặt khu vực để sử dụng cho các cụm từ gợi ý tìm kiếm thiên vị. Kết quả sẽ chỉ thiên về khu vực này chứ không hoàn toàn bị giới hạn trong khu vực này.
Được kế thừa: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
Đối số:  Không có
Sự kiện này được kích hoạt khi người dùng chọn một cụm từ tìm kiếm, getPlaces nên được dùng để lấy địa điểm mới.

Giao diện SearchBoxOptions

google.maps.places.SearchBoxOptions giao diện

Các tuỳ chọn có thể được đặt trên đối tượng SearchBox.
bounds optional
Khu vực để thiên về các cụm từ gợi ý tìm kiếm. Thông tin dự đoán sẽ thiên về (nhưng không giới hạn ở) các cụm từ tìm kiếm nhắm đến những ranh giới này.

Lớp PlaceContextualElement

Lớp google.maps.places.PlaceContextualElement

Một tiện ích sử dụng token ngữ cảnh để hiển thị chế độ xem theo ngữ cảnh của câu trả lời từ tính năng Neo bám vào Google Maps.

Phần tử tuỳ chỉnh:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

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

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

Truy cập bằng cách gọi const {PlaceContextualElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceContextualElement
PlaceContextualElement([options])
Tham số: 
contextToken
Loại:  string optional
Token ngữ cảnh.
Thuộc tính HTML:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
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 PlaceContextualElementOptions

google.maps.places.PlaceContextualElementOptions giao diện

Các lựa chọn cho PlaceContextualElement.
contextToken optional
Loại:  string optional
Mã token ngữ cảnh do phản hồi của tính năng Neo bám vào Google Maps cung cấp.

Lớp PlaceContextualListConfigElement

Lớp google.maps.places.PlaceContextualListConfigElement

Một phần tử HTML định cấu hình các tuỳ chọn cho chế độ xem danh sách của Phần tử theo bối cảnh của địa điểm.

Phần tử tuỳ chỉnh:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

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

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

Truy cập bằng cách gọi const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
Tham số: 
layout
Loại:  PlaceContextualListLayout optional
Bố cục.
Thuộc tính HTML:
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
Loại:  boolean optional
Liệu bản đồ có bị ẩn hay không.
Thuộc tính HTML:
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
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.

PlaceContextualListConfigElementOptions

google.maps.places.PlaceContextualListConfigElementOptions giao diện

Các lựa chọn cho PlaceContextualListConfigElement.
layout optional
Loại:  PlaceContextualListLayout optional
Mặc định: PlaceContextualListLayout.VERTICAL
Bố cục.
mapHidden optional
Loại:  boolean optional
Mặc định: false
Đúng nếu bản đồ bị ẩn.

Hằng số PlaceContextualListLayout

hằng số google.maps.places.PlaceContextualListLayout

Danh sách bố cục mà Phần tử theo bối cảnh địa điểm hỗ trợ cho chế độ xem danh sách.

Truy cập bằng cách gọi const {PlaceContextualListLayout} = await google.maps.importLibrary("places").
Xem Thư viện trong API JavaScript của Maps.
COMPACT Bố cục danh sách thu gọn: các mục trong danh sách được hiển thị dưới dạng đường liên kết trên một dòng, với các mục tràn trong danh sách thả xuống.
VERTICAL Bố cục dạng danh sách dọc: các mục trong danh sách được hiển thị dưới dạng thẻ trong danh sách dọc.