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

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

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

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

Предпосылки

Чтобы использовать Place Autocomplete, необходимо включить "Places 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.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

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

Посмотреть полный пример кода

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

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

Машинопись

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
placeAutocomplete.locationBias = center;

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
placeAutocomplete.locationBias = center;
const card = document.getElementById('place-autocomplete-card');
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

Посмотреть полный пример кода

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

По умолчанию Place Autocomplete представляет все типы мест, смещенные для прогнозов вблизи местоположения пользователя, и извлекает все доступные поля данных для выбранного пользователем места. Установите 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 .

Результаты поиска места смещения

Bias размещает результаты поиска в круговой области, используя свойство 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.
//@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.
//@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.
//@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) {
        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;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@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) {
        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;
});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.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    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.
    //@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.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    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.
    //@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

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

JSFiddle.net

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

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

Машинопись

let map: google.maps.Map;
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.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center,
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';
    placeAutocomplete.locationBias = center;

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

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

    // Add the gmp-placeselect listener, and display the results on the map.
    //@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) {
            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;
    });
}

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

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
    ]);
    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map'), {
        center,
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';
    placeAutocomplete.locationBias = center;
    const card = document.getElementById('place-autocomplete-card');
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //@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) {
            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;
    });
}
// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        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. 
 */
#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>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="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

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

JSFiddle.net

Используйте компонент «Выбор места»

Компонент выбора места — это текстовый ввод, который позволяет конечным пользователям искать определенный адрес или место с помощью автозаполнения. Он является частью Расширенной библиотеки компонентов , набора веб-компонентов, которые помогают разработчикам быстрее создавать лучшие карты и функции определения местоположения.

Используйте конфигуратор Place Picker для создания встраиваемого кода для пользовательского компонента Place Picker, а затем экспортируйте его для использования с популярными фреймворками, такими как React и Angular, или вообще без фреймворка.

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

Предпосылки

Что нового

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

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

Машинопись

JavaScript

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

Машинопись

JavaScript

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

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

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

Результаты поиска места смещения

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

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

Машинопись

JavaScript

Машинопись

JavaScript

Примеры карт

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

Машинопись

JavaScript

CSS

HTML

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

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

Машинопись

JavaScript

CSS

HTML

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

Используйте компонент «Выбор места»

Разместить виджет автозаполнения Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Предпосылки

Что нового

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

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

Машинопись

JavaScript

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

Машинопись

JavaScript

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

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

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

Результаты поиска места смещения

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

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

Машинопись

JavaScript

Машинопись

JavaScript

Примеры карт

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

Машинопись

JavaScript

CSS

HTML

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

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

Машинопись

JavaScript

CSS

HTML

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

Используйте компонент «Выбор места»

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