Đặt tiện ích Tự động hoàn thành

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Tiện ích tự động hoàn thành địa điểm tạo một trường nhập văn bản, cung cấp các đề xuất về địa điểm trong danh sách chọn trên giao diện người dùng và trả về thông tin chi tiết về địa điểm để phản hồi lựa chọn của người dùng. Sử dụng Tiện ích tự động hoàn thành địa điểm để nhúng một giao diện người dùng tự động hoàn thành hoàn chỉnh và độc lập trên trang web của bạn.

Điều kiện tiên quyết

Để sử dụng tính năng Tự động hoàn thành địa điểm, bạn phải bật "Places API (mới)" trong 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.

Tính năng mới

Tính năng Place Autocomplete đã được cải thiện theo những cách sau:

  • Giao diện người dùng của tiện ích Tự động hoàn thành hỗ trợ bản địa hoá theo khu vực (bao gồm cả ngôn ngữ RTL), cho phần giữ chỗ nhập văn bản, biểu trưng danh sách dự đoán và các dự đoán về địa điểm.
  • Nâng cao khả năng hỗ trợ tiếp cận, bao gồm cả tính năng hỗ trợ trình đọc màn hình và tương tác bằng bàn phím.
  • Tiện ích Autocomplete (Tự động hoàn thành) trả về lớp Place mới để đơn giản hoá việc xử lý đối tượng được trả về.
  • Hỗ trợ tốt hơn cho thiết bị di động và màn hình nhỏ.
  • Hiệu suất tốt hơn và giao diện đồ hoạ cải thiện.

Thêm tiện ích Tự động hoàn thành

Tiện ích Autocomplete 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ề thông tin chi tiết về địa điểm để phản hồi lượt nhấp của người dùng bằng cách sử dụng trình nghe gmp-select. Phần này hướng dẫn bạn cách thêm một tiện ích tự động hoàn thành vào trang web hoặc Google Maps.

Thêm tiện ích Tự động hoàn thành vào trang web

Để thêm tiện ích Tự động hoàn thành vào một trang web, hãy tạo một google.maps.places.PlaceAutocompleteElement mới và nối tiện ích đó vào trang như trong ví dụ sau:

TypeScript

// Request needed libraries.
(await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
    {}
);
document.body.appendChild(placeAutocomplete);
index.ts

JavaScript

// Request needed libraries.
(await google.maps.importLibrary('places'));
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
document.body.appendChild(placeAutocomplete);
index.js

Xem ví dụ đầy đủ về mã

Thêm tiện ích Tự động hoàn thành vào bản đồ

Nếu địa chỉ thanh toán của bạn nằm bên ngoài Khu vực kinh tế Châu Âu (EEA), bạn cũng có thể sử dụng tiện ích Tự động hoàn thành với Google Maps.

Để thêm một tiện ích Tự động hoàn thành vào bản đồ, hãy tạo một thực thể google.maps.places.PlaceAutocompleteElement mới, nối PlaceAutocompleteElement vào div và đẩy thực thể đó lên bản đồ dưới dạng một chế độ kiểm soát tuỳ chỉnh, như trong ví dụ sau:

TypeScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.ts

JavaScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.js

Xem ví dụ đầy đủ về mã

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 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 và tìm nạp tất cả các trường dữ liệu có sẵn cho địa điểm mà người dùng đã chọn. Đặt PlaceAutocompleteElementOptions để 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 tiện ích Tự động hoàn thành 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ả sẽ khiến tiện ích Tự động hoàn thành 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 khả năng 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 di chuyển 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 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 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.PlaceAutocompleteElement({
  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.PlaceAutocompleteElement({
  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.PlaceAutocompleteElement({
  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.PlaceAutocompleteElement({
  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ận thông tin chi tiết về địa điểm

Để nhận thông tin chi tiết về địa điểm cho địa điểm đã chọn, hãy thêm một trình nghe gmp-select vào PlaceAutocompleteElement, như trong ví dụ sau:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});
index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
});
index.js

Xem ví dụ đầy đủ về mã

Trong ví dụ trước, trình nghe sự kiện trả về một đối tượng thuộc lớp Place. Gọi place.fetchFields() để lấy các trường dữ liệu Chi tiết về địa điểm cần thiết cho ứng dụng của bạn.

Trình nghe trong ví dụ tiếp theo yêu cầu thông tin về địa điểm và hiển thị thông tin đó trên bản đồ.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
  //prettier-ignore
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ['displayName', 'formattedAddress', 'location'],
    });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      innerMap.fitBounds(place.viewport);
    } else {
      innerMap.setCenter(place.location);
      innerMap.setZoom(17);
    }

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  }
);
index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        innerMap.fitBounds(place.viewport);
    }
    else {
        innerMap.setCenter(place.location);
        innerMap.setZoom(17);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});
index.js

Xem ví dụ đầy đủ về mã

Bản đồ ví dụ

Phần này chứa mã hoàn chỉnh cho các bản đồ mẫu xuất hiện trên trang này.

Phần tử tự động hoàn thành

Ví dụ này thêm một tiện ích Tự động hoàn thành vào một trang web và hiển thị kết quả cho từng địa điểm được chọn.

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
        {}
    );
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
    document.body.appendChild(placeAutocomplete);
    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);
    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);
    // Add the gmp-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

style.css

HTML

<html>
    <head>
        <title>Place Autocomplete element</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- 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>
    </body>
</html>
index.html

Dùng thử mẫu

Bản đồ tự động hoàn thành

Ví dụ này cho bạn biết cách thêm một tiện ích Tự động hoàn thành vào một bản đồ Google.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
      const place = placePrediction.toPlace();
      await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
      });

      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
        innerMap.fitBounds(place.viewport);
      } else {
        innerMap.setCenter(place.location);
        innerMap.setZoom(17);
      }

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      content.appendChild(addressText);

      updateInfoWindow(content, place.location);
      marker.position = place.location;
    }
  );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        }
        else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        content.appendChild(addressText);
        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}
// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: large;
    font-weight: bold;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}

style.css

HTML

<html>
    <head>
        <title>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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

Dùng thử mẫu

Tối ưu hoá tính năng Tự động hoàn thành (Mới)

Phần này mô tả các phương pháp hay nhất giúp bạn khai thác tối đa dịch vụ Tự động hoàn thành (Mới).

Dưới đây là một số nguyên tắc chung:

  • Cách nhanh nhất để phát triển giao diện người dùng hoạt động là sử dụng tiện ích Tự động hoàn thành (Mới) của Maps JavaScript API, tiện ích Tự động hoàn thành (Mới) của Places SDK cho Android hoặc tiện ích Tự động hoàn thành (Mới) của Places SDK cho iOS.
  • Ngay từ đầu, hãy hiểu rõ các trường dữ liệu quan trọng của tính năng Tự động hoàn thành (Mới).
  • Các trường thiên vị vị trí và hạn chế vị trí là không bắt buộc nhưng có thể ảnh hưởng đáng kể đến hiệu suất của tính năng tự động hoàn thành.
  • Sử dụng tính năng xử lý lỗi để đảm bảo ứng dụng của bạn giảm hiệu suất một cách thích hợp nếu API trả về lỗi.
  • Đảm bảo ứng dụng của bạn xử lý khi không có lựa chọn nào và cung cấp cho người dùng cách để tiếp tục.

Các phương pháp hay nhất để tối ưu hoá chi phí

Tối ưu hoá chi phí cơ bản

Để tối ưu hoá chi phí sử dụng dịch vụ Autocomplete (New), hãy sử dụng mặt nạ trường trong các tiện ích Place Details (New) và Autocomplete (New) để chỉ trả về các trường dữ liệu Autocomplete (New) mà bạn cần.

Tối ưu hoá chi phí nâng cao

