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

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.

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

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

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

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

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

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });

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

JavaScript 

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

CSS 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  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;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
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>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

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

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