Places Widgets

Lớp PlaceAutocompleteElement

Lớp google.maps.places.PlaceAutocompleteElement

  • Địa điểm tự động hoàn thành là một lớp con HTMLElement, cung cấp thành phần giao diện người dùng cho API tự động hoàn thành địa điểm. Sau khi tải thư viện places, bạn có thể tạo dữ liệu đầu vào có chức năng tự động hoàn thành trong HTML. Ví dụ: 
    <gmp-placeautocomplete ></gmp-placeautocomplete>

Phần tử tuỳ chỉnh:
<gmp-placeautocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-placeautocomplete>

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

Lớp này sẽ 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 Maps.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Các thông số: 
componentRestrictions
Loại:  ComponentRestrictions optional
Các hạn chế về thành phần. Các hạn chế về thành phần dùng để hạn chế các cụm từ gợi ý chỉ ở những thành phần trong thành phần mẹ. Ví dụ: quốc gia.
locationBias
Loại:  LocationBias optional
Ranh giới hoặc gợi ý mềm để sử dụng khi tìm kiếm địa điểm.
locationRestriction
Loại:  LocationRestriction optional
Các giới hạn để ràng buộc kết quả tìm kiếm.
name
Loại:  string optional
Tên được sử dụng cho phần tử đầu vào. Xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name để biết chi tiết. Hoạt động 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. Xem https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form để biết chi tiết.
Thuộc tính HTML:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
Loại:  string optional
Giá trị nhận dạng ngôn ngữ của ngôn ngữ mà kết quả 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ị hạn chế ở ngôn ngữ này. Xem danh sách ngôn ngữ được hỗ trợ.
Thuộc tính HTML:
  • <gmp-placeautocomplete requested-language="string"></gmp-placeautocomplete>
requestedRegion
Loại:  string optional
Mã vùng được dùng để định dạng và lọc kết quả. Không hạn chế đề xuất cho quốc gia này. Mã vùng chấp nhận giá trị hai ký tự của ccTLD ("miền cấp cao nhất"). Hầu hết các mã ccTLD (miền cấp cao nhất theo mã quốc gia) đều giống với mã ISO 3166-1, trừ một số trường hợp ngoại lệ đáng chú ý. Ví dụ: ccTLD (miền cấp cao nhất theo mã quốc gia) 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, tên này là "Vương quốc Anh và Bắc Ireland").
Thuộc tính HTML:
  • <gmp-placeautocomplete requested-region="string"></gmp-placeautocomplete>
types
Loại:  Array<string> optional
Các 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 không có loại nào được chỉ định, thì hàm sẽ trả về tất cả các loại.
Thuộc tính HTML:
  • <gmp-placeautocomplete types="type1 type2 type3..."></gmp-placeautocomplete>
prediction-item
Một mục trong trình đơn thả xuống chứ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 mỗi mục trong danh sách dự đoán.
prediction-item-main-text
Một phần của mục dự đoán là văn bản chính của cụm từ gợi ý. Đối với vị trí địa lý, mục này chứa tên địa điểm như "Sydney" hoặc tên đường phố và số nhà, chẳng hạn như "10 King Street". Theo mặc định, văn bản dự đoán-mục-chính có màu đen. Nếu có bất kỳ văn bản nào khác trong mục dự đoán, thì văn bản đó nằm ngoài văn bản dự đoán-mục-main-text và kế thừa kiểu của mục dự đoán đó. Theo mặc định, thẻ này có 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 thông tin mà người dùng nhập. Theo mặc định, văn bản trùng khớp này được làm nổi bật 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 ở vị trí bất kỳ trong mục dự đoán. Giá trị này không nhất thiết là thuộc tính dự đoán-item-main-text.
prediction-item-selected
Mục khi người dùng 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 bộ phận này và kiểu bộ phận của mục dự đoán.
prediction-list
Phần tử hình ảnh có chứa danh sách các 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 Địa điểm tự động hoàn thành.
BetaaddEventListener
addEventListener(type, listener[, options])
Các thông 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 được thông báo. Đây phải là một hàm hoặc đố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 đã chỉ định được phân phối đến mục tiêu. Hãy xem addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
Các thông số: 
Giá trị trả về:  void
Xoá một trình nghe sự kiện đã đăng ký trước đó bằng addEventListener khỏi mục tiêu. Xem removeEventListener

Giao diện PlaceAutocompleteElementOptions

Giao diện google.maps.places.PlaceAutocompleteElementOptions

Các tuỳ chọn để tạo Địa điểm tự động hoàn thành.
componentRestrictions optional
Loại:  ComponentRestrictions optional
xem PlaceAutocompleteElement.componentRestrictions
locationBias optional
Loại:  LocationBias optional
xem PlaceAutocompleteElement.locationBias
locationRestriction optional
Loại:  LocationRestriction optional
xem PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
Loại:  string optional
xem PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
Loại:  string optional
xem PlaceAutocompleteElement.requestedRegion
types optional
Loại:  Array<string> optional
xem PlaceAutocompleteElement.types

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 có Phần tử tự động hoàn thành địa điểm. Truy cập vùng 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 API JavaScript Maps.
Betaplace
Loại:  Place

Lớp PlaceAutocompleteRequestErrorEvent

Lớp google.maps.places.PlaceAutocompleteRequestErrorEvent

Sự kiện này do địa điểm tự động hoàn thành phát ra khi có vấn đề về yêu cầu mạng.

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

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

Lớp Tự động hoàn thành

Lớp google.maps.places.Autocomplete