Hãy cân nhắc việc triển khai theo chương trình tính năng Tự động hoàn thành (Mới) để truy cập vào SKU: Giá yêu cầu Tự động hoàn thành và yêu cầu kết quả Geocoding API về địa điểm đã chọn thay vì Chi tiết về địa điểm (Mới). Mức giá theo yêu cầu kết hợp với Geocoding API sẽ tiết kiệm chi phí hơn so với mức giá theo phiên (dựa trên phiên) nếu cả hai điều kiện sau đây đều được đáp ứng:

  • Nếu bạn chỉ cần vĩ độ/kinh độ hoặc địa chỉ của địa điểm mà người dùng đã chọn, thì Geocoding API sẽ cung cấp thông tin này với ít hơn một lệnh gọi Place Details (New).
  • Nếu người dùng chọn một cụm từ dự đoán tự động hoàn thành trong trung bình 4 yêu cầu dự đoán Tự động hoàn thành (Mới) hoặc ít hơn, thì mức giá theo yêu cầu có thể tiết kiệm chi phí hơn so với mức giá theo phiên.
Để được trợ giúp chọn chế độ triển khai tính năng Tự động hoàn thành (Mới) phù hợp với nhu cầu của bạn, hãy chọn thẻ tương ứng với câu trả lời của bạn cho câu hỏi sau.

Ứng dụng của bạn có yêu cầu thông tin nào khác ngoài địa chỉ và vĩ độ/kinh độ của kết quả dự đoán đã chọn không?

Có, cần thêm thông tin chi tiết

Sử dụng tính năng Tự động hoàn thành dựa trên phiên (Mới) với tính năng Chi tiết về địa điểm (Mới).
Vì ứng dụng của bạn yêu cầu có Chi tiết về địa điểm (Mới), chẳng hạn như tên địa điểm, trạng thái kinh doanh hoặc giờ mở cửa, nên việc triển khai tính năng Tự động hoàn thành (Mới) phải sử dụng mã thông báo phiên (theo phương thức lập trình hoặc được tích hợp vào các tiện ích JavaScript, Android hoặc iOS) cho mỗi phiên, cộng với các SKU Địa điểm hiện hành, tuỳ thuộc vào trường dữ liệu địa điểm mà bạn yêu cầu.1

Triển khai tiện ích
Tính năng quản lý phiên được tự động tích hợp vào các tiện ích JavaScript, Android hoặc iOS. Điều này bao gồm cả yêu cầu Autocomplete (Mới) và yêu cầu Place Details (Mới) đối với cụm từ dự đoán đã chọn. Hãy nhớ chỉ định tham số fields để đảm bảo bạn chỉ yêu cầu các trường dữ liệu Autocomplete (Mới) mà bạn cần.

Triển khai theo chương trình
Sử dụng mã thông báo phiên với các yêu cầu Tự động hoàn thành (Mới). Khi yêu cầu Thông tin chi tiết về địa điểm (Mới) cho kết quả dự đoán đã chọn, hãy thêm các tham số sau:

  1. Mã địa điểm trong phản hồi của tính năng Tự động hoàn thành (Mới)
  2. Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành (Mới)
  3. Tham số fields chỉ định các trường dữ liệu Tự động hoàn thành (Mới) mà bạn cần

Không, chỉ cần địa chỉ và vị trí

Geocoding API có thể là một lựa chọn tiết kiệm chi phí hơn so với Place Details (Mới) cho ứng dụng của bạn, tuỳ thuộc vào hiệu suất sử dụng tính năng Autocomplete (Mới). Mức độ hiệu quả của tính năng Tự động hoàn thành (Mới) của mỗi ứng dụng sẽ khác nhau tuỳ thuộc vào nội dung mà người dùng đang nhập, vị trí sử dụng ứng dụng và việc bạn đã triển khai các phương pháp hay nhất để tối ưu hoá hiệu suất hay chưa.

