Widżet Autouzupełniania miejsc

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Widżet Autouzupełniania miejsc tworzy pole do wprowadzania danych, wyświetla podpowiedzi miejsc na liście wyboru w interfejsie i zwraca informacje o miejscu w odpowiedzi na wybór użytkownika. Użyj widżetu autouzupełniania miejsc, aby osadzić w swojej witrynie 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 tych aspektach:

  • Interfejs widżetu autouzupełniania obsługuje lokalizację regionalną (w tym języki RTL) 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.

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 niegodiv 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. Aby wyświetlać bardziej trafne podpowiedzi, ustaw PlaceAutocompleteElementOptions , ograniczając lub preferując wyniki.

Ograniczanie wyników powoduje, że widżet autouzupełniania ignoruje wszystkie wyniki znajdujące się poza obszarem ograniczenia. Częstą 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ć odpowiedni 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 promieniu zerowym (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

Aby ograniczyć wyniki wyszukiwania miejsc do określonych typów miejsc, użyj właściwości includedPrimaryTypes i określ 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 pobrać 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 informacji o miejscu potrzebne w Twojej aplikacji.

Detektor w następnym przykładzie żąda pól displayName, formattedAddress, location, i viewport w place.fetchFields(), a następnie używa place.viewport z fitBounds() , aby wyświetlić wybrane miejsce 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 mapy 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łniania (nową).

Oto ogólne wskazówki:

  • Użycie widżetu autouzupełniania (nowego) z Maps JavaScript API , widżetu autouzupełniania (nowego) z pakietu SDK Miejsc na Androida lub widżetu autouzupełniania (nowego) 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 preferencji 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łnianie (nowe) , których potrzebujesz.

Zaawansowana optymalizacja kosztów

Rozważ programowe wdrożenie autouzupełniania (nowego), aby uzyskać dostęp do jednostki SKU: ceny żądania autouzupełniania i żądać wyników interfejsu Geocoding API dotyczących wybranego miejsca zamiast informacji o miejscu (nowych). Ceny za żądanie w połączeniu z interfejsem Geocoding API są bardziej opłacalne niż ceny za sesję (oparte 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, ceny za żądanie mogą być bardziej opłacalne niż ceny za sesję.
Aby uzyskać pomoc w wyborze wdrożenia 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 jednostek SKU Miejsc, w zależności od tego, o które 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 żądasz tylko tych pól danych autouzupełniania (nowego), których potrzebujesz.

Wdrożenie programowe
Używaj tokena sesji w żądaniach autouzupełniania (nowego). Gdy żądasz informacji o miejscu (nowych) dotyczących 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 zostały wdrożone 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

Wdróż autouzupełnianie (nowe) programowo bez tokenów sesji i wywołaj interfejs Geocoding API w przypadku wybranej podpowiedzi miejsca.
Interfejs Geocoding API dostarcza adresy oraz współrzędne szerokości i długości geograficznej. Wykonanie 4 żądań autouzupełniania i wywołania interfejsu Geocoding API w przypadku wybranej podpowiedzi miejsca kosztuje mniej niż koszt autouzupełniania (nowego) za 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 zamierzasz wysłać, 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 żą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 żądasz tylko tych pól, których potrzebujesz.

Wdrożenie programowe
Używaj tokena sesji w żądaniach autouzupełniania (nowego). Gdy żądasz informacji o miejscu (nowych) dotyczących 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), dopóki użytkownik nie wpisze pierwszych 3 lub 4 znaków, aby aplikacja wysyłała mniej żądań. Jeśli na przykład wysyłasz żądania autouzupełniania (nowego) dla każdego znaku po tym, jak użytkownik wpisze 3 znaki, a następnie wybierze podpowiedź, dla której wysyłasz 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 skuteczności

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

  • Dodaj do wdrożenia autouzupełniania (nowego) ograniczenia związane z krajem, sugerowanie lokalizacji, i (w przypadku wdrożeń zautomatyzowanych) ustawienia języka. W przypadku widżetów ustawienia języka nie są potrzebne, ponieważ są one pobierane 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 oczekujesz, że użytkownik wpisze tylko informacje o adresie, użyj pierwotnych danych wprowadzonych przez użytkownika w wywołaniu interfejsu Geocoding API.
    • Jeśli oczekujesz, ż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 preferencji 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.

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

Ograniczenia dotyczące 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.