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.
Hàm dựng | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Thông số:
|
Thuộc tính | |
---|---|
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:
|
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:
|
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:
|
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:
|
Phụ tùng | |
---|---|
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. |
Phương thức | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Thông số:
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]) 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 |
Sự kiện | |
---|---|
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.
Thuộc tính | |
---|---|
componentRestrictions optional |
Loại:
ComponentRestrictions optional |
locationBias optional |
Loại:
LocationBias optional |
locationRestriction optional |
Loại:
LocationRestriction optional |
requestedLanguage optional |
Loại:
string optional |
requestedRegion optional |
Loại:
string optional |
types optional |
Loại:
Array<string> 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 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.
Thuộc tính | |
---|---|
place |
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 PlaceDetailsElement
Lớp google.maps.places.PlaceDetailsElement
Một phần tử HTML hiển thị thông tin chi tiết về một địa điểm. Sử dụng phương thức configureFromPlace()
hoặc configureFromLocation()
để chỉ định nội dung cần hiển thị. Để sử dụng Phần tử thông tin chi tiết về địa điểm, hãy bật API Bộ công cụ giao diện người dùng của địa điểm cho dự án của bạn trong Google Cloud Console.
Phần tử tuỳ chỉnh:
<gmp-place-details size="small"></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 phần Thư viện trong API Maps JavaScript.
Hàm dựng | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Thông số:
|
Thuộc tính | |
---|---|
place |
Loại:
Place optional Chỉ có thể đọc. Đối tượng Place chứa mã nhận dạng, vị trí và khung nhìn của địa điểm hiện đang hiển thị. |
size |
Loại:
PlaceDetailsSize optional Biến thể kích thước của PlaceDetailsElement. Theo mặc định, phần tử này sẽ hiển thị
PlaceDetailsSize.X_LARGE .Thuộc tính HTML:
|
Phương thức | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Thông số:
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 |
configureFromLocation |
configureFromLocation(location) Thông số:
Giá trị trả về:
Promise<void> Một lời hứa sẽ giải quyết sau khi dữ liệu địa điểm được tải và hiển thị.Định cấu hình tiện ích từ LatLng bằng cách sử dụng tính năng mã hoá địa lý đảo ngược. |
configureFromPlace |
configureFromPlace(place) Thông số:
Giá trị trả về:
Promise<void> Một lời hứa sẽ giải quyết sau khi dữ liệu địa điểm được tải và hiển thị.Định cấu hình tiện ích từ đối tượng Place hoặc Mã địa điểm. |
removeEventListener |
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 |
Sự kiện | |
---|---|
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 phần tử đó. Sự kiện này không tạo chuỗi bọt. |
gmp-requesterror |
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. |
Giao diện PlaceDetailsElementOptions
Giao diện google.maps.places.PlaceDetailsElementOptions
Các tuỳ chọn cho PlaceDetailsElement
.
Thuộc tính | |
---|---|
size optional |
Loại:
PlaceDetailsSize optional |
Hằng số PlaceDetailsSize
Hằng số google.maps.places.PlaceDetailsSize
Biến thể kích thước cho PlaceDetailsElement
.
Truy cập bằng cách gọi const {PlaceDetailsSize} = await google.maps.importLibrary("places")
. Xem phần Thư viện trong API Maps JavaScript.
Hằng số | |
---|---|
LARGE |
Biến thể lớn bao gồm hình ảnh lớn, thông tin cơ bản và thông tin liên hệ. |
MEDIUM |
Biến thể trung bình bao gồm một hình ảnh lớn và thông tin cơ bản. |
SMALL |
Biến thể nhỏ bao gồm một hình ảnh nhỏ và thông tin cơ bản. |
X_LARGE |
Biến thể cực lớn bao gồm ảnh ghép, bài đánh giá và thông tin toàn diện về địa điểm. |
Lớp PlaceListElement
Lớp google.maps.places.PlaceListElement
Một phần tử HTML hiển thị kết quả của một lượt tìm kiếm địa điểm trong danh sách. Sử dụng phương thức configureFromSearchByTextRequest()
hoặc configureFromSearchNearbyRequest()
để chỉ định yêu cầu hiển thị kết quả. Để sử dụng Thành phần danh sách địa điểm, hãy bật API Bộ công cụ giao diện người dùng của địa điểm cho dự án của bạn trong Google Cloud Console.
Phần tử tuỳ chỉnh:
<gmp-place-list selectable></gmp-place-list>
Lớp này mở rộng HTMLElement
.
Lớp này triển khai PlaceListElementOptions
.
Truy cập bằng cách gọi const {PlaceListElement} = await google.maps.importLibrary("places")
. Xem phần Thư viện trong API Maps JavaScript.
Hàm dựng | |
---|---|
PlaceListElement |
PlaceListElement([options]) Thông số:
|
Thuộc tính | |
---|---|
places |
Chỉ có thể đọc. Mảng các đố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 đang hiển thị. |
selectable |
Loại:
boolean 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 điều phối sự kiện
gmp-placeselect khi được nhấp vào. Hệ thống cũng hỗ trợ tính năng điều hướng và lựa chọn bằng bàn phím hỗ trợ tiếp cận.Thuộc tính HTML:
|
Phương thức | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Thông số:
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 |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Thông số:
Giá trị trả về:
Promise<void> Một lời hứa sẽ giải quyết sau khi dữ liệu địa điểm được tải và hiển thị.Định cấu hình tiện ích để hiển thị kết quả tìm kiếm từ yêu cầu API Tìm kiếm văn bản theo địa điểm. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Thông số:
Giá trị trả về:
Promise<void> Một lời hứa sẽ giải quyết sau khi dữ liệu địa điểm được tải và hiển thị.Định cấu hình tiện ích để hiển thị kết quả tìm kiếm từ yêu cầu API Tìm kiếm địa điểm lân cận. |
removeEventListener |
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 |
Sự kiện | |
---|---|
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 phần tử đó. Sự kiện này không tạo chuỗi bọt. |
gmp-placeselect |
function(event) Đối số:
Sự kiện này được kích hoạt khi người dùng chọn một địa điểm. Chứa một đối tượng Place và chỉ mục của địa điểm đã chọn trong danh sách. |
gmp-requesterror |
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. |
Giao diện PlaceListElementOptions
Giao diện google.maps.places.PlaceListElementOptions
Các tuỳ chọn cho PlaceListElement
.
Thuộc tính | |
---|---|
selectable optional |
Loại:
boolean optional |
Lớp PlaceListPlaceSelectEvent
Lớp google.maps.places.PlaceListPlaceSelectEvent
Sự kiện này do PlaceListElement
phát ra khi người dùng chọn một địa điểm.
Lớp này mở rộng Event
.
Truy cập bằng cách gọi const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
. Xem phần Thư viện trong API Maps JavaScript.
Thuộc tính | |
---|---|
index |
Loại:
number Chỉ mục danh sách của địa điểm đã chọn. |
place |
Loại:
Place Một đối tượng Place chứa mã nhận dạng, vị trí và khung nhìn của địa điểm đã chọn. |
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.
Hàm dựng | |
---|---|
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. |
Phương thức | |
---|---|
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ố:
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ố:
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
|
Sự kiện | |
---|---|
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
.
Thuộc tính | |
---|---|
bounds optional |
Loại:
LatLngBounds|LatLngBoundsLiteral 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'] . |
|
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 SearchBox
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.
Hàm dựng | |
---|---|
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. |
Phương thức | |
---|---|
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
|
Sự kiện | |
---|---|
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
.
Thuộc tính | |
---|---|
bounds optional |
Loại:
LatLngBounds|LatLngBoundsLiteral 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. |