Để trả lời câu hỏi sau, hãy phân tích số lượng ký tự trung bình mà người dùng nhập trước khi chọn một đề xuất của tính năng Tự động hoàn thành (Mới) trong ứng dụng của bạn.

Trung bình, người dùng của bạn có chọn một cụm từ gợi ý Tự động hoàn thành (Mới) trong tối đa 4 yêu cầu không?

Có

Triển khai tính năng Tự động hoàn thành (Mới) theo phương thức lập trình mà không cần mã thông báo phiên và gọi Geocoding API trên kết quả dự đoán được chọn về địa điểm.
Geocoding API cung cấp địa chỉ và toạ độ vĩ độ/kinh độ. Thực hiện 4 yêu cầu Tự động hoàn thành cộng với một lệnh gọi Geocoding API về cụm từ gợi ý được chọn cho địa điểm sẽ ít tốn kém hơn so với chi phí Autocomplete (Mới) cho mỗi phiên.1

Hãy cân nhắc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng nhận được thông tin dự đoán mà họ đang tìm kiếm chỉ trong vài ký tự.

Không

Sử dụng tính năng Tự động hoàn thành dựa trên phiên (Mới) với tính năng Chi tiết về địa điểm (Mới).
Vì số lượng yêu cầu trung bình mà bạn dự kiến thực hiện trước khi người dùng chọn một kết quả dự đoán của tính năng Tự động hoàn thành (Mới) vượt quá chi phí của mức giá theo phiên, nên việc triển khai tính năng Tự động hoàn thành (Mới) của bạn phải sử dụng mã thông báo phiên cho cả yêu cầu Tự động hoàn thành (Mới) và yêu cầu Chi tiết về địa điểm (Mới) được liên kết cho mỗi phiên. 1

Triển khai tiện ích
Tính năng quản lý phiên được tự động tích hợp vào các tiện ích JavaScript, Android hoặc iOS. Trong đó bao gồm cả yêu cầu Autocomplete (Mới) và yêu cầu Place Details (New) đối với cụm từ dự đoán đã chọn. Hãy nhớ chỉ định tham số fields để đảm bảo bạn chỉ yêu cầu những trường cần thiết.

Triển khai theo chương trình
Sử dụng mã thông báo phiên với các yêu cầu Tự động hoàn thành (Mới). Khi yêu cầu Thông tin chi tiết về địa điểm (Mới) cho kết quả dự đoán đã chọn, hãy thêm các tham số sau:

  1. Mã địa điểm trong phản hồi của tính năng Tự động hoàn thành (Mới)
  2. Mã thông báo phiên được dùng trong yêu cầu Tự động hoàn thành (Mới)
  3. Tham số fields chỉ định các trường như địa chỉ và hình học

Cân nhắc trì hoãn các yêu cầu về tính năng Tự động hoàn thành (Mới)
Bạn có thể áp dụng các chiến lược như trì hoãn yêu cầu về tính năng Tự động hoàn thành (Mới) cho đến khi người dùng nhập 3 hoặc 4 ký tự đầu tiên để ứng dụng của bạn đưa ra ít yêu cầu hơn. Ví dụ: việc đưa ra yêu cầu Tự động hoàn thành (Mới) cho mỗi ký tự sau khi người dùng nhập ký tự thứ ba có nghĩa là nếu người dùng nhập 7 ký tự rồi chọn một cụm từ dự đoán mà bạn đưa ra một yêu cầu Geocoding API, thì tổng chi phí sẽ là 4 yêu cầu Tự động hoàn thành (Mới) + Geocoding.1

Nếu việc trì hoãn các yêu cầu có thể giúp bạn giảm số yêu cầu trung bình theo chương trình xuống dưới 4, thì bạn có thể làm theo hướng dẫn về việc triển khai Tính năng tự động hoàn thành hiệu suất cao (Mới) bằng Geocoding API. Xin lưu ý rằng người dùng có thể coi việc trì hoãn các yêu cầu là độ trễ. Người dùng có thể mong đợi nhìn thấy các dự đoán với mỗi lần nhấn phím mới.

