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 Tự động hoàn thành địa điểm.

Phần tử tuỳ chỉnh:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" 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 phần Thư viện trong API Maps JavaScript.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Thông số: 
componentRestrictions
Loại:  ComponentRestrictions optional
Các quy định hạn chế về thành phần. Các quy tắc hạn chế thành phần được dùng để chỉ cho phép dự đoán 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 mềm hoặc gợi ý để sử dụng khi tìm kiếm địa điểm.
locationRestriction
Loại:  LocationRestriction optional
Giới hạn để 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. Có 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 biểu mẫu được gửi. 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-placeautocomplete name="string"></gmp-placeautocomplete>
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ể). Các kết quả bằng ngôn ngữ đã chọn có thể được xếp hạng cao hơn, nhưng nội dung đề 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ã khu vực dùng để định dạng kết quả và lọc kết quả. Điều này không giới hạn nội dung đề xuất ở 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 mã ccTLD 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 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>
types
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, 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 trình đơn thả xuống của các 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 nội dung dự đoán.
prediction-item-main-text
Một phần của phần tử dự đoán là văn bản chính của nội dung dự đoán. Đối với vị trí địa lý, thuộc tính 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 phần tử prediction-item, thì văn bản đó sẽ nằm bên ngoài phần tử prediction-item-main-text và kế thừa kiểu của phần tử prediction-item. Theo mặc định, phần 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 kết quả dự đoán được trả về khớp với dữ liệu đầu vào của người dùng. Theo mặc định, văn bản đã 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 được so khớp có thể nằm ở bất kỳ vị trí nào trong phần tử dự đoán. Phần này không nhất thiết phải là một phần của phần tử prediction-item-main-text.
prediction-item-selected
Mục khi người dùng điều hướng đế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 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ác cụm từ gợi ý 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])
Thông số: 
  • type:  string Một 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 đối tượng có phương thức handleEvent
  • options:  boolean|AddEventListenerOptions optional Xem các tuỳ 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
BetaremoveEventListener
removeEventListener(type, listener[, options])
Thông 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-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.
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
Đố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.

Giao diện PlaceAutocompleteElementOptions

Giao diện google.maps.places.PlaceAutocompleteElementOptions

Các tuỳ chọn để tạo PlaceAutocompleteElement.
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 bằng Phần tử tự động hoàn thành đị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 {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places"). Xem phần Thư viện trong API Maps JavaScript.
Betaplace
Loại:  Place

Lớp PlaceAutocompleteRequestErrorEvent

Lớp google.maps.places.PlaceAutocompleteRequestErrorEvent

Sự kiện này do PlaceAutocompleteElement phát ra khi có vấn đề với 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 phần Thư viện trong API Maps JavaScript.

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

Lớp google.maps.places.Autocomplete

Một tiện ích cung cấp thông tin dự đoán về Địa điểm dựa trên nội dung văn bản mà người dùng nhập. Thành phần này đính kèm vào một phần tử đầu vào 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ác 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 phần Thư viện trong API Maps JavaScript.
Autocomplete
Autocomplete(inputField[, opts])
Thông số: 
Tạo một thực thể mới của Autocomplete đính kèm vào trường văn bản đầu vào được chỉ định bằng các tuỳ chọn đã cho.
getBounds
getBounds()
Thông số:  Không có
Giá trị trả về:  LatLngBounds|undefined Các giới hạn thiên lệch.
Trả về các giới hạn mà dự đoán bị thiên lệch.
getFields
getFields()
Thông số:  Không có
Giá trị trả về:  Array<string>|undefined
Trả về các trường cần đưa vào trong phản hồi chi tiết về Địa điểm 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()
Thông 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 về Địa điểm mà 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, hãy trả về một đối tượng Place (Địa điểm) giả lập, với thuộc tính name được đặt thành giá trị hiện tại của trường nhập.
setBounds
setBounds(bounds)
Thông số: 
Giá trị trả về:  Không có
Đặt khu vực ưu tiên để trả về kết quả về Địa điểm. Kết quả có xu hướng thiên về khu vực này, nhưng không giới hạn ở khu vực này.
setComponentRestrictions
setComponentRestrictions(restrictions)
Thông số: 
Giá trị trả về:  Không có
Đặt các quy định hạn chế về thành phần. Các quy tắc hạn chế thành phần được dùng để chỉ cho phép dự đoán những thành phần trong thành phần mẹ. Ví dụ: quốc gia.
setFields
setFields(fields)
Thông số: 
  • fields:  Array<string> optional
Giá trị trả về:  Không có
Đặt các trường cần đưa vào Đị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)
Thông số: 
Giá trị trả về:  Không có
setTypes
setTypes(types)
Thông số: 
  • types:  Array<string> optional Các loại dự đoán cần đưa vào.
Giá trị trả về:  Không có
Đặt 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, tất cả các loại sẽ được trả về.
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 Thông tin chi tiết về địa điểm không thành công, thì PlaceResult sẽ chứa dữ liệu đầu vào của người dùng trong thuộc tính name, 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ể đượ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ế về thành phần. Các quy tắc hạn chế thành phần được dùng để chỉ cho phép dự đoán 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 cần đưa vào Đị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, và bạn sẽ phải trả phí cho các trường này. Nếu bạn truyền ['ALL'], tất cả các trường có sẵn sẽ được trả về và tính phí (không nên dùng cách này cho các bản 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
Liệu 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 place_id, types và name, với place_id, 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
Một 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 giới hạn của tiện ích Tự động hoàn thành tại thời điểm gửi truy vấn. Việc đặt strictBounds thành false (mặc định) sẽ làm cho kết quả nghiêng về, nhưng không 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 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, 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 nội dung dự đoán cụm từ tìm kiếm dựa trên nội dung văn bản mà người dùng nhập. Thành phần này đính kèm vào một phần tử đầu vào 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ác 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 phần Thư viện trong API Maps JavaScript.
SearchBox
SearchBox(inputField[, opts])
Thông số: 
Tạo một thực thể mới của SearchBox đính kèm vào trường văn bản đầu vào được chỉ định bằng các tuỳ chọn đã cho.
getBounds
getBounds()
Thông số:  Không có
Giá trị trả về:  LatLngBounds|undefined
Trả về các giới hạn mà dự đoán cụm từ tìm kiếm bị thiên lệch.
getPlaces
getPlaces()
Thông 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 với sự kiện places_changed.
setBounds
setBounds(bounds)
Thông số: 
Giá trị trả về:  Không có
Đặt khu vực để sử dụng cho việc dự đoán truy vấn có 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 ở khu vực này.
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, bạn nên sử dụng getPlaces để 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ể được đặt trên đối tượng SearchBox.
bounds optional
Khu vực để thiên lệch dự đoán cụm từ tìm kiếm. Dự đoán có xu hướng thiên về nhưng không giới hạn ở các truy vấn nhắm đến những giới hạn này.