Widżet Autouzupełniania miejsc

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Widżet Autouzupełnianie miejsc tworzy pole do wprowadzania danych, wyświetla prognozy miejsc na liście wyboru w interfejsie i zwraca informacje o miejscu w odpowiedzi na wybór użytkownika. Użyj widżetu Autouzupełnianie miejsc, aby osadzić w swojej stronie internetowej kompletny samodzielny interfejs autouzupełniania. Pełną dokumentację interfejsu API znajdziesz w artykule PlaceAutocompleteElement.

Wymagania wstępne

Aby korzystać z autouzupełniania miejsc, musisz włączyć interfejs Places API (nowy) w swoim projekcie Google Cloud Więcej informacji znajdziesz w przewodniku dla początkujących.

Nowości

Autouzupełnianie miejsc zostało ulepszone w następujący sposób:

  • Interfejs widżetu autouzupełniania obsługuje lokalizację regionalną (w tym języki pisane od prawej do lewej) w przypadku obiektu zastępczego pola do wprowadzania tekstu, logo listy podpowiedzi i podpowiedzi miejsc.
  • Ulepszone ułatwienia dostępu, w tym obsługa czytników ekranu i interakcji za pomocą klawiatury.
  • Widżet autouzupełniania zwraca nową klasę Place (Place reference), aby uprościć obsługę zwracanego obiektu.
  • Lepsza obsługa urządzeń mobilnych i małych ekranów.
  • Wyższa wydajność i lepszy wygląd graficzny.

Dodawanie widżetu autouzupełniania

Widżet autouzupełniania tworzy pole do wprowadzania danych, wyświetla prognozy miejsc na liście wyboru w interfejsie i zwraca informacje o miejscu w odpowiedzi na kliknięcie użytkownika za pomocą gmp-select detektora. Z tej sekcji dowiesz się, jak dodać widżet autouzupełniania do strony internetowej lub mapy Google.

Dodawanie widżetu autouzupełniania do strony internetowej

Aby dodać widżet autouzupełniania do strony internetowej, utwórz nowy google.maps.places.PlaceAutocompleteElement, i dołącz go do strony, jak pokazano w tym przykładzie:

TypeScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

JavaScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

Zobacz pełny przykład kodu

Dodawanie widżetu autouzupełniania do mapy

Jeśli Twój adres rozliczeniowy znajduje się poza Europejskim Obszarem Gospodarczym (EOG), możesz też używać widżetu autouzupełniania z Mapami Google.

Aby dodać widżet autouzupełniania do mapy, najpierw poproś o potrzebne biblioteki, jak pokazano tutaj:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

Następnie w kodzie HTML zagnieźdź nowy gmp-place-autocomplete element w elemencie div, a ten element div zagnieźdź w elemencie gmp-map, jak pokazano w tym przykładzie:

<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <div
        class="place-autocomplete-card"
        slot="control-inline-start-block-start">
        <gmp-place-autocomplete
            placeholder="Search for a place..."></gmp-place-autocomplete>
    </div>
</gmp-map>

Aby programowo dodać widżet autouzupełniania do mapy, utwórz nową google.maps.places.PlaceAutocompleteElement instancję, dołącz PlaceAutocompleteElement do elementu div i zastosuj do niego div atrybut slot, jak pokazano w tym przykładzie: 

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

// Get the map element.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

// Create the PlaceAutocompleteElement instance.
const placeAutocomplete = new PlaceAutocompleteElement({});

// Create a div and append the PlaceAutocompleteElement to it.
const card = document.createElement("div");
card.appendChild(placeAutocomplete);

// Apply the slot attribute to the div.
// This positions the control in the top-left corner of the map.
card.setAttribute("slot", "control-inline-start-block-start");

// Append the div to the map element (check for null).
if (mapElement) {
    mapElement.appendChild(card);
}

Zobacz pełny przykład kodu

Dodawanie tekstu zastępczego

Aby dodać tekst zastępczy, użyj właściwości placeholder. W tym przykładzie pokazujemy, jak ustawić tekst zastępczy w kodzie HTML:

