Lassen Sie uns ein Formular, das setzt die aktuelle Position in einer Karte!

0
27

Ich Liebe online-shopping. Ich kann finden, was ich brauche und bekomme die meisten Dinge, die für einen anständigen Preis. Ich bin Nigerianischen derzeit arbeiten und studieren in Indien, und zwei Dinge, die ich fürchte, beim online-shopping sind:

  1. Das ausfüllen eines Kreditkarten-Formular
  2. Das ausfüllen von Versand-und Rechnungsadresse Formen

Vielleicht bin ich einfach nur faul, aber diese Dinge sind nicht ohne Herausforderungen! Für den ersten, Dank der Verarbeitung der Zahlung, wie PayPal und e-wallets, dass ich weder den Typ in meine 12-stellige Kreditkarten-Nummer für jede neue e-commerce-Website, die ich Besuche, und speichern Sie meine Kreditkarten-details mit Ihnen.

Für die zweite, die nur zeitsparende Möglichkeit gegeben, die von den meisten shopping-websites zu speichern Sie Ihre Versand-Adresse, aber Sie haben noch um die form zu füllen (arrghh!). Dies ist, wo die Herausforderung ist. Ich habe die meisten meiner Aufträge zurückgegeben, weil meine Adresse (die ich dachte, war die richtige Adresse) konnte nicht gefunden werden oder bestätigt durch die app für einen oder anderen Grund.

Adresse Eingänge sind herausfordernd

Immer ein Benutzer die Adresse durch ein Eingabe-Formular ist eine saubere Lösung, kann aber auch eine Herkules-Aufgabe für den Benutzer. Hier ist, warum:

  • Wenn der Benutzer neu ist in einer Stadt, die Sie vielleicht nicht wissen, Ihre vollständige Adresse
  • Wenn der Benutzer wünscht, zu Schiff, zu einer neuen Adresse, die nicht gespeichert wird (e.g Versand an den Arbeitsplatz oder die Adresse eines Freundes, anstatt die gespeicherte Heimatadresse)
  • Wenn der Benutzer sich in einer Stadt mit sehr schwierigen-Adresse Systeme
  • Wenn der Benutzer faule wie mich

Eine mögliche Lösung: hier erhalten Sie die Adresse automatisch

Immer die Adresse des Benutzers, indem Sie die tap/Klick auf eine Schaltfläche. Yup, das ist einfach! Die UX ist groß, wie es spart der Anwender sowohl Zeit und Aufwand für das ausfüllen in irgendeiner form. Es wird auch sparen Sie die Webshop-Betreiber Zeit, Aufwand und auch Geld in manchen Fällen, wie es wahrscheinlich zu einer Verringerung der Anzahl der falsch-Bestellungen oder Lieferungen.

Wir bauen ein mini-app, erhält ein Benutzer die Adresse und zeigt Sie auf einer Google-Map-Schnittstelle mit Vanille JavaScript. Das Konzept ist wie folgt:

  1. Sie erhalten den HTML-button und hören Sie für einen Klick-Ereignis
  2. Holen Sie sich die Benutzer-Standort (Breitengrad und Längengrad), auf eine Schaltfläche klicken
  3. Zeigen Sie den Standort des Benutzers auf einer Google-Karte
  4. Übergeben Sie die Breite und Länge auf die Google Maps-Geocode-API-URL
  5. Anzeigen der zurückgegebenen Adresse (oder Adressen) auf der Benutzeroberfläche für den Benutzer zur Auswahl
  6. Hören für Ereignisse zuordnen und wiederholen Sie die Schritte 4 und 5
  7. Pre-füllen Sie das Formular mit den Adressdaten der Benutzer wählt

Erste Schritte und Einrichtung

Bauen Sie diese app, verwenden wir das Materialisieren CSS-framework, um uns zu retten einige Zeit Getue mit styles. Materialisieren ist ein modernes responsive front-end framework basiert auf Googles Material-Design-system. Die beta-version arbeitet auch mit vanilla-JavaScript.

Ein basic-setup mit Materialisieren, CSS-und JavaScript-Dateien in einem Dokument wie diesem:

<!DOCTYPE html>
<html lang=”de”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Adressen-Locator</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css”>
<link rel=”stylesheet” href=”css/main.css”>
</head>
<body>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js”></script>
<script src=”js/main.js”></script>
</body>
</html>

