BasicPlaceAutocompleteElement tạo một trường nhập văn bản, cung cấp các dự đoán về địa điểm trong danh sách chọn trên giao diện người dùng và trả về mã địa điểm cho địa điểm đã chọn.
Phần tử Basic Place Autocomplete (Tự động hoàn thành cơ bản cho địa điểm) dễ triển khai hơn PlaceAutocompleteElement và có những điểm khác biệt sau:
- Phần tử Cơ bản của tính năng Tự động hoàn thành địa điểm trả về một đối tượng Địa điểm chỉ chứa mã nhận dạng địa điểm, thay vì một đối tượng
PlacePrediction. Bạn có thể sử dụng trực tiếp mã địa điểm được trả về với một phần tử Chi tiết trong Places UI Kit để nhận thêm thông tin chi tiết về địa điểm, trong khi đối tượngPlacePredictiontrước tiên sẽ yêu cầu chuyển đổi thành mã địa điểm. - Phần tử Cơ bản của tính năng Tự động hoàn thành địa điểm không yêu cầu bạn tải Places API.
- Phần tử Cơ bản của tính năng Tự động hoàn thành địa điểm sẽ xoá trường nhập khi người dùng chọn một cụm từ dự đoán về địa điểm.
Điều kiện tiên quyết
Để sử dụng phần tử Basic Place Autocomplete, bạn phải bật Places UI Kit trên dự án Google Cloud của mình. Hãy xem phần Bắt đầu sử dụng để biết thông tin chi tiết.
Thêm một phần tử Cơ bản cho tính năng Tự động hoàn thành địa điểm
Phần này hướng dẫn bạn cách thêm một phần tử Tự động hoàn thành cơ bản vào trang web hoặc bản đồ.
Thêm phần tử Basic Autocomplete (Tự động hoàn thành cơ bản) vào một trang web
Để thêm phần tử BasicAutocomplete vào một trang web, hãy tạo một google.maps.places.BasicPlaceAutocompleteElement mới và nối phần tử đó vào trang như minh hoạ trong ví dụ sau:
// Request needed libraries. const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places'); // Create the input HTML element and append it. const placeAutocomplete = new BasicPlaceAutocompleteElement(); document.body.appendChild(placeAutocomplete);
Thêm phần tử Tự động hoàn thành cơ bản vào bản đồ
Để thêm phần tử Tự động hoàn thành cơ bản vào bản đồ, hãy thêm BasicPlaceAutocompleteElement vào phần tử gmp-map và đặt vị trí của phần tử đó bằng thuộc tính slot, như trong ví dụ sau:
<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID"> <gmp-basic-place-autocomplete slot="control-inline-start-block-start"></gmp-basic-place-autocomplete> </gmp-map>
Hạn chế cụm từ gợi ý của tính năng Tự động hoàn thành
Theo mặc định, tính năng Tự động hoàn thành địa điểm cơ bản sẽ trình bày tất cả các loại địa điểm, thiên về những dự đoán gần vị trí của người dùng. Đặt BasicPlaceAutocompleteElementOptions để trình bày các kết quả dự đoán phù hợp hơn bằng cách hạn chế hoặc thiên vị kết quả.
Việc hạn chế kết quả khiến phần tử Tự động hoàn thành cơ bản bỏ qua mọi kết quả nằm ngoài khu vực hạn chế. Một phương pháp thường dùng là hạn chế kết quả trong phạm vi ranh giới trên bản đồ. Việc điều chỉnh kết quả khiến phần tử BasicAutocomplete hiển thị kết quả trong khu vực được chỉ định, nhưng một số kết quả trùng khớp có thể nằm ngoài khu vực đó.
Nếu bạn không cung cấp bất kỳ ranh giới hoặc khung hiển thị bản đồ nào, API sẽ cố gắng phát hiện vị trí của người dùng từ địa chỉ IP của họ và sẽ điều chỉnh kết quả theo vị trí đó. Đặt ranh giới bất cứ khi nào có thể. Nếu không, những người dùng khác nhau có thể nhận được những dự đoán khác nhau. Ngoài ra, để cải thiện các dự đoán nói chung, bạn cần cung cấp một khung hiển thị hợp lý, chẳng hạn như khung hiển thị mà bạn đặt bằng cách xoay hoặc thu phóng trên bản đồ, hoặc khung hiển thị do nhà phát triển đặt dựa trên vị trí và bán kính của thiết bị. Khi không có bán kính, 5 km được coi là giá trị mặc định hợp lý cho phần tử Cơ bản của tính năng Tự động hoàn thành địa điểm. Không đặt khung hiển thị có bán kính bằng 0 (một điểm duy nhất), khung hiển thị chỉ rộng vài mét (dưới 100 m) hoặc khung hiển thị trải rộng trên toàn cầu.
Hạn chế tìm kiếm địa điểm theo quốc gia
Để hạn chế tìm kiếm địa điểm ở một hoặc nhiều quốc gia cụ thể, hãy sử dụng thuộc tính includedRegionCodes để chỉ định(các) mã quốc gia như minh hoạ trong đoạn mã sau:
const pac = new google.maps.places.BasicPlaceAutocompleteElement({ includedRegionCodes: ['us', 'au'], });
Hạn chế tìm kiếm địa điểm trong ranh giới trên bản đồ
Để hạn chế tìm kiếm địa điểm trong phạm vi của bản đồ, hãy dùng thuộc tính locationRestrictions để thêm phạm vi, như minh hoạ trong đoạn mã sau:
const pac = new google.maps.places.BasicPlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
Khi hạn chế theo ranh giới bản đồ, hãy nhớ thêm một trình nghe để cập nhật ranh giới khi ranh giới thay đổi:
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
Để xoá locationRestriction, hãy đặt thành null.
Kết quả tìm kiếm địa điểm có thiên kiến
Làm lệch kết quả tìm kiếm địa điểm sang một khu vực hình tròn bằng cách sử dụng thuộc tính locationBias và truyền bán kính, như minh hoạ ở đây:
const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
Để xoá locationBias, hãy đặt thành null.
Hạn chế kết quả tìm kiếm địa điểm đối với một số loại nhất định
Hạn chế kết quả tìm kiếm địa điểm đối với một số loại địa điểm nhất định bằng cách sử dụng thuộc tính includedPrimaryTypes và chỉ định một hoặc nhiều loại, như minh hoạ ở đây:
const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({ includedPrimaryTypes: ['establishment'], });
Để xem danh sách đầy đủ các loại được hỗ trợ, hãy xem Bảng A và B về loại địa điểm.
Định cấu hình phần tử Yêu cầu về địa điểm
Thêm một trình nghe để cập nhật phần tử Yêu cầu về địa điểm khi người dùng chọn một kết quả dự đoán:
// Event listener for when a place is selected from the autocomplete list. placeAutocompleteElement.addEventListener('gmp-select', (event) => { // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent.appendChild(placeDetailsElement); placeDetailsElement.style.display = 'block'; advancedMarkerElement.position = null; infoWindow.close(); // Request details for the selected place. const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request'); placeDetailsRequest.place = event.place.id; });
Ví dụ này cho thấy cách thêm phần tử Tự động hoàn thành cơ bản vào một bản đồ Google.
JavaScript
const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete'); const placeDetailsElement = document.querySelector('gmp-place-details-compact'); const placeDetailsParent = placeDetailsElement.parentElement; const gmpMapElement = document.querySelector('gmp-map'); async function initMap() { // Asynchronously load required libraries from the Google Maps JS API. await google.maps.importLibrary('places'); const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); const { InfoWindow } = (await google.maps.importLibrary('maps')); // Get the initial center directly from the gmp-map element's property. const center = gmpMapElement.center; // Set the initial location bias for the autocomplete element. placeAutocompleteElement.locationBias = center; // Update the map object with specified options. const map = gmpMapElement.innerMap; map.setOptions({ clickableIcons: false, mapTypeControl: false, streetViewControl: false, }); // Create an advanced marker to show the location of a selected place. const advancedMarkerElement = new AdvancedMarkerElement({ map: map, collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL, }); // Create an InfoWindow to hold the place details component. const infoWindow = new InfoWindow({ minWidth: 360, disableAutoPan: true, headerDisabled: true, pixelOffset: new google.maps.Size(0, -10), }); // Event listener for when a place is selected from the autocomplete list. placeAutocompleteElement.addEventListener('gmp-select', (event) => { // Reset marker and InfoWindow, and prepare the details element. placeDetailsParent.appendChild(placeDetailsElement); placeDetailsElement.style.display = 'block'; advancedMarkerElement.position = null; infoWindow.close(); // Request details for the selected place. const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request'); placeDetailsRequest.place = event.place.id; }); // Event listener for when the place details have finished loading. placeDetailsElement.addEventListener('gmp-load', () => { const location = placeDetailsElement.place.location; // Position the marker and open the InfoWindow at the place's location. advancedMarkerElement.position = location; infoWindow.setContent(placeDetailsElement); infoWindow.open({ map, anchor: advancedMarkerElement, }); map.setCenter(location); }); // Event listener to close the InfoWindow when the map is clicked. map.addListener('click', () => { infoWindow.close(); advancedMarkerElement.position = null; }); // Event listener for when the map finishes moving (panning or zooming). map.addListener('idle', () => { const newCenter = map.getCenter(); // Update the autocomplete's location bias to a 10km radius around the new map center. placeAutocompleteElement.locationBias = new google.maps.Circle({ center: { lat: newCenter.lat(), lng: newCenter.lng(), }, radius: 10000, // 10km in meters. }); }); } initMap();
CSS
html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 100%; } gmp-basic-place-autocomplete { position: absolute; height: 30px; width: 500px; top: 10px; left: 10px; box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2); color-scheme: light; border-radius: 10px; }
HTML
<html> <head> <title>Basic Place Autocomplete map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); </script> </head> <body> <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID"> <gmp-basic-place-autocomplete slot="control-inline-start-block-start"></gmp-basic-place-autocomplete> </gmp-map> <!-- Use inline styles to configure the Place Details Compact element because it will be placed within the info window, and info window content is inside the shadow DOM when using <gmp-map> --> <gmp-place-details-compact orientation="horizontal" style="width: 400px; display: none; border: none; padding: 0; margin: 0; background-color: transparent; color-scheme: light;"> <gmp-place-details-place-request></gmp-place-details-place-request> <gmp-place-standard-content></gmp-place-standard-content> </gmp-place-details-compact> </body> </html>