<gmp-place-autocomplete
  placeholder="Search for a place..."
></gmp-place-autocomplete>

Tekst zastępczy możesz też ustawić programowo:

placeAutocomplete.placeholder = 'Search for a place...';

Ograniczanie podpowiedzi autouzupełniania

Domyślnie autouzupełnianie miejsc wyświetla wszystkie typy miejsc, preferując podpowiedzi w pobliżu lokalizacji użytkownika i pobiera wszystkie dostępne pola danych dla wybranego przez użytkownika miejsca. Ustaw PlaceAutocompleteElementOptions aby wyświetlać bardziej trafne podpowiedzi, ograniczając lub preferując wyniki.

Ograniczanie wyników powoduje, że widżet autouzupełniania ignoruje wszystkie wyniki, które znajdują się poza obszarem ograniczenia. Często stosowaną praktyką jest ograniczanie wyników do granic mapy. Preferowanie wyników powoduje, że widżet autouzupełniania 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 będzie preferować wyniki w tej lokalizacji. Jeśli to możliwe, ustaw granice. W przeciwnym razie różni użytkownicy mogą otrzymywać różne podpowiedzi. Aby ogólnie poprawić podpowiedzi, warto też podać rozsądny widoczny obszar, np. taki, który ustawisz, przesuwając lub powiększając mapę, albo widoczny obszar ustawiony przez dewelopera na podstawie lokalizacji i promienia urządzenia. Gdy promień jest niedostępny, za rozsądną wartość domyślną dla autouzupełniania miejsc uznaje się 5 km. Nie ustawiaj widocznego obszaru o zerowym promieniu (pojedynczy punkt), widocznego obszaru o szerokości zaledwie kilku metrów (mniej niż 100 metrów) ani widocznego obszaru obejmującego cały świat.

Ograniczanie wyszukiwania miejsc według kraju

Aby ograniczyć wyszukiwanie miejsc do co najmniej 1 konkretnego kraju, użyj właściwości includedRegionCodes , aby określić kody krajów, jak pokazano w tym fragmencie kodu (zakładamy, że masz już utworzoną instancję o nazwie placeAutocomplete):

placeAutocomplete.includedRegionCodes = ['us', 'au'];;

Ograniczanie wyszukiwania miejsc do granic mapy

Aby ograniczyć wyszukiwanie miejsc do granic mapy, użyj właściwości locationRestriction. Ten fragment kodu pokazuje, jak dodać detektor, który będzie aktualizować granice, gdy się zmienią:

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});

Aby usunąć locationRestriction, ustaw ją na null.

Preferowanie wyników wyszukiwania miejsc

Preferuj wyniki wyszukiwania miejsc w obszarze koła, używając locationBias właściwości, jak pokazano tutaj:

placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};

Aby usunąć locationBias, ustaw ją na 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 1 typ, jak pokazano tutaj:

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

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

Pobieranie informacji o miejscu

Aby uzyskać informacje o miejscu dla wybranego miejsca, dodaj gmp-select detektor do PlaceAutocompleteElement, jak pokazano w tym przykładzie:

TypeScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({
        placePrediction,
    }: google.maps.places.PlacePredictionSelectEvent) => {
        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
        );
    }
);

JavaScript

// Add the gmp-select listener, and display the results.
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
        );
    }
);

Zobacz pełny przykład kodu

W poprzednim przykładzie detektor zdarzeń otrzymuje PlacePredictionSelectEvent i wywołuje placePrediction.toPlace(), aby uzyskać instancję klasy Place (Place reference). Wywołaj place.fetchFields() , aby uzyskać pola danych informacje o miejscu potrzebne w Twojej aplikacji.

Detektor w następnym przykładzie wysyła prośbę o informacje o miejscu i wyświetla je na mapie.

TypeScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location!);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);

JavaScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);

Zobacz pełny przykład kodu

Przykładowe mapy

Ta sekcja zawiera pełny kod przykładowych map przedstawionych na tej stronie.

Element autouzupełniania

Ten przykład dodaje widżet autouzupełniania do strony internetowej i wyświetla wyniki dla każdego wybranego miejsca.

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    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-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({
            placePrediction,
        }: google.maps.places.PlacePredictionSelectEvent) => {
            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
            );
        }
    );
}

void init();

JavaScript

async function init() {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    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-select listener, and display the results.
    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
            );
        }
    );
}

void init();

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

HTML

<html>
    <head>
        <title>Place Autocomplete element</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>
    </body>
</html>

Mapa autouzupełniania

Ten przykład pokazuje, jak dodać widżet autouzupełniania do Map Google.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(
    content: string | Element | Text | null | undefined,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            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: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}

HTML

<html>
    <head>
        <title>Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Search for a place..."></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>

Optymalizacja autouzupełniania (nowego)

Ta sekcja zawiera sprawdzone metody, które pomogą Ci w pełni wykorzystać usługę Autouzupełnianie (nowe).

Oto ogólne wskazówki:

  • Użycie widżetu Autouzupełnianie (nowe) z Maps JavaScript API, widżetu Autouzupełnianie (nowe) z pakietu SDK Miejsc na Androida lub widżetu Autouzupełnianie (nowe) z pakietu SDK Miejsc na iOS to najszybszy sposób na stworzenie działającego interfejsu użytkownika.
  • Od początku poznaj najważniejsze pola danych autouzupełniania (nowego).
  • Pola preferowania lokalizacji i ograniczenia lokalizacji są opcjonalne, ale mogą mieć znaczący wpływ na skuteczność autouzupełniania.
  • Używaj obsługi błędów, aby mieć pewność, że aplikacja będzie działać prawidłowo jeśli interfejs API zwróci błąd.
  • Upewnij się, że aplikacja obsługuje sytuacje, w których nie ma wyboru, i oferuje użytkownikom możliwość kontynuowania.

Sprawdzone metody dotyczące optymalizacji kosztów

Podstawowa optymalizacja kosztów

Aby zoptymalizować koszt korzystania z usługi Autouzupełnianie (nowe) , użyj masek pól w widżetach informacje o miejscu (nowe) i Autouzupełnianie (nowe), aby zwracać tylko te pola danych autouzupełniania (nowego) , których potrzebujesz.

Zaawansowana optymalizacja kosztów

Rozważ programowe wdrożenie autouzupełniania (nowego), aby uzyskać dostęp do kodu SKU: ceny żądania autouzupełniania i wyników interfejsu Geocoding API dotyczących wybranego miejsca zamiast informacji o miejscu (nowych). Cena za żądanie w połączeniu z interfejsem Geocoding API jest bardziej opłacalna niż cena za sesję (oparta na sesji), jeśli spełnione są oba te warunki:

  • Jeśli potrzebujesz tylko szerokości i długości geograficznej lub adresu wybranego przez użytkownika miejsca, interfejs Geocoding API dostarczy te informacje za niższą cenę niż wywołanie informacji o miejscu (nowych).
  • Jeśli użytkownicy wybierają podpowiedź autouzupełniania średnio w ciągu 4 żądań autouzupełniania (nowego) lub mniej, cena za żądanie może być bardziej opłacalna niż cena za sesję.
Aby wybrać wdrożenie autouzupełniania (nowego), które odpowiada Twoim potrzebom, kliknij kartę odpowiadającą Twojej odpowiedzi na to pytanie.

Czy Twoja aplikacja wymaga innych informacji niż adres oraz szerokość i długość geograficzna wybranej podpowiedzi?

Tak, potrzebuję więcej informacji

Używaj autouzupełniania (nowego) opartego na sesji z informacjami o miejscu (nowymi).
Ponieważ Twoja aplikacja wymaga informacji o miejscu (nowych), takich jak nazwa miejsca, status firmy lub godziny otwarcia, wdrożenie autouzupełniania (nowego) powinno używać tokena sesji (programowo lub wbudowanego w JavaScript, Android, lub iOS widżety) na sesję oraz odpowiednich kodów SKU Miejsc, w zależności od tego, o jakie pola danych miejsca prosisz.1

