Places Widgets

Lớp PlaceAutocompleteElement

Lớp google.maps.places.PlaceAutocompleteElement

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

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|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></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 Maps JavaScript API.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Tham số: 
AlphaincludedPrimaryTypes
Loại:  Array<string> optional
Bao gồm Loại địa điểm chính (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>
AlphaincludedRegionCodes
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 2 ký tự theo quy ước của 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 vùng 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 mềm hoặc gợi ý để sử dụng khi tìm kiếm địa điểm.
locationRestriction
Loại:  LocationRestriction optional
Ranh giới để hạn chế kết quả tìm kiếm.
name
Loại:  string optional
Tên sẽ đượ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 các đầu vào. Xin lưu ý rằng đây là tên sẽ được dùng khi người dùng gửi biểu mẫu. Hãy truy cập vào 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>
Alphaorigin
Điểm xuất phát để tính khoảng cách. Nếu không chỉ định, quãng đường sẽ không được tính. Nếu có, độ cao sẽ không được dùng trong phép tính.
Thuộc tính HTML:
  • <gmp-place-autocomplete origin="lat,lng|lat,lng,altitude"></gmp-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 bị 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ã khu vực dùng để định dạng kết quả và lọc kết quả. Chế độ này không giới hạn các đề xuất ở quốc gia này. Mã khu vực chấp nhận giá trị gồm 2 ký tự ccTLD ("miền cấp cao nhất"). Hầu hết mã ccTLD đều giống với mã ISO 3166-1, ngoại trừ một số trường hợp đá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 Anh và Bắc Ireland").
Thuộc tính HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
AlphaunitSystem
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|imperial"></gmp-place-autocomplete>
BetacomponentRestrictions
Loại:  ComponentRestrictions optional
Các quy định hạn chế đối với thành phần. Bạn có thể dùng các quy tắc hạn chế thành phần để chỉ giới hạn những dự đoán trong thành phần mẹ. Ví dụ: quốc gia.
Betatypes
Loại:  Array<string> optional
Các loại dự đoán 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ề.
Thuộc tính HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
Một mục trong danh sách thả xuống gồm các cụm từ gợi ý, biểu thị một cụm từ gợi ý duy nhất.
prediction-item-icon
Biểu tượng xuất hiện ở bên trái mỗi mục trong danh sách dự đoán.
prediction-item-main-text
Một phần của prediction-item là văn bản chính của dự đoán. Đố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 và số đường, chẳng hạn như "10 King Street". Theo mặc định, prediction-item-main-text có màu đen. Nếu có thêm văn bản trong prediction-item, văn bản đó sẽ nằm ngoài prediction-item-main-text và kế thừa kiểu chữ từ prediction-item. Theo mặc định, màu của nút này là màu xám. Văn bản bổ sung thường là một địa chỉ.
prediction-item-match
Phần của kết quả dự đoán trả về khớp với nội dung đầu vào của người dùng. Theo mặc định, văn bản trùng khớp này sẽ được đánh dấu bằng văn bản 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. 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 đó thông qua bàn phím. Lưu ý: Các mục đã chọn sẽ chịu ảnh hưởng của cả kiểu dáng bộ phận này và kiểu dáng bộ phận của mục dự đoán.
prediction-list
Phần tử trực quan chứa danh sách các kết quả dự đoán do dịch vụ Tự động hoàn thành địa điểm 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.
BetaaddEventListener
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.
BetaremoveEventListener
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-error
function(errorEvent)
Đối số: 
Sự kiện này được kích hoạt khi 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 kết quả dự đoán về địa điểm. Chứa một đối tượng PlacePrediction có thể chuyển đổi thành đối tượng Place.
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
Đối số: 
Sự kiện này được kích hoạt khi người dùng chọn một kết quả dự đoán về địa điểm. Chứa một đối tượng Địa điểm.

Giao diện PlaceAutocompleteElementOptions

google.maps.places.PlaceAutocompleteElementOptionsgiao diện

Các lựa chọn để tạo một 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.
BetacomponentRestrictions optional
Loại:  ComponentRestrictions optional
AlphaincludedPrimaryTypes optional
Loại:  Array<string> optional
AlphaincludedRegionCodes optional
Loại:  Array<string> optional
locationBias optional
Loại:  LocationBias optional
locationRestriction optional
Loại:  LocationRestriction optional
name optional
Loại:  string optional
Alphaorigin optional
requestedLanguage optional
Loại:  string optional
Betatypes optional
Loại:  Array<string> optional
AlphaunitSystem optional
Loại:  UnitSystem optional

Lớp PlaceAutocompletePlaceSelectEvent

Lớp google.maps.places.PlaceAutocompletePlaceSelectEvent

Sự kiện này được tạo sau khi người dùng chọn một địa điểm bằng Place Autocomplete Element. 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 {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places").
Xem Thư viện trong Maps JavaScript API.
Betaplace
Loại:  Place

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 đề xuất bằng PlaceAutocompleteElement. Truy cập vào lựa chọn bằng event.placePrediction.

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 Maps JavaScript API.
placePrediction
Loại:  PlacePrediction

Lớp PlaceAutocompleteRequestErrorEvent

Lớp google.maps.places.PlaceAutocompleteRequestErrorEvent