Эта страница переведена с помощью Cloud Translation API.

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

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

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

В отличие от PlaceAutocompleteElement , упрощённый элемент Basic Place Autocomplete очищает поле ввода, когда пользователь выбирает подсказку места, а также возвращает объект Place , содержащий только идентификатор места , а не объект PlacePrediction . Используйте этот идентификатор места с элементом Places UI Kit Details для получения дополнительной информации о месте.

Предпосылки

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

Добавить элемент Basic Place Autocomplete

Элемент Basic Place Autocomplete создаёт текстовое поле ввода, предоставляет подсказки для мест в списке выбора в пользовательском интерфейсе и возвращает идентификатор места в ответ на выбор пользователя с помощью события gmp-select . В этом разделе показано, как добавить элемент Basic Place Autocomplete на веб-страницу или карту.

Добавить элемент базового автозаполнения на веб-страницу

Чтобы добавить элемент 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 , добавьте его к div и поместите на карту как пользовательский элемент управления, как показано в следующем примере:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

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

Если вы не укажете границы или область просмотра карты, 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);
    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 mapDiv = document.getElementById('map-container');
const center = { lat: 40.749933, lng: -73.98633 }; // New York City
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 { Map, InfoWindow } = await google.maps.importLibrary('maps');
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Create the map object with specified options.
    const map = new Map(mapDiv, {
        zoom: 12,
        center: center,
        mapId: 'DEMO_MAP_ID',
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        closeButton: false,
        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);
        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);
        placeDetailsElement.focus();
    });
    // 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;
}

#map-container {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  width: 500px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  min-width: 300px;
  max-height: 300px;
  border: none;
  background-color: #ffffff;
  color-scheme: light;
}

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>
  </head>
  <body>
    <div id="map-container"></div>
    <gmp-basic-place-autocomplete
      slot="control-inline-start-block-start"
    ></gmp-basic-place-autocomplete>
    <gmp-place-details-compact orientation="horizontal">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>

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

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

JSFiddle.net