Разместить виджет автозаполнения

Разработчики из Европейской экономической зоны (ЕЭЗ)

Виджет автозаполнения мест создает текстовое поле ввода, предоставляет варианты мест в выпадающем списке пользовательского интерфейса и возвращает подробную информацию о месте в ответ на выбор пользователя. Используйте виджет автозаполнения мест, чтобы встроить на свою веб-страницу полноценный автозаполняемый пользовательский интерфейс.

Предварительные требования

Для использования функции автозаполнения мест необходимо включить «API мест (новый)» в вашем проекте Google Cloud. Подробности см. в разделе «Начало работы ».

Что нового

Функция автозаполнения мест была улучшена следующим образом:

  • Виджет автозаполнения поддерживает региональную локализацию (включая языки с написанием справа налево) для текстового поля ввода, логотипа списка подсказок и подсказок местоположения.
  • Улучшена доступность, включая поддержку программ чтения с экрана и взаимодействия с клавиатурой.
  • Виджет автозаполнения возвращает новый класс Place для упрощения обработки возвращаемого объекта.
  • Улучшена поддержка мобильных устройств и экранов небольшого размера.
  • Повышенная производительность и улучшенное графическое оформление.

Добавить виджет автозаполнения

Виджет автозаполнения создает текстовое поле ввода, предоставляет варианты мест в виде выпадающего списка и возвращает подробную информацию о месте в ответ на щелчок пользователя с помощью обработчика событий gmp-select . В этом разделе показано, как добавить виджет автозаполнения на веб-страницу или карту Google.

Добавьте виджет автозаполнения на веб-страницу.

Чтобы добавить виджет автозаполнения на веб-страницу, создайте новый элемент google.maps.places.PlaceAutocompleteElement и добавьте его на страницу, как показано в следующем примере:

Машинопись 

// 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

См. полный пример кода.

Добавьте виджет автозаполнения на карту.

Если ваш платежный адрес находится за пределами Европейской экономической зоны (ЕЭЗ) , вы также можете использовать виджет автозаполнения с картой Google.

Чтобы добавить виджет автозаполнения на карту, создайте новый экземпляр google.maps.places.PlaceAutocompleteElement , добавьте PlaceAutocompleteElement в div и разместите его на карте в качестве пользовательского элемента управления, как показано в следующем примере:

Машинопись 

// 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

См. полный пример кода.

Ограничить прогнозы автозаполнения

По умолчанию функция автозаполнения мест отображает все типы мест, отдавая предпочтение прогнозам, расположенным рядом с местоположением пользователя, и извлекает все доступные поля данных для выбранного пользователем места. Установите параметр PlaceAutocompleteElementOptions , чтобы отображать более релевантные прогнозы, ограничивая или изменяя результаты.

Ограничение результатов приводит к тому, что виджет автозаполнения игнорирует любые результаты, находящиеся за пределами области ограничения. Обычно результаты ограничиваются границами карты. Смещение результатов приводит к тому, что виджет автозаполнения отображает результаты в пределах указанной области, но некоторые совпадения могут находиться за ее пределами.

Если вы не укажете границы или область просмотра карты, API попытается определить местоположение пользователя по его IP-адресу и сместит результаты в сторону этого местоположения. По возможности указывайте границы. В противном случае разные пользователи могут получать разные прогнозы. Кроме того, для общего улучшения прогнозов важно указать разумную область просмотра, например, ту, которую вы устанавливаете, перемещая или масштабируя карту, или область просмотра, заданную разработчиком на основе местоположения устройства и радиуса. Если радиус недоступен, 5 км считается разумным значением по умолчанию для функции автозаполнения мест. Не устанавливайте область просмотра с нулевым радиусом (одна точка), область просмотра шириной всего несколько метров (менее 100 м) или область просмотра, охватывающую весь земной шар.

Ограничить поиск мест по стране

Чтобы ограничить поиск по регионам одной или несколькими конкретными странами, используйте свойство includedRegionCodes для указания кода(ов) страны, как показано в следующем фрагменте кода:

const pac = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Ограничить поиск мест пределами карты.

Чтобы ограничить поиск мест пределами границ карты, используйте свойство locationRestrictions для добавления этих границ, как показано в следующем фрагменте кода:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

При ограничении области действия границами карты обязательно добавьте обработчик событий, который будет обновлять границы при их изменении:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Чтобы снять ограничение locationRestriction , установите для него значение null .

Результаты поиска по предвзятому месту

Чтобы результаты поиска были смещены в круглую область, используйте свойство locationBias и укажите радиус, как показано здесь:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Чтобы удалить locationBias , установите для него значение null .

Ограничить результаты поиска мест определенными типами.

Ограничьте результаты поиска мест определенными типами мест, используя свойство includedPrimaryTypes и указав один или несколько типов, как показано здесь:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Полный список поддерживаемых типов см. в таблицах типов мест A и B.

Получить подробную информацию о месте.

Чтобы получить подробную информацию о выбранном месте, добавьте обработчик события gmp-select к элементу PlaceAutocompleteElement , как показано в следующем примере:

Машинопись 

// 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

См. полный пример кода.

