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 wybranego miejsca.

Element podstawowego autouzupełniania miejsca jest prostszy we wdrożeniu niż PlaceAutocompleteElement i różni się od niego w tych aspektach:

  • Element podstawowego autouzupełniania miejsc zwraca obiekt miejsca zawierający tylko identyfikator miejsca, a nie obiekt PlacePrediction. Zwrócony identyfikator miejsca możesz użyć bezpośrednio w elemencie Places UI Kit Details, aby uzyskać dodatkowe szczegóły dotyczące miejsca, natomiast obiekt PlacePrediction wymaga najpierw przekształcenia w identyfikator miejsca.
  • Element podstawowego autouzupełniania miejsc nie wymaga wczytywania interfejsu Places API.
  • Podstawowy element autouzupełniania miejsc czyści pole wprowadzania, gdy użytkownik wybierze prognozę miejsca.

Wymagania wstępne

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

Dodawanie elementu podstawowego autouzupełniania miejsc

W tej sekcji dowiesz się, jak dodać do strony internetowej lub mapy element podstawowego autouzupełniania.

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, dołącz element BasicPlaceAutocompleteElement do elementu gmp-map i ustaw jego pozycję za pomocą atrybutu slot, jak w tym przykładzie:

<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

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 parametr BasicPlaceAutocompleteElementOptions, aby wyświetlać trafniejsze prognozy przez ograniczenie lub ukierunkowanie wyników.

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 widocznego obszaru 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 wyniki wyszukiwania miejsc w okręgu 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 informacji o miejscu

Dodaj odbiornik, aby zaktualizować 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);
    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

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

Wypróbuj