Wir sind auch dabei, die Verwendung der Google Maps API zur Anzeige der Karte und bekommen die Benutzer lesbare Adresse. Wir benötigen eine API-key, um dies zu tun. Hier ist, wie, eins zu bekommen:

  1. Melden Sie sich in Ihrem Google Developer Console-Konto
  2. Ein neues Projekt erstellen oder wählen Sie eine vorhandene
  3. Klicken Sie auf “Aktivieren APIs und Services”
  4. Wählen Sie die “Maps-Javascript-API” – option
  5. Klicken Sie auf “Aktivieren” auf die neue Seite kommt. Gehen Sie zur vorherigen Seite zurück und führen Sie eine Suche für “Geocoding API”, klicken Sie darauf und aktivieren Sie Sie als gut
  6. Dann, auf der rechten nav von der Seite, klicken Sie auf Anmeldeinformationen, kopieren Sie den API-Schlüssel auf der Seite, und speichern Sie es in eine Datei

Nun, wir aktualisieren unser Dokument auf die Karte und lassen den Benutzer wissen, es kann verwendet werden, um Ihren aktuellen Standort als Adresse. Auch fügen wir ein Formular bereits ausgefüllt mit der Adresse, die der Benutzer auswählt.

<body>
<div class=”container”>
<h3>Lieferadresse</h3>
<p>Sie können klicken Sie auf die Schaltfläche unten, um Ihren aktuellen Standort verwenden als Ihre Lieferadresse</p>
<div id=”map”>
</div>
<button id=”showMe” class=”btn”>Meine Position Verwenden</button>
<form id=”shippingAddress”>
<div id=”locationList”></div>
<br>
<div class=”input-Feld”>
<textarea class=”input_fields materialisieren-textarea” id=”Adresse” type=”text”></textarea>
<label class=”active” for=”Adresse”>Adresse (Gelände und Straße)</label>
</div>
<div class=”input-Feld”>
<input class=”input_fields” id=”Ort” type=”text”>
<label class=”active” for=”Ort”>Ort</label>
</div>
<div class=”input-Feld”>
<input class=”input_fields” id=”Stadt” type=”text”>
<label class=”active”=”Stadt”>Stadt/Landkreis/Stadt</label>
</div>
<div class=”input-Feld”>
<input class=”input_fields” id=”postal_code” type=”text”>
<label class=”active”=”pin_code”>Pin-Code ein</label>
</div>
<div class=”input-Feld”>
<input class=”input_fields” id=”Ort” type=”text”>
<label class=”active” for=”Ort”>Wahrzeichen</label>
</div>
<div class=”input-Feld”>
<input class=”input_fields” id=”state” type=”text”>
<label class=”active”=”State”>Status</label>
</div>
</form>
<!– Man könnte hinzufügen, eine fallback-Adresse Versammlung Formular hier –>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js”></script>
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY”></script>
<script src=”js/main.js”></script>
</body>

</html>

Während wir hier sind, lassen Sie uns Stil die Dinge ein bisschen machen diesen look ein wenig besser:

.container {
width: 50%;
max-width: 800px;
}

#map {
Höhe: 50vh;
margin-bottom: 10px;
display: none;
}

#locationList .Karte {
padding: 10px;
}

#toast-container {
top: 50%;
unten: unset;
}

.toast {
background-color: rgba(0, 0, 0, 0.8);
}

@media only screen and (max-width: 768px) {
.container {
width: 80%;
}
}

Das CSS blendet die Karte, bis wir bereit sind, ihn zu sehen. Unsere app sollte so Aussehen:

Wir planen, diese aus

Unsere app nutzen, die HTML5-Geolocation-API, um zu bestimmen, unsere Anwender die aktuelle Lage als auch auf der Google Geocode API mit einer Technik namens Reverse Geocoding. Der Geocode-API ist eine für den Menschen lesbare Adresse und Veränderungen in geografischen (breiten-und längs -) Koordinaten und markiert die Stelle in der Karte.

Reverse Geocoding ist das Gegenteil. Es braucht die Breite und Länge und wandelt Sie in lesbare Adressen. Geocoding und Reverse Geocoding, sind gut dokumentiert.

Hier ist, wie unsere app funktioniert:

  1. Der Benutzer klickt auf “Meine Position Verwenden” Taste
  2. Der Nutzer befindet sich mit der HTML5 Geolocation API (navigator.geolocation -)
  3. Wir bekommen die Nutzer die geografischen Koordinaten
  4. Wir übergeben die Koordinaten der geocode-API-Anfrage
  5. Wir zeigen die resultierenden Adressen der Benutzer

Die meisten Zeiten, der geocode gibt mehr als eine Adresse, so würden wir haben zu zeigen, die Nutzer zu allen gefundenen Adressen und lassen Sie Sie wählen Sie die genaue.

Puh! Endlich, wir bekommen können, um den Spaß Teil eigentlich JavaScript schreiben. Lassen Sie uns gehen Sie durch die einzelnen Schritte, die wir skizziert.

Schritt 1: Klicken Sie auf die Schaltfläche

In unserem main.js Datei, lassen Sie uns einen Verweis auf die HTML-Schaltfläche. Während wir dabei sind, werden wir einige andere Variablen, die wir brauchen, wie unsere API-key.

//Das div wird angezeigt, Google map
const mapArea = document.getElementById(‘map’);

//Mit dieser Taste setzen Sie alles in Bewegung, wenn Sie geklickt werden
const actionBtn = document.getElementById(‘showMe’);

//Zeigt alle verfügbaren Adressen zurückgegeben, die von Google Geocode Api
const locationsAvailable = document.getElementById(‘locationList’);

//Holen wir unsere API_KEY
const __KEY = ‘YOUR_API_KEY’;

//Wir deklarieren unsere Gmap und Gmarker Variablen, halten Sie die Karte und die Marker-Objekte später auf
lassen Gmap;
lassen Sie Gmarker;

//Heute hören wir für ein click-Ereignis auf unseren button
actionBtn.addEventListener(‘click’, e => {
/ – /ausblenden die Schaltfläche
actionBtn.Stil.display = “none”;
// Aufruf Materialisieren toast auf ” Benutzer aktualisieren
M. toast({ html: ‘Holen Sie Ihren aktuellen Standort’, classes: ‘abgerundet’ });
// die position des Benutzers
getLocation();
});

Wenn Sie den click-handler für unseren button läuft es:

  1. Blendet die Schaltfläche
  2. Warnt den Benutzer, dass wir immer Ihre aktuelle Position (ein “toast” Materialisieren ist wie eine popup-Benachrichtigung)
  3. Ruft die Funktion getLocation

Schritt 2: Holen Sie sich die Benutzer-Standort (Breitengrad und Längengrad)

Wenn unsere getLocation Funktion aufgerufen wird, müssen wir etwas mehr Arbeit zu tun. Zuerst prüfen wir, ob wir sogar die Geolocation-API:

getLocation = () => {
// prüft ob der browser des Benutzers unterstützt Navigator.geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation, showError, Optionen);
} else {
M. toast({ html: “Entschuldigung, dein browser unterstützt diese Funktion nicht… Bitte Aktualisieren Sie Ihren Browser, um es zu genießen”, classes: “abgerundete” });
}
}

Wenn wir unterstützen, ruft geolocation, die getCurrentPosition Methode. Wenn es nicht unterstützt, dann wird der Benutzer darauf aufmerksam gemacht, dass es keine browser-Unterstützung.

Wenn support, dann die getCurrentLocation Methode wird verwendet, um den aktuellen Standort des Geräts. Die syntax ist wie folgt:

navigator.geolocation.getCurrentPosition(*Erfolg, Fehler, [options]*)

  • Erfolg : Dies ist eine callback-Funktion, die eine position nimmt als einzigen parameter. Für uns, unsere Erfolgs-callback-Funktion ist die displayLocation Funktion.
  • Fehler : [optional] Dies ist eine callback-Funktion, die ein PositionError als alleinigen input-parameter. Sie können mehr dazu Lesen Sie hier. Unser Fehler-callback-Funktion ist die Funktion showError.
  • Optionen : [optional] Dies ist ein Objekt, das beschreibt die Optionen, die Eigenschaft übergeben werden, um die getCurrentPosition Methode. Sie können mehr dazu Lesen Sie hier. Unsere options-parameter ist das options-Objekt.