В приведенном выше примере обработчик событий возвращает объект класса Place . Вызовите place.fetchFields() , чтобы получить поля данных Place Details, необходимые для вашего приложения.

В следующем примере слушатель запрашивает информацию о местоположении и отображает её на карте.

Машинопись 

// 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

См. полный пример кода.

Примеры карт

В этом разделе представлен полный код для примеров карт, показанных на этой странице.

Элемент автозаполнения

В этом примере на веб-страницу добавляется виджет автозаполнения, который отображает результаты для каждого выбранного места.

Машинопись 

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

Попробуйте образец

Автозаполнение карты

В этом примере показано, как добавить виджет автозаполнения на карту Google.

Машинопись 

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

Попробуйте образец

Оптимизация автозаполнения (новая функция)

В этом разделе описаны лучшие практики, которые помогут вам максимально эффективно использовать сервис автозаполнения (новый).

Вот несколько общих рекомендаций:

  • Самый быстрый способ разработать работающий пользовательский интерфейс — использовать виджет автозаполнения Maps JavaScript API (новый) , виджет автозаполнения Places SDK для Android (новый) или виджет автозаполнения Places SDK для iOS (новый) .
  • С самого начала разберитесь с основными полями автозаполнения (новыми).
  • Поля, указывающие на географическое смещение и ограничение местоположения, являются необязательными, но могут существенно повлиять на эффективность автозаполнения.
  • Используйте обработку ошибок, чтобы ваше приложение корректно работало, если API возвращает ошибку.
  • Убедитесь, что ваше приложение обрабатывает ситуацию, когда выбор отсутствует, и предлагает пользователям способ продолжить.

Передовые методы оптимизации затрат

Базовая оптимизация затрат

Для оптимизации затрат на использование сервиса автозаполнения (новый), используйте маски полей в виджетах «Подробности размещения» (новый) и «Автозаполнение» (новый), чтобы возвращать только необходимые поля данных для автозаполнения (новый).

Расширенная оптимизация затрат

Рассмотрите возможность программной реализации автозаполнения (новая функция) для доступа к информации о ценах SKU: Autocomplete Request и запроса результатов геокодирования API для выбранного места вместо получения подробной информации о месте (новая функция). Ценообразование за запрос в сочетании с геокодированием API более экономически выгодно, чем ценообразование за сессию (на основе сессии), если выполняются оба следующих условия:

  • Если вам нужны только широта/долгота или адрес выбранного пользователем места, API геокодирования предоставит эту информацию дешевле, чем вызов функции «Подробная информация о месте (новая)».
  • Если пользователи выбирают вариант автозаполнения в среднем не более чем в четырех запросах на автозаполнение (новое), то ценообразование за запрос может оказаться более экономически выгодным, чем ценообразование за сессию.
Чтобы получить помощь в выборе подходящей вам реализации автозаполнения (новая версия), выберите вкладку, соответствующую вашему ответу на следующий вопрос.

Требует ли ваше приложение какой-либо дополнительной информации, помимо адреса и широты/долготы выбранного прогноза?

Да, требуется более подробная информация.

Используйте автозаполнение на основе сессий (новая функция) с подробными сведениями о месте (новая функция).
Поскольку вашему приложению требуются подробные сведения о месте (новые), такие как название места, статус предприятия или часы работы, ваша реализация автозаполнения (новая) должна использовать токен сессии (программно или встроенный в виджеты JavaScript , Android или iOS ) для каждой сессии, а также соответствующие SKU мест, в зависимости от того, какие поля данных о месте вы запрашиваете. 1

Реализация виджета
Управление сессиями автоматически встраивается в виджеты JavaScript , Android или iOS . Это включает в себя как запросы автозаполнения (новые), так и запросы добавления подробной информации (новые) для выбранного прогноза. Обязательно укажите параметр fields , чтобы гарантировать, что вы запрашиваете только необходимые поля данных для автозаполнения (новые).

Программная реализация
Используйте токен сессии в запросах автозаполнения (новые). При запросе подробной информации о выбранном прогнозе (новые) укажите следующие параметры:

  1. Идентификатор места из ответа автозаполнения (нового).
  2. Токен сессии, используемый в запросе автозаполнения (нового запроса).
  3. Параметр fields указывает необходимые поля данных для автозаполнения (создания новых данных).

Нет, достаточно указать адрес и местоположение.

API геокодирования может оказаться более экономически выгодным вариантом, чем функция «Подробная информация о месте» (новая функция), для вашего приложения, в зависимости от производительности функции автозаполнения (новая функция). Эффективность автозаполнения (новая функция) в каждом приложении варьируется в зависимости от того, что вводят пользователи, где используется приложение и были ли внедрены лучшие практики оптимизации производительности .

Чтобы ответить на следующий вопрос, проанализируйте, сколько символов пользователь в среднем вводит перед выбором варианта автозаполнения (нового) в вашем приложении.

В среднем, пользователи выбирают вариант автозаполнения (новый) в четырех или менее запросах?

Да

