Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp API dịch vụ web để nhận thông tin về địa điểm, chỉ đường, và khoảng cách. Các mẫu trong hướng dẫn này được viết cho một nền tảng, nhưng chúng tôi cung cấp các đường liên kết đến tài liệu để triển khai trên các nền tảng khác.
Quick Builder (Trình tạo nhanh) trong Google Cloud Console giúp bạn tạo tính năng tự động hoàn thành biểu mẫu địa chỉ bằng cách sử dụng giao diện người dùng tương tác tạo mã JavaScript cho bạn.
Mua sắm trực tuyến và đặt hàng đã trở thành một phần phổ biến trong cuộc sống của chúng ta. Từ cùng ngày dịch vụ giao hàng để đặt taxi hoặc đặt bữa tối, khách hàng thường kỳ vọng quy trình thanh toán suôn sẻ.
Tuy nhiên, trong tất cả các đơn đăng ký này, việc nhập địa chỉ cho thanh toán hoặc vận chuyển vẫn là một trở ngại trong quy trình thanh toán, có thể là cả thời gian tốn nhiều công sức và cồng kềnh. Trải nghiệm thanh toán suôn sẻ trở nên quan trọng hơn trong thế giới di động, nơi việc nhập văn bản phức tạp trên màn hình nhỏ có thể gây khó chịu và một rào cản khác đối với chuyển đổi của khách hàng.
Chủ đề này cung cấp hướng dẫn triển khai để giúp khách hàng của bạn tăng tốc độ trang web quy trình thanh toán bằng tính năng nhập địa chỉ dự đoán.
Sơ đồ dưới đây cho thấy các API cốt lõi liên quan đến việc triển khai Checkout (nhấp để phóng to).
![](https://developers.google.cn/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=0000&hl=vi)
Bật API
Để triển khai Checkout, bạn phải bật các API sau trong Google Cloud Console:
Để biết thêm thông tin về cách thiết lập, hãy xem Bắt đầu sử dụng Nền tảng Google Maps.
Các phần về phương pháp
Sau đây là các mẹo và cách tuỳ chỉnh mà chúng tôi sẽ đề cập trong chủ đề này.
- Biểu tượng dấu kiểm là một biện pháp cốt lõi.
- Biểu tượng dấu sao là không bắt buộc nhưng bạn nên tuỳ chỉnh để cải thiện giải pháp.
Thêm tính năng tự động hoàn thành vào các trường nhập dữ liệu | Tự động điền biểu mẫu địa chỉ. Thêm chức năng nhập khi di chuyển để cải thiện người dùng trên mọi nền tảng và cải thiện độ chính xác của địa chỉ bằng thao tác nhấn phím tối thiểu. | |
Đưa ra xác nhận trực quan bằng Maps Static API | Tìm vĩ độ/kinh độ của một địa chỉ cho trước (mã hoá địa lý), hoặc chuyển đổi vĩ độ/kinh độ của một vị trí địa lý thành (ngược mã hoá địa lý). | |
Mẹo cải thiện Thanh toán hơn nữa | Sử dụng các tính năng nâng cao của tính năng Tự động hoàn thành địa điểm để mang đến trải nghiệm thanh toán thậm chí còn tốt hơn. |
Thêm tính năng tự động hoàn thành vào trường nhập dữ liệu
Ví dụ này sử dụng: Thư viện địa điểm, Maps JavaScript API | Cũng có: Android | iOS |
Tự động hoàn thành địa điểm có thể đơn giản hoá việc nhập địa chỉ trong đơn đăng ký của bạn, dẫn đến tỷ lệ chuyển đổi cao hơn và trải nghiệm liền mạch cho khách hàng. Tính năng Tự động hoàn thành cung cấp một trường nhập nhanh duy nhất với tính năng "nhập trước" thông tin dự đoán có thể dùng để tự động điền thông tin thanh toán hoặc biểu mẫu địa chỉ giao hàng.
Bằng cách kết hợp tính năng Tự động hoàn thành địa điểm vào giỏ hàng trực tuyến của mình, bạn có thể:
- Giảm lỗi nhập địa chỉ.
- Hãy giảm số bước trong quy trình thanh toán.
- Đơn giản hoá trải nghiệm nhập địa chỉ trên thiết bị di động hoặc thiết bị đeo.
- Giảm đáng kể thao tác nhấn phím và tổng thời gian cần thiết để khách hàng đặt đơn đặt hàng.
Khi người dùng chọn hộp mục nhập Tự động hoàn thành và bắt đầu nhập, một danh sách địa chỉ các gợi ý sẽ xuất hiện:
![](https://developers.google.cn/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=0000&hl=vi)
Khi người dùng chọn một địa chỉ trong danh sách các cụm từ gợi ý, bạn có thể sử dụng câu trả lời để xác minh địa chỉ và nhận vị trí. Sau đó, ứng dụng của bạn có thể điền đúng các trường của biểu mẫu nhập địa chỉ:
![](https://developers.google.cn/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=0000&hl=vi)
Video: Cải thiện biểu mẫu địa chỉ bằng tính năng Tự động hoàn thành địa điểm:
Biểu mẫu địa chỉ
Web
Android
iOS
Bắt đầu với tính năng Tự động hoàn thành địa điểm
Chỉ cần một vài dòng mã JavaScript để kết hợp Place Autcomplete vào trang web của bạn.
Cách dễ nhất là đưa API JavaScript vào Maps (ngay cả khi bạn không hiển thị bản đồ) trong trang web của bạn và chỉ định thư viện Địa điểm như được hiển thị trong ví dụ sau. Lệnh này cũng thực thi hàm khởi tạo.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
Tiếp theo, hãy thêm một hộp văn bản vào trang của bạn để người dùng nhập:
<input id="autocomplete" placeholder="Enter your address"></input>
Cuối cùng, hãy khởi chạy dịch vụ Tự động hoàn thành và liên kết dịch vụ đó với hộp văn bản đã đặt tên:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
Trong ví dụ trước, trình nghe sự kiện place_changed
được kích hoạt khi
người dùng chọn một gợi ý địa chỉ và
Hàm fillInAddress
đã được thực thi.
Hàm như trong ví dụ sau sẽ nhận phản hồi đã chọn và
trích xuất các thành phần địa chỉ để trực quan hoá bên trong một biểu mẫu.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
Sau khi có dữ liệu này, bạn có thể sử dụng dữ liệu đó làm địa chỉ trùng khớp cho người dùng của mình. Từ một vài các dòng mã, bạn có thể đảm bảo khách hàng nhập đúng địa chỉ trong một khoảng thời gian ngắn bất cứ lúc nào.
Xem bản minh hoạ cách hoạt động và mã nguồn đầy đủ để điền biểu mẫu nhập địa chỉ trong mã mẫu.
Những điều cần cân nhắc khi triển khai tính năng Tự động hoàn thành về địa điểm
Tính năng Tự động hoàn thành của địa điểm có một số tuỳ chọn cho phép tính năng này linh hoạt với nếu bạn muốn sử dụng nhiều tính năng khác ngoài tiện ích. Bạn có thể sử dụng kết hợp dịch vụ của bạn để tìm được chính xác những gì bạn cần để so khớp một vị trí theo đúng cách.
-
Đối với biểu mẫu địa chỉ, hãy đặt tham số
types
thànhaddress
thành hạn chế các kết quả trùng khớp với địa chỉ đường phố đầy đủ. Tìm hiểu thêm về các loại được hỗ trợ trong các yêu cầu Tự động hoàn thành tại chỗ. -
Đặt quy định hạn chế phù hợp
và thiên kiến nếu không cần tìm kiếm trên toàn thế giới. Có một số thông số có thể
được sử dụng để thiên vị hoặc hạn chế bất kỳ so khớp nào chỉ với các khu vực cụ thể.
-
Dùng
bounds
để thiết lập ranh giới hình chữ nhật để ràng buộc đối với một khu vực, sử dụngstrictBounds
để đảm bảo chỉ trả về địa chỉ ở những khu vực đó. -
Sử dụng
componentRestrictions
để hạn chế phản hồi đối với một nhóm quốc gia.
-
Dùng
- Để các trường có thể chỉnh sửa trong trường hợp một số trường bị thiếu thông tin trùng khớp và cho phép khách hàng để cập nhật địa chỉ (nếu cần). Vì hầu hết các địa chỉ được tính năng Tự động hoàn thành về địa điểm trả về không chứa số nhà như số căn hộ, số dãy phòng hoặc số nhà. di chuyển tiêu điểm đến Dòng địa chỉ 2 để khuyến khích người dùng điền vào nếu cần.
Cung cấp hình ảnh xác nhận bằng Maps Static API
Sau khi nhập địa chỉ, hãy cung cấp cho người dùng xác nhận bằng hình ảnh địa điểm giao hàng hoặc nhận hàng có bản đồ tĩnh đơn giản. Như vậy, khách hàng đảm bảo thêm rằng địa chỉ chính xác và việc này sẽ giảm lỗi giao hàng/đến lấy hàng. Bản đồ tĩnh có thể được hiển thị trên trang mà họ nhập địa chỉ hoặc thậm chí được gửi trong email xác nhận khi họ đã hoàn tất giao dịch.
Cả hai trường hợp sử dụng này đều có thể được thực hiện bằng API Tĩnh của Maps, thêm phiên bản hình ảnh của bản đồ vào bất kỳ thẻ hình ảnh nào trong một trang hoặc email.
![](https://developers.google.cn/static/maps/solutions/images/checkout/track_package.png?authuser=0000&hl=vi)
Bắt đầu sử dụng API Maps tĩnh
Bạn có thể sử dụng Maps Static API bằng cách sử dụng lệnh gọi dịch vụ web. Lệnh gọi này sẽ tạo phiên bản hình ảnh của bản đồ dựa vào các tham số bạn chỉ định. Giống như bản đồ động, bạn có thể chỉ định loại bản đồ, sử dụng cùng một kiểu trên đám mây và thêm điểm đánh dấu vào phân biệt vị trí.
Lệnh gọi sau đây hiển thị một lộ trình, với kích thước là 600x300px, nằm ở giữa Googleplex ở Mountain View, CA ở mức thu phóng 13. Cụm từ này cũng chỉ định vị trí giao hàng màu xanh dương điểm đánh dấu và kiểu bản đồ trực tuyến.
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
Việc này sẽ được chia nhỏ thành các phần sau:
URL của API | https://maps.googleapis.com/maps/api/staticmap? |
trung tâm bản đồ | trung tâm=37.422177,-122.084082 |
mức thu phóng | thu phóng=13 |
kích thước hình ảnh | kích thước=600x300 |
loại bản đồ | maptype=roadmap |
lưu trữ điểm đánh dấu vị trí | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
kiểu bản đồ đám mây | map_id=8f348d1b5a61d4bb |
Khoá API | khoá=YOUR_API_KEY |
Tham số kênh giải pháp (Xem tài liệu về tham số) | solution_channel=GMP_guides_checkout_v1_a |
Thao tác này sẽ trở thành hình ảnh như minh hoạ dưới đây:
![](https://developers.google.cn/static/maps/solutions/images/checkout/static_map.png?authuser=0000&hl=vi)
Để biết thêm thông tin về các tuỳ chọn API Tĩnh của Maps, hãy xem tài liệu.
Mẹo giúp cải thiện Thanh toán hơn nữa
Bạn có thể nâng cao trải nghiệm khách hàng hơn nữa bằng cách tận dụng một số tính năng mà tính năng Tự động hoàn thành về địa điểm cung cấp. Sau đây là một vài mẹo giúp bạn cải thiện Hộp nhập địa chỉ tự động hoàn thành:
-
Chi tiết địa điểm.
Để cho phép nhập cả địa chỉ và tên cơ sở, hãy xoá
Thuộc tính
types
trong định nghĩa Tự động hoàn thành.
Cho phép người dùng nhập địa chỉ dựa trên tên doanh nghiệp hoặc tên địa điểm yêu thích.
Tính năng "nhập trước" dịch vụ gợi ý không chỉ hoạt động đối với địa chỉ mà bạn còn có thể chọn
cho phép nhập tên doanh nghiệp hoặc tên mốc. Sau khi người dùng nhập tên doanh nghiệp,
dễ dàng lấy lại địa chỉ bằng cách gọi tới
- đọc tài liệu. Tuỳ chỉnh giao diện của hộp Tự động hoàn thành địa điểm cho phù hợp kiểu trang web của bạn. Bạn cũng có thể tạo kiểu cho tiện ích tự động hoàn thành cho phù hợp với giao diện của giỏ hàng. Bạn có thể tuỳ chỉnh một số lớp CSS. Để biết thêm thông tin về cách tạo kiểu cho hộp tự động hoàn thành,
- JavaScript, Android, và iOS cũng như gọi API dịch vụ web trực tiếp thông qua API Địa điểm. Nếu bạn muốn tạo giao diện người dùng tuỳ chỉnh. Xây dựng giao diện người dùng tuỳ chỉnh thay vì sử dụng giao diện người dùng do Google thiết kế, hãy gọi phương thức Đặt dịch vụ Tự động hoàn thành theo phương thức lập trình để truy xuất cụm từ gợi ý cho một nội dung đầu vào nhất định. Bạn có thể truy xuất các dự đoán Tự động hoàn thành địa điểm theo phương thức lập trình trong