Hãy cân nhắc việc áp dụng các phương pháp hay nhất về hiệu suất để giúp người dùng nhận được thông tin dự đoán mà họ đang tìm kiếm chỉ bằng ít ký tự hơn.

  1. Để biết chi phí, hãy xem Danh sách giá của Nền tảng Google Maps.

Các phương pháp hay nhất về hiệu suất

Các nguyên tắc sau đây mô tả những cách tối ưu hoá hiệu suất của tính năng Tự động hoàn thành (Mới):

  • Thêm các quy định hạn chế về quốc gia, ưu tiên vị trí và (đối với các cách triển khai có lập trình) lựa chọn ưu tiên ngôn ngữ vào chế độ triển khai Autocomplete (New) (Tự động hoàn thành (Mới)). Không cần lựa chọn ưu tiên về ngôn ngữ đối với các tiện ích vì chúng chọn lựa chọn ưu tiên về ngôn ngữ từ trình duyệt hoặc thiết bị di động của người dùng.
  • Nếu tính năng Tự động hoàn thành (Mới) đi kèm với bản đồ, bạn có thể điều chỉnh vị trí theo khung hiển thị bản đồ.
  • Trong trường hợp người dùng không chọn một trong các cụm từ gợi ý của tính năng Tự động hoàn thành (Mới), thường là do không có cụm từ gợi ý nào là địa chỉ kết quả mà họ muốn, bạn có thể sử dụng lại nội dung đầu vào ban đầu của người dùng để cố gắng nhận được kết quả phù hợp hơn:
    • Nếu bạn chỉ muốn người dùng nhập thông tin địa chỉ, hãy sử dụng lại thông tin đầu vào ban đầu của người dùng trong một lệnh gọi đến Geocoding API.
    • Nếu bạn muốn người dùng nhập cụm từ tìm kiếm cho một địa điểm cụ thể theo tên hoặc địa chỉ, hãy sử dụng yêu cầu Chi tiết về địa điểm (Mới). Nếu chỉ muốn nhận kết quả ở một khu vực cụ thể, hãy sử dụng tính năng thiên vị vị trí.
    Các trường hợp khác mà bạn nên quay lại dùng Geocoding API bao gồm:
    • Người dùng nhập địa chỉ của một phần trong cơ sở, chẳng hạn như địa chỉ của các căn hộ hoặc đơn vị cụ thể trong một toà nhà. Ví dụ: địa chỉ "Stroupežnického 3191/17, Praha" của Cộng hoà Séc sẽ trả về một cụm từ gợi ý một phần trong tính năng Tự động hoàn thành (Mới).
    • Người dùng nhập địa chỉ có tiền tố đoạn đường như "23-30 29th St, Queens" ở Thành phố New York hoặc "47-380 Kamehameha Hwy, Kaneohe" trên đảo Kauai ở Hawaii.

Thiên vị về vị trí

Điều chỉnh kết quả cho một khu vực cụ thể bằng cách truyền tham số location và tham số radius. Thao tác này hướng dẫn tính năng Tự động hoàn thành (Mới) ưu tiên hiển thị kết quả trong khu vực đã xác định. Kết quả bên ngoài khu vực đã xác định vẫn có thể xuất hiện. Bạn có thể sử dụng tham số components để lọc kết quả và chỉ cho thấy những địa điểm trong một quốc gia cụ thể.

Hạn chế về vị trí

Hạn chế kết quả ở một khu vực cụ thể bằng cách truyền tham số locationRestriction.

Bạn cũng có thể giới hạn kết quả ở khu vực do location và tham số radius xác định bằng cách thêm tham số locationRestriction. Thao tác này hướng dẫn tính năng Autocomplete (Mới) chỉ trả về kết quả trong khu vực đó.