Wdrożenie widżetu
Zarządzanie sesjami jest automatycznie wbudowane w JavaScript, Android, lub iOS. Obejmuje to zarówno żądania autouzupełniania (nowego), jak i żądanie informacji o miejscu (nowych) dotyczące wybranej podpowiedzi. Pamiętaj, aby określić parametr fields, aby mieć pewność, że prosisz tylko o te pola danych autouzupełniania (nowego), których potrzebujesz.

Wdrożenie programowe
Używaj tokena sesji w żądaniach autouzupełniania (nowego). Gdy prosisz o informacje o miejscu (nowe) dotyczące wybranej podpowiedzi, uwzględnij te parametry:

  1. Identyfikator miejsca z odpowiedzi autouzupełniania (nowego)
  2. Token sesji użyty w żądaniu autouzupełniania (nowego)
  3. Parametr fields określający pola danych autouzupełniania (nowego), których potrzebujesz

Nie, potrzebuję tylko adresu i lokalizacji

W zależności od skuteczności korzystania z autouzupełniania (nowego) interfejs Geocoding API może być bardziej opłacalną opcją niż informacje o miejscu (nowe). Skuteczność autouzupełniania (nowego) w każdej aplikacji różni się w zależności od tego, co wpisują użytkownicy, gdzie aplikacja jest używana i czy wdrożono sprawdzone metody optymalizacji skuteczności.

Aby odpowiedzieć na to pytanie, przeanalizuj, ile znaków użytkownik wpisuje średnio przed wybraniem podpowiedzi autouzupełniania (nowego) w Twojej aplikacji.

Czy Twoi użytkownicy wybierają podpowiedź autouzupełniania (nowego) średnio w ciągu 4 lub mniej żądań?

Tak

Zaimplementuj autouzupełnianie (nowe) programowo bez tokenów sesji i wywołaj interfejs Geocoding API dla wybranej podpowiedzi miejsca.
Interfejs Geocoding API dostarcza adresy oraz współrzędne szerokości i długości geograficznej. Wysłanie 4 żądań autouzupełniania oraz wywołanie interfejsu Geocoding API dla wybranej podpowiedzi miejsca kosztuje mniej niż cena za sesję autouzupełniania (nowego) na sesję.1

Rozważ zastosowanie sprawdzonych metod dotyczących skuteczności, aby pomóc użytkownikom w uzyskaniu szukanej podpowiedzi przy użyciu jeszcze mniejszej liczby znaków.

Nie

Używaj autouzupełniania (nowego) opartego na sesji z informacjami o miejscu (nowymi).
Ponieważ średnia liczba żądań, które prawdopodobnie wyślesz, zanim użytkownik wybierze podpowiedź autouzupełniania (nowego), przekracza koszt ceny za sesję, wdrożenie autouzupełniania (nowego) powinno używać tokena sesji zarówno w przypadku żądań autouzupełniania (nowego), jak i powiązanego z nimi żądania informacji o miejscu (nowych) na sesję. 1

Wdrożenie widżetu
Zarządzanie sesjami jest automatycznie wbudowane w JavaScript, Android, lub iOS. Obejmuje to zarówno żądania autouzupełniania (nowego), jak i żądanie informacji o miejscu (nowych) dotyczące wybranej podpowiedzi. Pamiętaj, aby określić parametr fields, aby mieć pewność, że prosisz tylko o te pola, których potrzebujesz.

Wdrożenie programowe
Używaj tokena sesji w żądaniach autouzupełniania (nowego). Gdy prosisz o informacje o miejscu (nowe) dotyczące wybranej podpowiedzi, uwzględnij te parametry:

  1. Identyfikator miejsca z odpowiedzi autouzupełniania (nowego)
  2. Token sesji użyty w żądaniu autouzupełniania (nowego)
  3. Parametr fields określający pola takie jak adres i geometria