Một tiện ích cung cấp các dự đoán địa điểm dựa trên nội dung nhập bằng văn bản của người dùng. Mã này sẽ đính kèm vào phần tử đầu vào thuộc loại text và theo dõi mục 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 người dùng 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 Maps.
Autocomplete
Autocomplete(inputField[, opts])
Các thông số: 
Tạo một thực thể mới của Autocomplete. Bản sao này sẽ đính kèm vào trường văn bản nhập được chỉ định với các tuỳ chọn cho sẵn.
getBounds
getBounds()
Tham số: Không có
Giá trị trả về:  LatLngBounds|undefined Giới hạn xu hướng.
Trả về giới hạn mà các truy vấn dự đoán được 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 thông tin được truy xuất thành công. Để xem danh sách 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 do người dùng chọn nếu thông tin chi tiết được truy xuất thành công. Nếu không, sẽ trả về một đối tượng Place (Vị trí) 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)
Các thông số: 
Giá trị trả lại hàng: Không có
Đặt vùng ưu tiên nơi trả về kết quả Địa điểm. Kết quả thiên về, nhưng không giới hạn ở khu vực này.
setComponentRestrictions
setComponentRestrictions(restrictions)
Các thông số: 
Giá trị trả lại hàng: Không có
Đặt các hạn chế về thành phần. Các hạn chế về thành phần dùng để hạn chế các cụm từ gợi ý chỉ ở những thành phần trong thành phần mẹ. Ví dụ: quốc gia.
setFields
setFields(fields)
Các thông số: 
  • fields:  Array<string> optional
Giá trị trả lại hàng: 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 thông tin được truy xuất thành công. Để xem danh sách trường, hãy xem PlaceResult.
setOptions
setOptions(options)
Các thông số: 
Giá trị trả lại hàng: Không có
setTypes
setTypes(types)
Các thông số: 
  • types:  Array<string> optional Các loại cụm từ gợi ý cần đưa vào.
Giá trị trả lại hàng: Không có
Đặt 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 không có loại nào được chỉ định, thì hàm sẽ trả về tất cả các loại.
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 người dùng đã chọn một PlaceResult 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 do chế độ kiểm soát đề xuất và nhấn phím Enter hoặc nếu yêu cầu Chi tiết địa điểm không thành công, thì PlaceResult sẽ chứa thông tin do người dùng nhập vào 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

Giao diện google.maps.places.AutocompleteOptions

Các tuỳ chọn có thể đặt cho đối tượng Autocomplete.
bounds optional
Khu vực mà trong đó để tìm kiếm địa điểm.
componentRestrictions optional
Loại:  ComponentRestrictions optional
Các hạn chế về thành phần. Các hạn chế về thành phần dùng để hạn chế các cụm từ gợi ý chỉ ở những thành phần trong thành phần mẹ. Ví dụ: quốc gia.
fields optional
Loại:  Array<string> optional
Các trường sẽ được thêm cho Địa điểm trong phản hồi chi tiết khi thông tin được truy xuất thành công. Thông tin này sẽ được tính phí. Nếu ['ALL'] được truyền vào, tất cả các trường có sẵn sẽ được trả về và thanh toán (điều này không được đề xuất cho quá trình triển khai sản xuất). Để xem danh sách 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
Liệu có chỉ truy xuất ID địa điểm hay không. PlaceResult cung cấp khi sự kiện place_thay đổi được kích hoạt sẽ chỉ có các trường place_id, loại và tên, cùng với place_id, loại và nội dung mô tả do dịch vụ Tự động hoàn thành trả về. Tắt theo mặc định.
strictBounds optional
Loại:  boolean optional
Một giá trị boolean, cho biết rằng tiện ích Tự động hoàn thành chỉ trả về các vị trí 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 truy vấn. Việc đặtStrictBounds thành false (giá trị mặc định) sẽ làm cho kết quả sai lệch (nhưng không bị giới hạn ở những vị trí nằm trong giới hạn).
types optional
Loại:  Array<string> optional
Các 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 không có loại nào được chỉ định, thì hàm sẽ trả về tất cả các loại.

Lớp google.maps.places.SearchBox

Một tiện ích cung cấp các cụm từ dự đoán truy vấn dựa trên nội dung văn bản mà người dùng nhập. Mã này sẽ đính kèm vào phần tử đầu vào thuộc loại text và theo dõi mục 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 người dùng 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 Maps.
SearchBox
SearchBox(inputField[, opts])
Các thông số: 
Tạo một thực thể mới của SearchBox. Bản sao này sẽ đính kèm vào trường văn bản nhập được chỉ định với các tuỳ chọn cho sẵn.
getBounds
getBounds()
Tham số: Không có
Giá trị trả về:  LatLngBounds|undefined
Trả về giới hạn mà các dự đoán truy vấn được đặt lệch.
getPlaces
getPlaces()
Tham số: Không có
Giá trị trả về:  Array<PlaceResult>|undefined
Trả về truy vấn do người dùng chọn để sử dụng cùng với sự kiện places_changed.
setBounds
setBounds(bounds)
Các thông số: 
Giá trị trả lại hàng: Không có
Đặt vùng dùng để dự đoán truy vấn xu hướng. Kết quả sẽ chỉ thiên về khu vực này chứ không bị giới hạn hoàn toàn.
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 truy vấn, getPlaces sẽ được sử dụng để nhận các địa điểm mới.

Giao diện SearchBoxOptions

Giao diện google.maps.places.SearchBoxOptions

Các tuỳ chọn có thể đặt cho đối tượng SearchBox.
bounds optional
Vùng mà xu hướng dự đoán truy vấn. Thông tin dự đoán được thiên vị (nhưng không chỉ gồm) các cụm từ tìm kiếm nhắm đến những giới hạn này.