Реализуйте автозаполнение (новое) программным способом без использования токенов сессии и вызывайте API геокодирования для прогнозирования выбранного места.
API геокодирования предоставляет адреса и координаты широты/долготы. Выполнение четырех запросов автозаполнения плюс вызов API геокодирования для прогнозирования выбранного места обходится дешевле, чем стоимость автозаполнения (нового) за сессию. 1

Рассмотрите возможность применения лучших практик повышения производительности , чтобы помочь вашим пользователям получить желаемый результат, используя еще меньше символов.

Нет

Используйте автозаполнение на основе сессий (новая функция) с подробными сведениями о месте (новая функция).
Поскольку среднее количество запросов, которые, как ожидается, будут отправлены до того, как пользователь выберет вариант автозаполнения (новый), превышает стоимость за сессию, ваша реализация автозаполнения (новый) должна использовать токен сессии как для запросов автозаполнения (новый), так и для связанного с ними запроса сведений о месте (новый) за сессию . 1

Реализация виджета
Управление сессиями автоматически встраивается в виджеты JavaScript , Android или iOS . Это включает в себя как запросы автозаполнения (новые), так и запросы добавления подробностей (новые) для выбранного прогноза. Обязательно укажите параметр fields , чтобы гарантировать запрос только необходимых полей.

Программная реализация
Используйте токен сессии в запросах автозаполнения (новые). При запросе подробной информации о выбранном прогнозе (новые) укажите следующие параметры:

  1. Идентификатор места из ответа автозаполнения (нового).
  2. Токен сессии, используемый в запросе автозаполнения (нового запроса).
  3. Параметр fields задает такие поля, как адрес и геометрия.

Рассмотрите возможность отложить запросы автозаполнения (новые).
Вы можете использовать такие стратегии, как задержка запроса автозаполнения (нового варианта) до тех пор, пока пользователь не введёт первые три или четыре символа, чтобы ваше приложение выполняло меньше запросов. Например, если запросы автозаполнения (нового варианта) выполняются для каждого символа после того, как пользователь введёт третий символ, это означает, что если пользователь введёт семь символов, а затем выберет предсказание, для которого вы выполните один запрос к API геокодирования, общая стоимость составит 4 запроса автозаполнения (нового варианта) + геокодирование. 1

Если задержка запросов позволяет снизить среднее количество программных запросов до менее чем четырех, вы можете следовать рекомендациям по повышению производительности автозаполнения (новое) с использованием API геокодирования . Обратите внимание, что задержка запросов может восприниматься пользователем как задержка, поскольку он может ожидать увидеть подсказки при каждом новом нажатии клавиши.

Рассмотрите возможность применения лучших практик повышения производительности , чтобы помочь вашим пользователям получить желаемый результат за меньшее количество символов.

  1. Информацию о стоимости можно найти в прайс-листах платформы Google Maps .

лучшие практики повышения производительности

В следующих рекомендациях описаны способы оптимизации работы функции автозаполнения (нового кода):

  • Добавьте в свою реализацию автозаполнения (новую) ограничения по странам, учет местоположения и (для программных реализаций) языковые предпочтения. Языковые предпочтения не требуются для виджетов, поскольку они получают языковые настройки из браузера или мобильного устройства пользователя.
  • Если функция автозаполнения (новая) сопровождается картой, вы можете задать местоположение в зависимости от области просмотра карты.
  • В ситуациях, когда пользователь не выбирает один из вариантов автозаполнения (новый), как правило, потому что ни один из этих вариантов не соответствует желаемому адресу, вы можете повторно использовать исходный ввод пользователя, чтобы попытаться получить более релевантные результаты:
    • Если вы ожидаете, что пользователь введёт только адресную информацию, используйте исходные данные, введённые пользователем, при вызове API геокодирования .
    • Если вы ожидаете, что пользователь будет вводить запросы для конкретного места по названию или адресу, используйте запрос «Подробная информация о месте (новый)». Если результаты ожидаются только в определенном регионе, используйте предвзятость по местоположению .
    Другие сценарии, когда лучше всего использовать API геокодирования, включают:
    • Пользователи вводят адреса подобъектов, например, адреса конкретных квартир или апартаментов в здании. Например, чешский адрес "Stroupežnického 3191/17, Praha" выдает частичное предсказание в функции автозаполнения (новая функция).
    • Пользователи вводят адреса с префиксами, обозначающими участки дорог, например, "23-30 29th St, Queens" в Нью-Йорке или "47-380 Kamehameha Hwy, Kaneohe" на острове Кауаи на Гавайях.

Смещение в сторону местоположения

Отображение результатов в заданной области осуществляется путем передачи параметра location и параметра radius . Это указывает функции автозаполнения (новая функция) отдавать предпочтение отображению результатов в пределах определенной области. Результаты за пределами заданной области также могут отображаться. Вы можете использовать параметр components для фильтрации результатов, чтобы отображать только те места, которые находятся в пределах указанной страны.

Ограничение местоположения

Ограничьте результаты указанной областью, передав параметр locationRestriction .

Вы также можете ограничить результаты областью, определенной параметром location и radius , добавив параметр locationRestriction . Это укажет функции автозаполнения (New) возвращать только результаты в пределах этой области.