Rozważ opóźnienie żądań autouzupełniania (nowego)
Możesz stosować strategie takie jak opóźnianie żądania autouzupełniania (nowego) do momentu, aż użytkownik wpisze pierwsze 3 lub 4 znaki, aby aplikacja wysyłała mniej żądań. Jeśli na przykład wysyłasz żądania autouzupełniania (nowego) dla każdego znaku po wpisaniu przez użytkownika 3 znaku, a użytkownik wpisze 7 znaków, a następnie wybierze podpowiedź, dla której wyślesz 1 żądanie do interfejsu Geocoding API, łączny koszt wyniesie 4 żądania autouzupełniania (nowego) + geokodowanie.1

Jeśli opóźnianie żądań może spowodować, że średnia liczba żądań programowych spadnie poniżej 4, możesz postępować zgodnie ze wskazówkami dotyczącymi skutecznego wdrożenia autouzupełniania (nowego) z interfejsem Geocoding API. Pamiętaj, że opóźnianie żądań może być postrzegane przez użytkownika jako opóźnienie, ponieważ może on oczekiwać wyświetlania podpowiedzi po każdym naciśnięciu klawisza.

Rozważ zastosowanie sprawdzonych metod dotyczących skuteczności, aby pomóc użytkownikom w uzyskaniu szukanej podpowiedzi przy użyciu mniejszej liczby znaków.

  1. Koszty znajdziesz w cennikach Google Maps Platform.

Sprawdzone metody dotyczące wydajności

Te wskazówki opisują sposoby optymalizacji skuteczności autouzupełniania (nowego):

  • Dodaj do wdrożenia autouzupełniania (nowego) ograniczenia związane z krajem, preferowanie lokalizacji, i (w przypadku wdrożeń programowych) ustawienia języka. W przypadku widżetów ustawienia języka nie są potrzebne, ponieważ pobierają je z przeglądarki lub urządzenia mobilnego użytkownika.
  • Jeśli autouzupełnianiu (nowemu) towarzyszy mapa, możesz preferować lokalizację według widocznego obszaru mapy.
  • W sytuacjach, gdy użytkownik nie wybierze żadnej z podpowiedzi autouzupełniania (nowego), zwykle dlatego, że żadna z nich nie jest adresem, którego szuka, możesz ponownie użyć pierwotnych danych wprowadzonych przez użytkownika, aby uzyskać bardziej trafne wyniki:
    • Jeśli spodziewasz się, że użytkownik wpisze tylko informacje o adresie, użyj pierwotnych danych wprowadzonych przez użytkownika w wywołaniu interfejsu Geocoding API.
    • Jeśli spodziewasz się, że użytkownik będzie wpisywać zapytania dotyczące konkretnego miejsca według nazwy lub adresu, użyj żądania informacji o miejscu (nowych). Jeśli wyniki mają być wyświetlane tylko w określonym regionie, użyj preferowania lokalizacji.
    Inne sytuacje, w których najlepiej jest wrócić do interfejsu Geocoding API:
    • Użytkownicy wpisują adresy podrzędne, np. adresy konkretnych lokali lub mieszkań w budynku. Na przykład czeski adres „Stroupežnického 3191/17, Praha” daje częściową podpowiedź w autouzupełnianiu (nowym).
    • Użytkownicy wpisują adresy z prefiksami segmentów dróg, np. „23-30 29th St, Queens” w Nowym Jorku lub „47-380 Kamehameha Hwy, Kaneohe” na wyspie Kauai na Hawajach.

Preferowanie lokalizacji

Preferuj wyniki w określonym obszarze, przekazując parametr location i parametr radius. Powoduje to, że autouzupełnianie (nowe) preferuje wyświetlanie wyników w zdefiniowanym obszarze. Wyniki spoza zdefiniowanego obszaru mogą być nadal wyświetlane. Możesz użyć parametru includedRegionCodes, aby filtrować wyniki i wyświetlać tylko te miejsca, które znajdują się w określonym kraju.

Ograniczanie lokalizacji

Ogranicz wyniki do określonego obszaru, przekazując parametr locationRestriction.

Możesz też ograniczyć wyniki do regionu zdefiniowanego przez location i parametr radius, dodając parametr locationRestriction. Powoduje to, że autouzupełnianie (nowe) zwraca tylko wyniki w tym regionie.