Podstawowy element autouzupełniania miejsca

Wybierz platformę: Android iOS JavaScript

BasicPlaceAutocompleteElement tworzy pole wprowadzania tekstu, wyświetla w interfejsie listę prognoz dotyczących miejsc i zwraca identyfikator miejsca wybranego przez użytkownika.

W przeciwieństwie do elementu PlaceAutocompleteElement uproszczony element podstawowego autouzupełniania miejsc czyści pole wprowadzania, gdy użytkownik wybierze prognozę miejsca, i zwraca obiekt miejsca zawierający tylko identyfikator miejsca, a nie obiekt PlacePrediction. Użyj tego identyfikatora miejsca z elementem Places UI Kit Details, aby uzyskać dodatkowe szczegóły miejsca.

Wymagania wstępne

Aby używać elementu podstawowego autouzupełniania miejsc, musisz włączyć „Places UI Kit” w projekcie Google Cloud. Więcej informacji znajdziesz w artykule Pierwsze kroki.

Dodawanie elementu podstawowego autouzupełniania miejsc

Element podstawowego autouzupełniania miejsc tworzy pole wprowadzania tekstu, udostępnia prognozy miejsc na liście wyboru interfejsu i zwraca identyfikator miejsca w odpowiedzi na wybór użytkownika za pomocą zdarzenia gmp-select. W tej sekcji dowiesz się, jak dodać element podstawowego autouzupełniania do strony internetowej lub mapy.

Dodawanie do strony internetowej podstawowego elementu autouzupełniania

Aby dodać element BasicAutocomplete do strony internetowej, utwórz nowy element google.maps.places.BasicPlaceAutocompleteElement i dołącz go do strony, jak pokazano w tym przykładzie: 

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

Dodawanie do mapy podstawowego elementu autouzupełniania

Aby dodać do mapy element podstawowego autouzupełniania, utwórz nowy obiekt BasicPlaceAutocompleteElement, dołącz go do elementu div i dodaj do mapy jako element sterujący niestandardowy, jak pokazano w tym przykładzie:

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

Ograniczanie podpowiedzi autouzupełniania

Domyślnie podstawowe autouzupełnianie miejsc wyświetla wszystkie typy miejsc, z większym prawdopodobieństwem prognozowania w pobliżu lokalizacji użytkownika. Ustaw wartość BasicPlaceAutocompleteElementOptions, aby wyświetlać trafniejsze prognozy, ograniczając lub modyfikując wyniki.

Ograniczenie wyników powoduje, że element podstawowego autouzupełniania ignoruje wszystkie wyniki, które znajdują się poza obszarem ograniczenia. Często stosowaną praktyką jest ograniczanie wyników do granic mapy. W przypadku wyników z odchyleniem element BasicAutocomplete wyświetla wyniki w określonym obszarze, ale niektóre dopasowania mogą znajdować się poza tym obszarem.

Jeśli nie podasz żadnych granic ani widoku mapy, interfejs API spróbuje wykryć lokalizację użytkownika na podstawie jego adresu IP i dostosuje wyniki do tej lokalizacji. W miarę możliwości ustawiaj granice. W przeciwnym razie różni użytkownicy mogą otrzymywać różne prognozy. Aby ogólnie poprawić prognozy, warto też podać rozsądny obszar widoku, np. taki, który ustawisz, przesuwając lub powiększając mapę, albo obszar widoku ustawiony przez dewelopera na podstawie lokalizacji urządzenia i promienia. Jeśli promień jest niedostępny, w przypadku elementu podstawowego autouzupełniania miejsca za rozsądną wartość domyślną uznaje się 5 km. Nie ustawiaj widocznego obszaru o zerowym promieniu (pojedynczy punkt), widocznego obszaru o średnicy zaledwie kilku metrów (mniej niż 100 m) ani widocznego obszaru obejmującego cały świat.

Ograniczanie wyszukiwania miejsc według kraju

Aby ograniczyć wyszukiwanie miejsc do co najmniej jednego konkretnego kraju, użyj właściwości includedRegionCodes do określenia kodów krajów, jak pokazano w tym fragmencie kodu:

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

Ograniczanie wyszukiwania miejsc do granic mapy

Aby ograniczyć wyszukiwanie miejsc do granic mapy, użyj właściwości locationRestrictions, aby dodać granice, jak pokazano w tym fragmencie kodu:

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

Jeśli ograniczasz obszar do granic mapy, dodaj odbiornik, który będzie aktualizować granice, gdy się zmienią:

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

Aby usunąć locationRestriction, ustaw wartość null.

Odchylenia w wynikach wyszukiwania miejsc

Ustawiaj priorytet wyników wyszukiwania miejsc w określonym obszarze za pomocą właściwości locationBias i przekazuj promień, jak pokazano poniżej:

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

Aby usunąć locationBias, ustaw wartość null.

Ograniczanie wyników wyszukiwania miejsc do określonych typów

Ogranicz wyniki wyszukiwania miejsc do określonych typów miejsc, używając właściwości includedPrimaryTypes i określając co najmniej jeden typ, jak pokazano poniżej:

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

Pełną listę obsługiwanych typów znajdziesz w tabelach A i B typów miejsc.

Konfigurowanie elementu żądania dotyczącego miejsca

Dodaj odbiornik, który będzie aktualizować element żądania miejsca, gdy użytkownik wybierze prognozę: 

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

Ten przykład pokazuje, jak dodać do mapy Google podstawowy element autouzupełniania.

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

Wypróbuj przykład