Vor dem schreiben unsere displayLocation-Funktion, lassen Sie den Griff der showError Funktion und Objekt Optionen:

// Zeigt verschiedene Fehlermeldungen
showError = (Fehler) => {
mapArea.Stil.display = “block”
switch (error.code) {
bei Fehler.PERMISSION_DENIED:
mapArea.innerHTML = “Sie verweigert die Anfrage für Ihren Standort.”
break;
bei Fehler.POSITION_UNAVAILABLE:
mapArea.innerHTML = “Ihre Standort-information ist nicht verfügbar.”
break;
bei Fehler.TIMEOUT:
mapArea.innerHTML = “your request timed out. Bitte versuchen Sie es erneut”
break;
bei Fehler.UNKNOWN_ERROR:
mapArea.innerHTML = “Ein unbekannter Fehler ist aufgetreten, bitte versuchen Sie es nach einiger Zeit erneut.”
break;
}
}
//Stellt sicher, dass Standort-Genauigkeit ist hoch
const options = {
enableHighAccuracy: true
}

Nun schreiben wir den code für unsere displayLocation Funktion innerhalb unserer main.js Datei:

displayLocation = (position) => {
const lat = position.coords.Breitengrad;
const lng = position.coords.Länge;
}

Wir haben jetzt unsere Benutzer die Breite und die Länge und wir können Sie in die Konsole, indem Sie den folgenden code innerhalb displayLocation:

console.log (“Aktuelle Breite ist ${lat}, und Ihre Länge ist ${lng}` );
Schritt 3: Zeigen Sie den aktuellen Standort des Benutzers auf einer Google-Karte

Um dies zu tun, werden wir das hinzufügen der folgenden Zeilen von code, um unsere displayLocation Funktion.

const latlng = {lat, lng}
showMap(latlng);
createMarker(latlng);
mapArea.Stil.display = “block”;

Die erste Zeile nimmt den lat und lng Werte und kapselt es in der latlng-Objekt-literal. Dies macht es leicht für uns, in unserer app.

Die zweite Codezeile ruft eine Funktion showMap akzeptiert latlng argument. Hier kommen wir zu instanziieren Sie unsere Google-map und render es in unserer Benutzeroberfläche.

Die Dritte Zeile ruft eine Funktion createMarker, die auch akzeptiert unsere Objekt-literal (latlng) als argument und verwendet Sie zum erstellen eines Google-Maps-Marker für uns.

Die vierte Zeile macht das mapArea sichtbar, so dass unsere Benutzer können nun die Lage.

displayLocation = (position) => {
const lat = position.coords.Breitengrad;
const lng = position.coords.Länge;
const latlng = { lat, lng }
showMap(latlng);
createMarker(latlng);
mapArea.Stil.display = “block”;
}

Nun kommen wir zum erstellen unserer Funktionen. Wir beginnen mit dem showMap-Funktion.

showMap = (latlng) => {
lassen Sie mapOptions = {
center: latlng,
zoom: 17
};
Gmap = new google.maps.Karte(mapArea, mapOptions);
}

Die showMap Funktion erstellt eine mapOptions Objekte, enthalten die map-Zentrum (das ist der lat und lng-Koordinaten erhielten wir von displayLocation) und die zoom-Stufe der Karte. Schließlich erstellen wir eine Instanz der Google Maps-Klasse auf und übergeben es auf unserer Karte. In weniger Worten, wir instanziieren die Google Maps Klasse.

Erstellen Sie eine map-Instanz, definieren wir zwei Parameter im Konstruktor: der div wird die Karte angezeigt und die mapOptions. In unserem Fall div aufgerufen wird mapArea und unsere mapOptions heißt mapOptions. Nach dieser, unserer erstellten Karte wird sich zeigen, aber ohne marker. Wir brauchen einen marker, so kann der Benutzer zu identifizieren, Ihre aktuelle position auf der Karte.

Wir erstellen unsere Marke mit der Funktion createMarker:

createMarker = (latlng) => {
lassen Sie markerOptions = {
position: latlng,
Karte: Gmap,
animation: google.maps.Animation.BOUNCE,
clickable: true,
};
Gmarker = new google.maps.Marker(markerOptions);
}

Ein paar Dinge zu beachten, die in diesem code:

  1. Die position-Eigenschaft positioniert den marker im angegebenen latlng
  2. Die map-Eigenschaft gibt die map-Instanz, wo der marker dargestellt werden soll (in unserem Fall Gmap)
  3. Die animation-Eigenschaft fügt ein wenig SPRUNGKRAFT, um unsere marker
  4. Die anklickbaren Eigenschaft der Wert true bedeutet, dass unsere marker können angeklickt werden
  5. Schließlich, instanzieren wir die Marker der Klasse in unserer Gmarker Instanz-variable

So weit, unsere Position des Benutzers abgerufen wurde, wird die map gerendert und die Benutzer können sehen Ihre aktuelle Position auf der Karte. Es sieht gut aus! 🕺

Schritt 4: Übergeben Sie den Längen-und Breitengrad, um die Geocode-API

Die Google-Geocoding-API wird verwendet, um zu konvertieren unserer Benutzer numerische, geographische Koordinaten, um eine formatierte, lesbare Adresse mit Hilfe des reverse – geocoding – Prozess behandelten wir früher.

Die URL sieht in etwa so aus:

https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

…wo das Ausgabeformat kann entweder ein json-oder xml-die bestimmt, die das format für die übermittlung der Daten. Der Parameter-Teil ist eine Liste der benötigten Parameter für die Anfrage.

Unsere Anfrage-URL wird so Aussehen:

https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__KEY}

Lassen Sie uns gehen Sie vor und schließen Sie an die API. Wir tun dies in einer Funktion, die aufgerufen wird getGeolocation.

getGeolocation = (lat, lng) => {
const latlng = lat + “,” + lng;
fetch( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__KEY}` )
.dann(res => res.json())
.dann(Daten => Konsole.log(data.Ergebnisse));
}

Die getGeolocation-Funktion nimmt zwei Argumente ( lat und lng } verkettet diese zu einer neuen latlng-variable an die URL übergeben.

Mit dem Fetch API (mehr dazu hier), fügen wir die neue latlng und __den SCHLÜSSEL in die Geocode-Anfrage-URL ein. Dann, auf das response-Objekt Holen wir uns zurück, wir passieren die .json-Methode zu lösen, das Versprechen mit JSON. Schließlich speichern wir die Antwort in der Konsole auf.

Unsere neu erstellte Funktion, wir nennen es in der displayLocation Funktion. So wir aktualisieren unsere displayLocation Funktion enthalten, die getGeolocation-Funktion aufrufen:

displayLocation = (position) => {
const lat = position.coords.Breitengrad;
const lng = position.coords.Länge;
const latlng = { lat, lng }
showMap(latlng);
createMarker(latlng);
mapArea.Stil.display = “block”;
getGeolocation(lat, lng)// unsere neue Funktion aufrufen
}

Die zurückgegebenen Daten sollte wie folgt Aussehen:

{
“Ergebnisse” :
{
“address_components”:
{
“long_name”: “1600”,
“Kurzname”: “1600”,
“types”: [“street_number”]
},
{
“long_name”: “Amphitheatre Pkwy”,
“Kurzname”: “Amphitheatre Pkwy”,
“types”: [“route”]
},
{
“long_name”: “Mountain View”,
“Kurzname”: “Mountain View”,
“types”: [“locality”, “political”]
},
{
“long_name”: “Santa Clara County”,
“Kurzname”: “Santa Clara County”,
“types”: [“administrative_area_level_2”, “political”]
},
{
“long_name”: “Kalifornien”,
“Kurzname”: “CA”,
“types”: [“administrative_area_level_1”, “political”]
},
{
“long_name”: “USA”,
“Kurzname”: “UNS”,
“types”: [“Land”, “political”]
},
{
“long_name”: “94043”,
“Kurzname”: “94043”,
“types”: [“postal_code”]
}
],
“formatted_address”: “1600 Amphitheatre Parkway, Mountain View, CA 94043, USA”,
“geometrie”: {
“location”: {
“lat”: 37.4224764,
“lng”: -122.0842499
},
“location_type”: “DACHTERRASSE”,
“viewport”: {
“northeast”: {
“lat”: 37.4238253802915,
“lng”: -122.0829009197085
},
“southwest”: {
“lat”: 37.4211274197085,
“lng”: -122.0855988802915
}
}
},
“place_id”: “ChIJ2eUgeAK6j4ARbn5u_wAGqWA”,
“types”: [“street_address”]
}
],
“status” : “OK”
}
Schritt 5: Anzeigen der zurückgegebenen Adresse(N) für die Benutzer zu wählen

In dieser Phase haben wir eine Anfrage an die Google-Geocoding-API und bekommen haben unser Ergebnis eingeloggt in der Konsole. Nun, wir haben, um die Ergebnisse anzuzeigen in einer UI für unsere Benutzer. Dies erfordert zwei Dinge:

  1. Erstellen Sie eine neue Funktion, mit der das erstellen von HTML-Elementen
  2. Update unserer getGeolocation-Funktion, um die Funktion aufrufen

Erstellen wir die Funktion, die würde kümmern uns um das erstellen der HTML-Elemente und die Aktualisierung der DOM.

populateCard = (geoResults) => {
geoResults.Karte(geoResult => {
// zuerst erstellen Sie die input-div-container
const addressCard = document.createElement(‘div’);
// dann erstellen Sie die input und label Elemente
const Eingabe = document.createElement(‘input’);
const label = document.createElement(‘label’);
// fügen Sie dann materialisieren Klassen der div-und-Eingang
addressCard.classList.fügen Sie(“Karte”);
input.classList.fügen Sie(“mit Abstand”);
// hinzufügen von Attributen zu Ihnen
label.setAttribute(“für”, geoResult.place_id);
label.innerHTML = geoResult.formatted_address;
input.setAttribute(“name”, “Adresse”);
input.setAttribute(“type”, “radio”);
input.setAttribute(“value”, geoResult.formatted_address);
input.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(label)
return (
// Anhängen der erstellten div um das div locationsAvailable
locationsAvailable.appendChild(addressCard)
);
})
}

In dieser Funktion Durchlaufen wir unsere Ergebnisse, und erstellen Sie einige HTML-Elemente (div , input und label), hängen Sie den Eingang und das Etikett auf das div-Element und schließlich fügen Sie die neuen div zu einem übergeordneten div (das ist locationsAvailable). Sobald wir das Ergebnis von unserer API-Aufruf, unser DOM wird erstellt und dem Benutzer angezeigt.

Als Nächstes aktualisieren wir unsere getGeolocation-Funktion aufrufen, unsere populateCard Funktion durch ersetzen der letzten Zeile getGeolocation mit diesem:

.dann(Daten => populateCard(Daten.Ergebnisse));

…was bedeutet, dass unsere aktualisierte Funktion Aussehen soll:

getGeolocation = (lat, lng) => {
const latlng = lat + “,” + lng;
fetch( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__KEY}` )
.dann(res => res.json())
.dann(Daten => populateCard(Daten.Ergebnisse));
}

An diesem Punkt, sollte alles funktionieren. Unsere Benutzer auf eine Schaltfläche klickt, bekommt eine Position auf der Karte angezeigt, zusammen mit einer Liste von Adressen, die mit der aktuellen Lage.

Schritt 6: Hören Sie auf die map-Ereignisse und wiederholen Sie die Schritte 4 und 5

Wenn unser Benutzer entscheidet, um die Karte zu verschieben oder marker, nichts geschieht, um die UI — neue Adressen werden nicht nicht angezeigt, und alles bleibt statisch. Wir haben, um dieses Problem zu lösen, so lassen wir unsere app dynamische, indem wir auf Ereignisse zuordnen. Sie können Lesen Sie alles über Google-Map-Events.

Es gibt drei Ereignisse, die wir hören wollen, weil:

  1. ziehen: Diese wird ausgelöst, sobald der Benutzer beginnt, ziehen und weiterhin ziehen der Karte anzeigen
  2. dragend: Diese wird ausgelöst, sobald der Benutzer Stoppt das ziehen der Karte anzeigen
  3. idle: Diese wird ausgelöst, nachdem jedes Ereignis ausgelöst wurde und die Karte ist idle

Kurze Frage: Warum sind diese Veranstaltungen am besten geeignet für unsere app?

Schnelle Antwort: Die ersten beiden Veranstaltungen werden sicherstellen, dass unsere map-marker bleibt in der Mitte der map beim drag-event während der idle-event wird eine geocoding-Anfrage mit den neuen Koordinaten.

Zu hören, die für diese Veranstaltungen haben wir ein update der showMap-Funktion mit dem folgenden:

Gmap.addListener(‘ziehen’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
});
Gmap.addListener(‘idle’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
wenn (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(dies.getCenter().lat(), dies.getCenter().lng()); // aktualisieren der Anzeige für die position
}, 2000);
}
});

Wie oben erklärt, die ersten zwei Ereignis-Listener einfach sicherstellen, dass der marker bleibt in der Mitte unserer Karte. Zahlen mehr Aufmerksamkeit auf das idle-Ereignis-listener, weil das ist, wo die action ist.

Sobald der idle-Ereignis ausgelöst wird, wird der marker geht in die Mitte, dann wird eine Prüfung durchgeführt, um herauszufinden, ob die aktuelle position des markers ist identisch mit der lat / lng-Werte erhalten durch die displayLocation Funktion. Wenn es nicht das gleiche ist, dann nennen wir die updatePosition Funktion nach zwei Sekunden der Untätigkeit.

Having said, die, wir haben ein paar updates, um die Funktion showMap. Erstens, auf die header-Funktion, die wir haben, um weitere Parameter und auf die showMap-Funktion aufrufen. Wir brauchen, um den neuen Argumente gibt, auch. Unsere showMap-Funktion sollte wie folgt Aussehen:

showMap = (latlng, lat, lng) => {
lassen Sie mapOptions = {
center: latlng,
zoom: 17
};
Gmap = new google.maps.Karte(mapArea, mapOptions);
Gmap.addListener(‘ziehen’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
});
Gmap.addListener(‘idle’, function () {
Gmarker.setPosition(dies.getCenter()); // set marker position auf Karte zentrieren
wenn (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(dies.getCenter().lat(), dies.getCenter().lng()); // aktualisieren der Anzeige für die position
}, 2000);
}
});
}

Und unsere displayLocation Funktion sollte wie folgt Aussehen:

displayLocation = (position) => {
const lat = position.coords.Breitengrad;
const lng = position.coords.Länge;
const latlng = { lat, lng }
showMap(latlng, lat, lng); //übergeben lat und lng die neuen Argumente der Funktion
createMarker(latlng);
mapArea.Stil.display = “block”;
getGeolocation(lat, lng);
}

Nachdem ich für die Karte, Veranstaltungen, lassen Sie uns wiederholen Sie Schritt 4 und Schritt 5.

Beginnen wir mit dem schreiben unserer updatePosition Funktion. Diese Funktion führen nur eine Aktion für jetzt, das ist vorbei, das neue lat und lng Werte der getGeolocation Funktion:

updatePosition = (lat, lng) => {
getGeolocation(lat, lng);
}

Nach Erhalt der neuen position und abrufen von Adressen, unser DOM soll re-Rendern für den Benutzer, richtig? Gut, gibt es nicht. Und um das zu beheben, erstellen wir eine Funktion, die Kraft der DOM zu re-render:

// überprüfen, ob der container hat einen Kind-Knoten zu zwingen, re-Rendern des dom
Funktion removeAddressCards(){
wenn (locationsAvailable.hasChildNodes()) {
while (locationsAvailable.firstChild) {
locationsAvailable.removeChild(locationsAvailable.firstChild);
}
}
}

Es prüft, ob die locationsAvailable div hat keine childNodes, und wenn es das tut, löscht es diese vor dem erstellen der neuen Adresse-Karten. Die populateCard Funktion ist nun aktualisiert:

populateCard = (geoResults) => {
// überprüfen, ob einer der container hat einen Kind-Knoten zu zwingen, re-Rendern des dom
removeAddressCards();

geoResults.Karte(geoResult => {
// zuerst erstellen Sie die input-div-container
const addressCard = document.createElement(‘div’);
// dann erstellen Sie die input und label Elemente
const Eingabe = document.createElement(‘input’);
const label = document.createElement(‘label’);
// fügen Sie dann materialisieren Klassen der div-und-Eingang
addressCard.classList.fügen Sie(“Karte”);
input.classList.fügen Sie(“mit Abstand”);
// hinzufügen von Attributen zu Ihnen
label.setAttribute(“für”, geoResult.place_id);
label.innerHTML = geoResult.formatted_address;
input.setAttribute(“name”, “Adresse”);
input.setAttribute(“type”, “radio”);
input.setAttribute(“value”, geoResult.formatted_address);
input.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(label);
return (
locationsAvailable.appendChild(addressCard);
);
})
}

Wir sind fertig und können nun vollständig abrufen und anzeigen der Benutzer die Adresse!

Schritt 7: Vor-füllen Sie das Formular mit den Adressdaten der Benutzer wählt

Der Letzte Schritt ist, füllen Sie das Formular mit der Adresse, die der Benutzer auswählt. Wir müssen hinzufügen eine click-Ereignis-listener zu der Adresse, Karte auf und übergeben die Adresse als argument an den callback-Funktion.

Hier ist, wie wir fügen Sie Ereignis-listener in der populateCard Funktion:

input.addEventListener(‘click’, () => inputClicked(geoResult));

Sie sollten beachten, dass die geoResult argument in der obigen callback-ist die ausgewählte Adresse-Objekt aus dem Ergebnis-array. Das heißt, aktualisieren Sie die populateCard Funktion für unsere neue Linie der code.

Die inputClicked-Funktion verwendet eine Reihe von if-Anweisungen Werte zuweisen unserem Formular-Elemente. also vor der Arbeit auf Sie, wir bringen unsere Formular-Elemente in die Gleichung:

const inputAddress = document.getElementById(‘Adresse’,),
inputLocality = document.getElementById(‘Ortschaft’),
inputPostalCode = document.getElementById(‘postal_code’),
inputLandmark = document.getElementById(‘Meilenstein’),
inputCity = document.getElementById(‘city’),
inputState = document.getElementById(‘Status’);

Nachdem dies erledigt ist, lasst uns nun die Arbeit an pre-Befüllen der form mit der address_components in der inputClicked Funktion.

inputClicked = Ergebnis => {
Ergebnis.address_components.Karte(component => {
const Arten = Komponente.Typen
wenn (- Typen.enthält(‘postal_code’)) {
inputPostalCode.Wert = Komponente.long_name
}
wenn (- Typen.enthält(‘Ortschaft’)) {
inputLocality.Wert = Komponente.long_name
}
wenn (- Typen.enthält(‘administrative_area_level_2’)) {
inputCity.Wert = Komponente.long_name
}
wenn (- Typen.enthält(‘administrative_area_level_1’)) {
inputState.Wert = Komponente.long_name
}
wenn (- Typen.enthält(‘point_of_interest’)) {
inputLandmark.Wert = Komponente.long_name
}
});
inputAddress.Wert = Ergebnis.formatted_address;
// zu vermeidende Etiketten überlappende vorausgefüllten Inhalte eingeben
M. updateTextFields();
// entfernt die Adresse, die Karten von der UI
removeAddressCards();
}

Die oben genannten code-block iteriert über die geklickt haben (oder ausgewählte) Adresse der Komponente, überprüft die Arten von Komponenten, und schließlich weist Sie auf die Eingabefelder, wenn Sie übereinstimmen.

M. updateTextFields () – Funktion von Materialisieren und es sorgt dafür, dass das label keine überschneidungen mit den Eingabefeldern Werte und die removeAddressCards () – Funktion entfernt die Adresse, die Karten von der UI.

Mit diesem, wir sind fertig mit unserer app und gespeichert haben, werden unsere Nutzer viel Tipparbeit und Kopfschmerzen! Sicherlich werden Sie uns danken für die Umsetzung einer solchen Lösung des Streits frei.

Diese ganzen UX-experiment kann als eine Verknüpfung, die helfen, den Benutzer vor-füllen Sie die Versand-Adresse form. Wir sollten deutlich hier feststellen, dass die zurückgegebenen Adressen nicht immer zu 100% korrekt. Aber das ist, warum wir es zulassen, die Adresse manuell bearbeitet werden, in der Benutzeroberfläche.

Demo!

Finden Sie den Stift Vorfüll-Adresse Form mit Geolocation und Google Maps von CSS-Tricks (@css-tricks) auf CodePen.