Skip to main content

Afisati pictogramele categoriilor Places in rezultatele Autocomplete

By November 21, 2019May 18th, 2020Google Maps
Categorii Places Autocomplete

Recent, am anunțat funcții noi în serviciul Places a locațiilor pentru Platforma Google Maps. Una dintre noile caracteristici este că pentru fiecare predicție returnată în răspunsul Autocomplete, câmpul types va conține mai multe tipuri de locuri (lista completă de tipuri de locuri posibile este împărțită în Tipurile de loc Tabelul 1 și Tabelul 2 din documentație).

Ca dezvoltator, puteți folosi aceste informații de răspuns noi pentru a îmbunătăți modul în care afișați locațiile în completarea automată, afișând o pictogramă potrivită lângă fiecare rezultat. Dar cum obțineți pictogramele pentru fiecare tip de loc? Și ce se întâmplă dacă doriți să utilizați acele pictograme în alte domenii în care aplicația dvs. utilizează API-ul Places, cum ar fi în rezultatele unei Place Search?

Să aruncăm o privire la un exemplu rapid de JavaScript, în care am adăugat pictograme de tip Places în rezultatele Autocomplere pentru Tokyo.

Completează automat cu pictograme de tip loc

În scenariul de mai sus, am configurat o sesiune de Autocomplete, cu in gradirea de locație pentru Tokyo, Japonia și un filtru pentru tipurile „stabilire”. În exemplul din stânga, când utilizatorul tastează „na”, lista apare fără pictograme de tip loc diferențiate. Spre deosebire de exemplul din dreapta, atunci când tipul utilizatorului „na” folosim tipurile de locuri din răspuns pentru a afișa pictogramele tipului locului și pentru a diferenția sugestiile pentru utilizator.

Obținerea icoanelor

Când am construit eșantionul de mai sus, am întâmpinat o problemă comună: Unde voi primi acele pictograme? Nu o să creez icoane personalizate și aș dori să folosesc aceleași pictograme pe care le folosește Google pentru a profita de recunoașterea de către utilizator a acestor pictograme din aplicația Google Maps. Chiar și mai bine dacă aș putea găzdui pictogramele Google pentru mine, nu trebuie să le mențin singur. Din fericire, prietenii noștri din  echipa de proiectare au furnizat icoane material. Ei explică cel mai bine frumusețea acestor icoane:

“

Fiecare pictogramă este creată folosind ghidurile noastre de proiectare pentru a descrie în forme simple și minime conceptele universale utilizate în mod obișnuit în întreaga UI. Asigurând lizibilitatea și claritatea atât la dimensiuni mari cât și mici, aceste pictograme au fost optimizate pentru afișarea frumoasă pe toate platformele comune și rezoluțiile de afișare.

Echipa de proiectare a materialelor Google

De când am construit eșantionul Autocompletare ca aplicație web, am folosit fontul pictogramă folosind fonturile Google Web. În partea <head> a paginii mele HTML, nu trebuia decât să adaug această linie:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ghidul de pictograme oferă, de asemenea, instrucțiuni pentru auto-găzduirea fișierelor de fonturi sau imagine, de a insera aceste pictograme în aplicația Android sau aplicația iOS și afișarea pictogramelor în interfața de limbă de la dreapta la stânga (RTL). Cel mai bine, pictogramele sunt gratuite pentru toată lumea să le utilizeze sub licența Apache versiunea 2.0.

Aplicarea pictogramelor la rezultatele Autocomplete

Am scris o funcție pentru a verifica dacă un tip selectat se află în proprietatea tipurilor predicției. Dacă se potrivea cu una pe care voiam să o diferențiez cu o pictogramă specială, am completat acea pictogramă cu pictograma materială pe care am crezut că se potrivește cel mai bine tipului. Pentru a găsi pictograma pe care am dorit-o pentru fiecare tip, am răsfoit Biblioteca de pictograme pentru materiale și am folosit numele de sub pictogramă pentru a face referire în codul meu. În mod implicit, folosesc pictograma locului generic pentru orice tip de loc pentru care nu am o pictogramă specifică.

// Builds a div for each prediction with the appropriate icon
function populate(predictions) {
    predictions.forEach(element => {
        const predictionItem = document.createElement('div');
        const predictionIcon = document.createElement('div');
        const typesList = element.types;
        let materialIcon;
        switch (true) {
            case (typesList.includes('airport')):
                materialIcon = 'local_airport';
                break;
            case (typesList.includes('restaurant')):
                materialIcon = 'restaurant';
                break;
            case (typesList.includes('store')):
                materialIcon = 'local_mall';
                break;
            default:
                materialIcon = 'place';
        }


        predictionIcon.innerHTML = `<i class="material-icons">${material_icon}</i>`;
        predictionItem.append(predictionIcon);
    });
}

Acest lucru afișează doar cazuri suficiente pentru a acoperi tipurile din exemplul de mai sus, dar puteți să încercați cu cazuri de comutare pentru a se potrivi cu fiecare tip de loc posibil.

Pentru a vedea tot ce puteți face cu API-ul Places, vizitați Prezentarea generală a API-ului Places sau vedeți SDK-urile Places pentru JavaScript, Android și iOS.

Articol original: https://cloud.google.com/blog/products/maps-platform/how-to-show-place-type-icons-in-place-autocomplete-results

Tags: