Eine React-Komponente für die automatische Vervollständigung von Google Maps Places

Blog

Eine React-Komponente für die automatische Vervollständigung von Google Maps Places

Eine React-Komponente für die automatische Vervollständigung von Google Maps Places

Automatische Vervollständigung von React Places

Eine React-Komponente zum Erstellen einer benutzerdefinierten Benutzeroberfläche für die automatische Vervollständigung von Google Maps Places

Demo

Live-Demo: hibiken.github.io/react-places-autocomplete/

Merkmale

  1. Ermöglicht Ihnen die einfache Erstellung eines benutzerdefinierten Dropdown-Menüs zur automatischen Vervollständigung powered by Google Maps Places-Bibliothek
  2. Dienstprogrammfunktionen Geokodieren und Breiten- und Längengrad erhalten mit Google Maps Geocoder-API
  3. Volle Kontrolle über das Rendering, um sich gut in andere Bibliotheken (z. B. Redux-Form) zu integrieren
  4. Mobilfreundliche UX
  5. WAI-ARIA-konform
  6. Unterstützt asynchrones Laden von Google-Skripten

Installation

So installieren Sie die stabile Version

source-shell npm install --save react-places-autocomplete

React-Komponente wird als Standardexport exportiert

source-js import PlacesAutocomplete from 'react-places-autocomplete';

Hilfsfunktionen werden als Exporte bezeichnet

source-js import { geocodeByAddress, geocodeByPlaceId, getLatLng, } from 'react-places-autocomplete';

Einstieg

Um diese Komponente zu verwenden, müssen Sie laden JavaScript-API von Google Maps

Laden Sie die Bibliothek in Ihr Projekt

text-html-basic

Erstellen Sie Ihre Komponente

source-js import React from 'react'; import PlacesAutocomplete, { geocodeByAddress, getLatLng, } from 'react-places-autocomplete'; class LocationSearchInput extends React.Component { constructor(props) { super(props); this.state = { address: '' }; } handleChange = address => { this.setState({ address }); }; handleSelect = address => { geocodeByAddress(address) .then(results => getLatLng(results[0])) .then(latLng => console.log('Success', latLng)) .catch(error => console.error('Error', error)); }; render() { return ( {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => ( {loading && Loading... } {suggestions.map(suggestion => { const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'; // inline style for demonstration purpose const style = suggestion.active ? { backgroundColor: '#fafafa', cursor: 'pointer' } : { backgroundColor: '#ffffff', cursor: 'pointer' }; return ( {suggestion.description} ); })} )} ); } }

Wert

Typ: |_+_|, Erforderlich: |_+_|

bei Änderung

Typ: |_+_|, Erforderlich: |_+_|

Normalerweise aktualisiert dieser Ereignishandler |_+_| Zustand.

string

Kinder

Typ: |_+_| Erforderlich: |_+_|

Hier rendern Sie, was Sie wollen, basierend auf dem Zustand von |_+_|. Die Funktion nimmt ein Objekt mit den folgenden Tasten.

  • |_+_| : Funktion
  • |_+_| : Funktion
  • |_+_| : boolesch
  • |_+_| : Array

Einfaches Beispiel

Dungeon World Charakterblätter pdf
true

getInputProps

Diese Funktion gibt die Requisiten zurück, die Sie über die |_+_| . verteilen können Element. Sie können die Funktion optional mit einem Objekt aufrufen, um andere Requisiten an die Eingabe zu übergeben.

function

getSuggestionItemProps

Diese Funktion gibt die Requisiten zurück, die Sie über jedes Vorschlagselement in Ihrem Dropdown-Menü zur automatischen Vervollständigung verteilen können. Sie MÜSSEN es mit |_+_| . aufrufen object als Argument und übergeben Sie optional ein Objekt, um andere Requisiten an das Element zu übergeben.

true

Wird geladen

Dies ist ein boolesches Flag, das angibt, ob die Anforderung ansteht oder nicht abgeschlossen wurde.

Vorschläge

Dies ist ein Array von Vorschlagsobjekten, von denen jedes alle Daten der Google Maps API und andere Metadaten enthält.

Ein Beispiel für ein Vorschlagsobjekt.

value

aufAuswählen

Typ: |_+_| Erforderlich: |_+_|, Standard: |_+_|

Sie können eine Funktion übergeben, die anstelle von |_+_| . aufgerufen wird Funktion, wenn der Benutzer die Eingabetaste drückt oder auf ein Vorschlagselement klickt.

Die Funktion benötigt zwei Positionsargumente. Das erste Argument ist |_+_|, das zweite ist |_+_|.

source-js this.setState({ value })} > {/* custom render function */}

onError

Typ: |_+_| Erforderlich: |_+_|

Du kannst |_+_| . passieren prop, um das Verhalten anzupassen, wenn google.maps.places.PlacesServiceStatus ist nicht |_+_| (z. B. keine Vorhersagen gefunden)

Funktion benötigt |_+_| (Zeichenfolge) und |_+_| (Funktion) als Parameter

function

Suchoptionen

Typ: |_+_| Erforderlich: |_+_| Standard: |_+_|

Sie können die an die AutocompleteService-Klasse übergebenen Einstellungen mit |_+_| . verfeinern Stütze. Diese Requisite akzeptiert ein Objekt mit dem gleichen Format wie google.maps.places.AutocompletionRequest (außer |_+_|, das aus dem Wert des Eingabefeldes stammt).

true

entprellen

Typ: |_+_| Erforderlich: |_+_| Standard: |_+_|

ms office Aktivierung fehlgeschlagen

Die Anzahl der Millisekunden, die verzögert werden soll, bevor ein Aufruf an die Google Maps-API erfolgt.

HighlightErsterVorschlag

Typ: |_+_| Erforderlich: |_+_| Standard: |_+_|

Bei Einstellung auf |_+_| wird der erste Vorschlag im Dropdown-Menü automatisch aktiviert.

sollteFetchVorschläge

Typ: |_+_| Erforderlich: |_+_| Standard: |_+_|

PlacesAutocomplete

googleRückrufName

Typ: |_+_| Erforderlich: |_+_| Standard: |_+_|

Sofern vorhanden, wird die Komponente initialisiert, nachdem der Browser das Herunterladen des Google-Skripts abgeschlossen hat.

WICHTIG : Um diesen asynchronen Modus zu aktivieren, müssen Sie dem Google-Skript über |_+_| denselben Callback-Namen bereitstellen.

Beispiel:

getInputProps

Geben Sie dann |_+_| . an stütze auf |_+_|.

getSuggestionItemProps

HINWEIS : Bei mehr als einem |_+_| auf der Seite gerenderten Komponenten eine Rückruffunktion einrichten, die für jede Komponente eine Rückruffunktion aufruft.

Beispiel:

Roadmap für Frontend-Entwickler
loading suggestions

geocodeByAddress` API

source-js const renderFunc = ({ getInputProps, getSuggestionItemProps, suggestions }) => ( {loading && Loading... } {suggestions.map(suggestion => ( {suggestion.description} ))} ); // In render function {renderFunc} ;

die Anschrift

Typ: |_+_|, Erforderlich: |_+_|

String, der an Google Maps übergeben wird Geocoder

geocodeByPlaceId-API

source-js // In render function

placeId

Typ: |_+_|, Erforderlich: |_+_|

String, der an Google Maps übergeben wird Geocoder

suggestion

getLatLng-API

source-js // Simple example {suggestions.map(suggestion => ( {suggestion.description} ))} // Pass options as a second argument {suggestions.map(suggestion => { const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item'; return ( {suggestion.description} ); })}

Ergebnis

Typ: |_+_| Erforderlich: |_+_|

Eines der Elemente aus |_+_| (von Google Maps Geocoder zurückgegeben)

source-js { active: false, description: 'San Francisco, CA, USA', formattedSuggestion: { mainText: 'San Francisco', secondaryText: 'CA, USA' }, id: '1b9ea3c094d3ac23c9a3afa8cd4d8a41f05de50a', index: 0, matchedSubstrings: [ {length: 8, offset: 0} ], placeId: 'ChIJIQBpAG2ahYAR_6128GcTUEo', terms: [ { offset: 0, value: 'San Francisco' }, { offset: 15, value: 'CA' }, { offset: 19, value: 'USA' } ], types: ['locality', 'political', 'geocode'] }

Download-Details:

Live-Demo: https://hibiken.github.io/react-places-autocomplete/

Download-Link: https://github.com/hibiken/react-places-autocomplete/archive/master.zip

Offizielle Website: https://github.com/hibiken/react-places-autocomplete

#reactjs #javascript #programmierung