Базовый элемент автодополнения Place

Выберите платформу: Android iOS JavaScript

Компонент BasicPlaceAutocompleteElement создает текстовое поле ввода, предоставляет варианты мест в выпадающем списке пользовательского интерфейса и возвращает идентификатор выбранного места.

Элемент Basic Place Autocomplete проще в реализации, чем PlaceAutocompleteElement , и отличается от него следующими особенностями:

  • Элемент Basic Place Autocomplete возвращает объект Place, содержащий только идентификатор места , а не объект PlacePrediction . Вы можете использовать возвращенный идентификатор места напрямую с элементом Places UI Kit Details , чтобы получить дополнительные сведения о месте, тогда как объект PlacePrediction сначала необходимо преобразовать в идентификатор места.
  • Для использования элемента «Базовое автозаполнение мест» не требуется включать API мест в консоли Google Cloud.
  • Элемент Basic Place Autocomplete очищает поле ввода, когда пользователь выбирает предполагаемое место.

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

Для использования элемента «Базовое автозаполнение мест» необходимо включить Places UI Kit в вашем проекте Google Cloud. Подробности см. в разделе «Начало работы» .

Добавить элемент автозаполнения "Базовое местоположение".

В этом разделе показано, как добавить элемент «Базовое автозаполнение» на веб-страницу или карту.

Добавьте элемент «Базовое автозаполнение» на веб-страницу.

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

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

Добавить элемент «Базовое автозаполнение» на карту

Чтобы добавить элемент Basic Autocomplete на карту, добавьте элемент BasicPlaceAutocompleteElement к элементу gmp-map и задайте его положение с помощью атрибута slot , как показано в следующем примере:

<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>
index.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройте элемент «Запрос на размещение».

Добавьте обработчик событий, который будет обновлять элемент «Запрос на размещение», когда пользователь выберет прогноз:

// 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;
});
index.js

В этом примере показано, как добавить элемент «Базовое автозаполнение» на карту 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();
index.js

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;
}
style.css

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>
index.html

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