Laten we een formulier dat legt de huidige locatie te gebruiken in een kaart!

0
34

Ik hou van online shoppen. Ik kan vinden wat ik nodig heb en voor de meeste dingen voor een fatsoenlijke prijs. Ik ben Nigeriaanse momenteel werken en studeren in India, en twee dingen die ik vrees bij het winkelen online zijn:

  1. Het invullen van een credit card formulier
  2. Het invullen van verzend-en factuuradres vormen

Misschien ben ik gewoon lui, maar deze dingen zijn niet zonder uitdagingen! Voor de eerste, dankzij de verwerking van de betaling diensten zoals PayPal en e-wallets, ik noch hebben om mijn 12-cijferige nummer van de credit card voor elke nieuwe e-commerce site die ik bezoek, noch het opslaan van mijn credit card gegevens met hen.

Voor de tweede, de enige tijd besparende optie gezien door de meeste winkelen websites is om te redden van uw afleveradres in, maar je hebt nog steeds het formulier invullen (arrghh!). Dit is waar de uitdaging ligt. Ik heb de meeste van mijn bestellingen teruggestuurd, omdat mijn adres (wat ik dacht was aan het juiste adres) kan niet worden geplaatst of bevestigd door de app om één of andere reden.

Adres ingangen zijn uitdagend

Het krijgen van een gebruiker pakken door middel van een invulformulier is een mooie oplossing, maar kan ook een herculische taak voor de gebruiker. Hier is waarom:

  • Als de gebruiker is nieuw in een bepaalde stad, zouden ze niet weten dat hun volledig adres
  • Als de gebruiker wil om het schip naar een nieuw adres, wat niet is opgeslagen (e.g verzending naar een werkplek of een adres van een vriend in plaats van de opgeslagen thuisadres)
  • Als de gebruiker zich bevindt in een stad met een zeer moeilijk address-systemen
  • Als de gebruiker gewoon lui als mij

Een mogelijke oplossing: het adres automatisch

Aan het adres van de gebruiker door de tik/klik van een knop. Yup, dat is makkelijk! De UX is groot als het bespaart de gebruiker tijd en moeite van het invullen van een bepaalde vorm. Het zal ook de eigenaar van de winkel de tijd, moeite en ook geld in sommige gevallen, als er waarschijnlijk een daling in het aantal verkeerd geplaatste bestellingen of leveringen.

We bouwen een mini-app die krijgt een gebruiker mailadres in en laat het op een Google-Kaart interface met vanille JavaScript. Het concept is als volgt:

  1. U vindt de HTML-knop en luister of je een klik-event
  2. Voor de locatie van de gebruiker (breedtegraad en lengtegraad) klik op een knop
  3. Toon de locatie van de gebruiker op een Google kaart
  4. Pas de breedte-en lengtegraad van de Google Maps Geocode API-URL
  5. Display de geretourneerde adres (of adressen) op de GEBRUIKERSINTERFACE voor de gebruiker te selecteren
  6. Luister kaart evenementen en herhaal de stappen 4 en 5
  7. Pre-vul de vorm met de adres gegevens van de gebruiker

Aan de slag en het opzetten van

Bij de bouw van deze app, gaan wij gebruiken om de Werkelijkheid CSS framework om ons te redden wat tijd druk bezig te zijn met stijlen. Concretiseren is een moderne responsive front-end framework, gebaseerd op Google ‘ s systeem-Ontwerp van het Materiaal. De beta versie werkt met vanille JavaScript.

Een basic setup met behulp van Materialiseren van de CSS-en JavaScript-bestanden in een document is als volgt:

<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Adres 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>

We gaan ook naar het gebruik van de Google Maps API voor het weergeven van de kaart en krijgen de gebruiker leesbaar adres. We hebben een API-sleutel om dit te doen. Hier is hoe het te krijgen:

  1. Meld u aan bij uw Google Developer Console Account
  2. Een nieuw project maken of selecteer een bestaand
  3. Klik op “in-Api ‘ s en Diensten”
  4. Selecteer de “Maps Javascript API’ optie
  5. Klik op “Inschakelen” op de nieuwe pagina die verschijnt. Ga terug naar de vorige pagina en doe een zoekopdracht voor “Geocoding API,” klik op inschakelen en
  6. Vervolgens rechts op de nav van de pagina, klik op Referenties, kopieer de API-sleutel op de pagina en opslaan in een bestand

Nu, laten we het bijwerken van onze document aan te tonen van de kaart en laat de gebruiker weten dat het kan worden gebruikt om hun huidige locatie als het adres. Ook, we zullen het toevoegen van een formulier dat is ingevuld met het adres van de gebruiker.

<body>
<div class=”container”>
<h3>Scheepvaart</h3>
<p>U kunt op de onderstaande knop en gebruik uw huidige locatie als uw leveringsadres</p>
<div id=”map”>
</div>
<button id=”showMe” class=”btn”>Mijn Locatie Gebruiken</button>
<form id=”shippingAddress”>
<div id=”locationList”></div>
<br>
<div class=”input-veld”>
<textarea class=”input_fields materialiseren-textarea” id=”adres” type=”text”></textarea>
<label class=”active”=”adres”>Adres (Wijk en Straat)</label>
</div>
<div class=”input-veld”>
<input class=”input_fields” id=”plaats” type=”text”>
<label class=”active”=”locality”>Plaats</label>
</div>
<div class=”input-veld”>
<input class=”input_fields” id=”woonplaats” type=”text”>
<label class=”active”=”stad”>Stad/Wijk/Stad</label>
</div>
<div class=”input-veld”>
<input class=”input_fields” id=”postal_code” type=”text”>
<label class=”active”=”pin_code”>Pin-Code</label>
</div>
<div class=”input-veld”>
<input class=”input_fields” id=”landmark” type=”text”>
<label class=”active”=”landmark”>Bezienswaardigheid</label>
</div>
<div class=”input-veld”>
<input class=”input_fields” id=”state” type=”tekst”>
<label class=”active”=”Provincie”>Provincie</label>
</div>
</form>
<!– Je zou kunnen toevoegen een fallback-adres verzamelen formulier 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>

Terwijl wij hier zijn, laten we de stijl van de dingen een beetje te maken van deze look een beetje beter:

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

#kaart – {
hoogte: 50vh;
margin-bottom: 10px;
display: none;
}

#locationList .kaart {
padding: 10px;
}

#toast-container {
top: 50%;
bodem: niet ingesteld;
}

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

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

Deze CSS verbergt de kaart totdat we klaar zijn om het te bekijken. Onze app ziet er als volgt uit:

Laten we dit plan uit

Onze app maakt gebruik van de HTML5 Geolocation API voor het bepalen van de huidige locatie en Google Geocode API met een techniek genaamd Reverse Geocoding. De Geocode API is een door de mens leesbare adres en veranderingen in de geografische (latitudinal en longitudinale) coördineert en markeert de plek op de kaart.

Reverse Geocoding gebeurt het omgekeerde. Het neemt de lengte-en breedtegraad en zet deze om in leesbare adressen. Geocoding en Reverse Geocoding zijn goed gedocumenteerd.

Hier is hoe onze app werkt:

  1. De gebruiker klikt op de “Mijn Locatie” – knop
  2. De gebruiker is zich met de HTML5 Geolocation API (navigator.geolocation)
  3. We krijgen de gebruiker de geografische coördinaten
  4. We passeren de coördinaten naar de geocode verzoek API
  5. We tonen de resulterende adressen aan de gebruiker

De meeste tijden, de geocode geeft meer dan één adres, zodat we zouden moeten tonen aan de gebruiker alle geretourneerde adressen en laat ze kiezen de meest nauwkeurige.

Phew! Eindelijk, we kunnen weer naar het leuke deel van het daadwerkelijk schrijven van JavaScript. We gaan door elk van de stappen die we hebben aangegeven.

Stap 1: klik op de knop

In onze main.js bestand, laten we een verwijzing naar de HTML-knop. Terwijl we op, we zetten een aantal andere variabelen, moeten we, net als onze API-sleutel.

//Deze div wordt weergegeven in Google kaart
const mapArea = document.getElementById(‘map’);

//Met deze toets zet alles in beweging wanneer erop wordt geklikt
const actionBtn = document.getElementById(‘showMe’);

//Dit display worden de beschikbare adressen geretourneerd door Google ‘ s Api Geocode
const locationsAvailable = document.getElementById(‘locationList’);

//We brengen in onze API_KEY
const __TOETS = ‘YOUR_API_KEY’;

//We verklaren ons Gmameui en Gmarker variabelen die houd de Kaart en Marker Objecten later
laat Gmameui;
laat Gmarker;

//Nu gaan we luisteren naar een gebeurtenis click op onze button
actionBtn.addEventListener(‘klik’, e => {
// verbergen op de knop
actionBtn.stijl.display = “none”;
// roep Materialiseren toast-update gebruiker
M. toast({ html: ‘het ophalen van uw huidige locatie’, klassen: ‘ronde’ });
// voor de gebruiker ‘ s positie
getLocation();
});

Wanneer de klik-handler voor onze knop wordt uitgevoerd, is:

  1. Verbergt de knop
  2. Waarschuwt de gebruiker dat we krijgen van de huidige locatie (een “toast” in Werkelijkheid is als een pop-up bericht)
  3. Roept de getLocation functie

Stap 2: Haal de locatie (lengte-en breedtegraad)

Wanneer onze getLocation functie wordt aangeroepen, we moeten doen wat meer werk. Laten we eerst kijken of we kunnen zelfs gebruik maken van de Geolocatie-API:

getLocation = () => {
// controleren of browser ondersteunt Navigator.geolocation
als (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation, showError, opties);
} else {
M. toast({ html-code: “Sorry, uw browser ondersteunt deze functie niet… Please Update uw Browser om te genieten”, les: “afgeronde” });
}
}

Toen hebben we de steun van gesprekken geolocatie de getCurrentPosition methode. Als het niet ondersteunen, dan is de gebruiker wordt gewaarschuwd dat er geen steun van de browser.

Als er sprake is van ondersteuning, dan is de getCurrentLocation methode is gebruikt om de huidige locatie van het apparaat. De syntaxis is als volgt:

navigator.geolocation.getCurrentPosition(*success, error, [opties]*)

  • succes : Dit is een callback-functie neemt een positie als de enige parameter. Voor ons, ons succes callback-functie is de displayLocation functie.
  • fout : [optioneel] Dit is een callback-functie neemt een PositionError als enige input parameter. U kunt hier meer over lezen hier. Onze fout callback-functie is de showError functie.
  • opties : [optioneel] Dit is een object waarin de opties eigendom te worden doorgegeven aan de getCurrentPosition methode. U kunt hier meer over lezen hier. Onze parameter opties de opties object.

Voor het schrijven van onze displayLocation functie, laat de handgreep van de showError functie en opties object:

// Geeft de verschillende foutmeldingen
showError = (fout) => {
mapArea.stijl.display = “block”
switch (fout.code) {
geval fout.PERMISSION_DENIED:
mapArea.innerHTML = “U geweigerd de aanvraag voor uw locatie.”
break;
geval fout.POSITION_UNAVAILABLE:
mapArea.innerHTML = “Uw Locatie-informatie is niet beschikbaar.”
break;
geval fout.TIME-out:
mapArea.innerHTML = “Uw aanvraag een time-out. Probeer het opnieuw”
break;
geval fout.UNKNOWN_ERROR:
mapArea.innerHTML = “er is Een onbekende fout opgetreden, probeer het later opnieuw.”
break;
}
}
//Zorgt ervoor dat de nauwkeurigheid van de locatie is een hoge
const options = {
enableHighAccuracy: true
}

Nu, laten we het schrijven van de code voor onze displayLocation functie binnen onze main.js bestand:

displayLocation = (positie) => {
const lat = positie.coords.breedte;
const lng = positie.coords.breedtegraad;
}

We hebben nu onze gebruiker lengte-en breedtegraad en kunnen we ze in de console door te schrijven de code hieronder in displayLocation:

console.log( `Huidige lengte is ${lat} en uw lengte ${lng}` );
Stap 3: Laat de gebruiker de huidige locatie op een Google Kaart

Om dit te doen, we zullen het toevoegen van deze regels code om onze displayLocation functie.

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

De eerste lijn brengt ons lat en lng-waarden en kapselt het in de latlng object literal. Dit maakt het gemakkelijk voor ons om te gebruiken in onze app.

De tweede regel van de code roept een showMap functie die aanvaardt een latlng argument. Hier krijgen we voor het concretiseren van onze Google-kaart en maken het in onze UI.

De derde regel roept een createMarker functie die accepteert ook onze object literal (latlng) als argument en gebruikt voor het maken van een Google Maps-Markering voor ons.

De vierde regel is om de mapArea zichtbaar, zodat onze gebruikers kunt nu de locatie.

displayLocation = (positie) => {
const lat = positie.coords.breedte;
const lng = positie.coords.breedtegraad;
const latlng = { lat, lng }
showMap(latlng);
createMarker(latlng);
mapArea.stijl.display = “block”;
}

Nu, laten we naar het creëren van onze functies. We beginnen met de showMap functie.

showMap = (latlng) => {
laat mapOptions = {
center: latlng,
zoom: 17
};
Gmameui = nieuwe google.kaarten.Kaart(mapArea, mapOptions);
}

De showMap van de functie maakt een mapOptions objecten bevatten de kaart center (dat is de lat en lng-coördinaten kregen we van displayLocation) en het zoomniveau van de kaart. Tot slot maken we een exemplaar van de Google Maps-klasse en doorgeven aan onze kaart. In minder woorden, we concretiseren van de Google Maps-klasse.

Om een kaart te maken bijvoorbeeld, geven we twee parameters in de constructor: de div zal de kaart worden weergegeven en de mapOptions. In ons geval, ons div heet mapArea en onze mapOptions heet mapOptions. Na dit, ons gemaakte kaart zal te zien zijn, maar zonder een markering. We hebben een markering zodat de gebruiker zich kan identificeren met hun huidige positie op de kaart.

We maken ons markering met de createMarker functie:

createMarker = (latlng) => {
laat markerOptions = {
positie: latlng,
kaart: Gmameui,
animatie: google.kaarten.Animatie.BOUNCE,
klikbare: true
};
Gmarker = nieuwe google.kaarten.Marker(markerOptions);
}

Een paar dingen op te merken in deze code:

  1. De eigenschap position posities van de marker op de opgegeven latlng
  2. De kaart eigenschap geeft u op de kaart instantie waar de markering moet worden weergegeven (in ons geval, het is Gmameui)
  3. De animatie eigendom voegt een beetje terug naar onze marker
  4. De klikbare eigenschap is ingesteld op true betekent dat onze marker kan worden geklikt
  5. Tot slot, hebben we het concretiseren van de Markering klasse in onze Gmarker instance variabele

Zo ver, onze gebruiker de locatie is opgehaald, wordt de kaart weergegeven en de gebruiker kan zien hun huidige locatie op de kaart. Dingen zien er goed uit! 🕺

Stap 4: Pas de breedte-en lengtegraad van de Geocode API

Google Geocoding API zal worden gebruikt om onze gebruikers de numerieke geografische coördinaten naar een geformatteerde, leesbare adres van het gebruik van de reverse geocoding proces dat we eerder gezegd.

De URL duurt dit formulier:

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

…waar de outputFormat kan een json of xml bepaalt de indeling die wordt gebruikt om de gegevens te leveren. De parameters gedeelte is een lijst van parameters die nodig zijn voor de aanvraag.

Ons verzoek URL er als volgt uit:

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

Laten we verder gaan en de verbinding met de API. Wij willen dit doen in een functie genaamd getGeolocation.

getGeolocation = (lat, lng) => {
const latlng = lat + “,” + lng;
ophalen( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__TOETS}` )
.vervolgens(res => res.json())
.vervolgens(gegevens => console.log(data.de resultaten));
}

De getGeolocation functie heeft twee argumenten ( lat en lng } samengevoegd tot een nieuwe latlng variabele die wordt doorgegeven aan de URL.

Met behulp van de Fetch-API (meer daarover hier), voegen we de nieuwe latlng en __SLEUTEL in de Geocode aanvraag-URL. Dan, op het reactie-object dat we terug zijn we langs de .json methode voor het oplossen van de belofte met JSON. Eindelijk, we melden het antwoord in onze console.

Om gebruik te maken van onze nieuw gecreëerde functie, we noemen het in de displayLocation functie. Dus laten we updaten onze displayLocation functie bevatten de getGeolocation functie-aanroep:

displayLocation = (positie) => {
const lat = positie.coords.breedte;
const lng = positie.coords.breedtegraad;
const latlng = { lat, lng }
showMap(latlng);
createMarker(latlng);
mapArea.stijl.display = “block”;
getGeolocation(lat, lng);// nieuwe functie-aanroep
}

De geretourneerde gegevens moet er als volgt uitzien:

{
“resultaten” :
{
“address_components”:
{
“long_name”: “1600”,
“short_name”: “1600”,
“soorten”: [“street_number”]
},
{
“long_name”: “Amfitheater Pkwy”,
“short_name”: “Amfitheater Pkwy”,
“soorten”: [“route”]
},
{
“long_name”: “Mountain View”,
“short_name”: “Mountain View”,
“soorten”: [“plaats”, “politieke”]
},
{
“long_name”: “Santa Clara County”,
“short_name”: “Santa Clara County”,
“soorten”: [“administrative_area_level_2”, “politieke”]
},
{
“long_name”: “Californië”,
“short_name”: “CA”,
“soorten”: [“administrative_area_level_1”, “politieke”]
},
{
“long_name”: “Verenigde Staten”
“short_name”: “US”,
“soorten”: [“country”, “politieke”]
},
{
“long_name”: “94043”,
“short_name”: “94043”,
“soorten”: [“postal_code”]
}
],
“formatted_address”: “1600 Amphitheatre Parkway, Mountain View, CA 94043, verenigde staten”,
“geometrie”: {
“locatie”: {
“lat”: 37.4224764,
“lng”: -122.0842499
},
“location_type”: “DAK”,
“viewport”: {
“noordoost”: {
“lat”: 37.4238253802915,
“lng”: -122.0829009197085
},
“zuidwest”: {
“lat”: 37.4211274197085,
“lng”: -122.0855988802915
}
}
},
“place_id”: “ChIJ2eUgeAK6j4ARbn5u_wAGqWA”,
“soorten”: [“street_address”]
}
],
“status” : “OK”
}
Stap 5: Weergave van de geretourneerde adres(sen) voor de gebruiker te selecteren

In dit stadium, we hebben een verzoek om Google Geocoding API en hebben gekregen ons resultaat vastgelegd in de console. Nu moeten we de resultaten weer in een UI voor onze gebruikers. Dit vereist twee dingen:

  1. Maak een nieuwe functie die omgaat met het maken van HTML-elementen
  2. Update van onze getGeolocation functie om de functie oproep

We maken de functie die zorg zou dragen voor het maken van de HTML-elementen en het bijwerken van de DOM.

populateCard = (geoResults) => {
geoResults.kaart(geoResult => {
// maak eerst de ingang div-container
const addressCard = document.createElement(‘div’);
// maak de input en etiketteringselementen
const input = document.createElement(‘input’);
const label = document.createElement(‘label’);
// voeg materialiseren klassen aan de div en invoer
addressCard.classList.toevoegen(“card”);
input.classList.toevoegen(“met-gap”);
// kenmerken toevoegen aan hen
label.setAttribute(“voor”, geoResult.place_id);
label.innerHTML = geoResult.formatted_address;
input.setAttribute(“naam”, “adres”);
input.setAttribute(“type”, “radio”);
input.setAttribute(“value”, geoResult.formatted_address);
input.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(label)
return (
// append gemaakt van de div om de locationsAvailable div
locationsAvailable.appendChild(addressCard)
);
})
}

In deze functie, die we doorlopen van onze resultaten en het maken van bepaalde HTML-elementen (div , ingang en een label), toevoegen van de input en het label aan de div en tot slot voegt u de nieuwe div-een ouder div (dat is locationsAvailable). Zodra we het resultaat van onze API-aanroep, onze DOM zal worden gemaakt en weergegeven voor de gebruiker.

Volgende, we updaten onze getGeolocation functie om te bellen met onze populateCard functie door het vervangen van de laatste regel van getGeolocation met dit:

.vervolgens(gegevens => populateCard(gegevens.de resultaten));

…wat betekent dat onze bijgewerkt functie eruit moeten zien:

getGeolocation = (lat, lng) => {
const latlng = lat + “,” + lng;
ophalen( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__TOETS}` )
.vervolgens(res => res.json())
.vervolgens(gegevens => populateCard(gegevens.de resultaten));
}

Op dit punt, moet alles werkt prima. Onze gebruiker op een knop klikt, krijgt u een locatie op de kaart weergegeven, samen met een lijst van adressen die overeenkomen met de huidige locatie.

Stap 6: Luisteren naar kaart van evenementen en herhaal de stappen 4 en 5

Wanneer onze gebruiker besluit om de kaart te verplaatsen of marker, gebeurt er niets met de UI — nieuwe adressen worden niet getoond en alles blijft statisch. We hebben om dit op te lossen, dus laten we onze app dynamisch door te luisteren naar kaart evenementen. U leest er alles over Google-Kaart Gebeurtenissen hier.

Er zijn drie evenementen willen we luisteren naar:

  1. sleep: Deze wordt geactiveerd zodra de gebruiker begint te slepen en blijft sleep de kaart
  2. dragend: Dit is ontslagen nadat de gebruiker stopt met het slepen van de kaart
  3. in de ruststand: Dit is ontslagen nadat elke gebeurtenis is gestart en de kaart is niet actief

Snelle Vraag: Waarom zijn deze gebeurtenissen het meest geschikt voor onze app?

Snel een Antwoord: De eerste twee evenementen zullen ervoor zorgen dat onze kaart marker blijft in het midden van de kaart tijdens het slepen evenement terwijl het stationaire geval zal een geocodering verzoek met de nieuwe coördinaten.

Om te luisteren naar deze evenementen hebben we voor het bijwerken van de showMap functie met de volgende:

Gmameui.addListener(‘sleep’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
});
Gmameui.addListener(‘dragend’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
});
Gmameui.addListener(‘idle’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
als (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(deze.getCenter().lat(), dit.getCenter().lng()); // update-stand display
}, 2000);
}
});

Zoals hierboven uitgelegd, worden de eerste twee gebeurtenislisteners gewoon zorgen dat de markering blijft in het centrum van onze kaart. Meer aandacht te besteden aan de idle event-listener, want dat is waar de actie is.

Zodra de ruststand event wordt geactiveerd, wordt de markering gaat naar het centrum, dan wordt er een controle gedaan om te achterhalen of de huidige positie van de markering is hetzelfde met de lat of lng-waarden ontvangen door de displayLocation functie. Als het niet hetzelfde is, dan noemen we de updatePosition functie na twee seconden van inactiviteit.

Dat gezegd hebbende, hebben we te maken met een paar updates voor de showMap functie. Ten eerste, op de kop van de functie, die we hebben om meer parameters en op de showMap functie-aanroep. Moeten We de nieuwe argumenten er ook. Onze showMap functie ziet er als volgt uit:

showMap = (latlng, lat, lng) => {
laat mapOptions = {
center: latlng,
zoom: 17
};
Gmameui = nieuwe google.kaarten.Kaart(mapArea, mapOptions);
Gmameui.addListener(‘sleep’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
});
Gmameui.addListener(‘dragend’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
});
Gmameui.addListener(‘idle’, function () {
Gmarker.setPosition(deze.getCenter()); // set marker positie in kaart center
als (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(deze.getCenter().lat(), dit.getCenter().lng()); // update-stand display
}, 2000);
}
});
}

En onze displayLocation functie ziet er als volgt uit:

displayLocation = (positie) => {
const lat = positie.coords.breedte;
const lng = positie.coords.breedtegraad;
const latlng = { lat, lng }
showMap(latlng, lat, lng); //doorgegeven lat en lng als het nieuwe argumenten voor de functie
createMarker(latlng);
mapArea.stijl.display = “block”;
getGeolocation(lat, lng);
}

Na het beluisteren van de kaart gebeurtenissen, laten we herhaal Stap 4 en Stap 5.

We beginnen met het schrijven van onze updatePosition functie. Deze functie zal het uitvoeren van een actie voor nu, die is geslaagd voor de nieuwe lat en lng-waarden voor de getGeolocation functie:

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

Na het krijgen van de nieuwe positie en het ophalen van adressen, ons DOM opnieuw moet renderen voor de gebruiker, toch? Nou, het hoeft niet. En om dat vast te stellen, maken we een functie die kracht van de DOM te re-render:

// controleren of de container is voorzien van een onderliggend knooppunt te dwingen opnieuw renderen van de dom
functie removeAddressCards(){
als (locationsAvailable.hasChildNodes()) {
terwijl (locationsAvailable.firstChild) {
locationsAvailable.removeChild(locationsAvailable.firstChild);
}
}
}

Het controleert of de locationsAvailable div heeft een childNodes, en als dit het geval is, verwijdert deze voordat u het nieuwe adres van kaarten. De populateCard functie is nu bijgewerkt naar dit:

populateCard = (geoResults) => {
// controleren of de container is voorzien van een onderliggend knooppunt te dwingen opnieuw renderen van de dom
removeAddressCards();

geoResults.kaart(geoResult => {
// maak eerst de ingang div-container
const addressCard = document.createElement(‘div’);
// maak de input en etiketteringselementen
const input = document.createElement(‘input’);
const label = document.createElement(‘label’);
// voeg materialiseren klassen aan de div en invoer
addressCard.classList.toevoegen(“card”);
input.classList.toevoegen(“met-gap”);
// kenmerken toevoegen aan hen
label.setAttribute(“voor”, geoResult.place_id);
label.innerHTML = geoResult.formatted_address;
input.setAttribute(“naam”, “adres”);
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);
);
})
}

We zijn klaar en zijn nu in staat om volledig te krijgen en scherm het adres van de gebruiker!

Stap 7: het Vooraf invullen van het formulier met de adres gegevens van de gebruiker

De laatste stap is het invullen van het formulier met het adres van de gebruiker. We moeten toe te voegen klik op een event-listener aan het adres van de kaart en het doorgeven van het adres als argument aan de functie terugbellen.

Hier is hoe voegen we de event-listener in de populateCard functie:

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

U moet er rekening mee dat de geoResult argument in de bovenstaande callback wordt het geselecteerde object adres van de resultaten array. Dat gezegd hebbende, het bijwerken van de populateCard functie voor de nieuwe regel van de code.

De inputClicked functie maakt gebruik van een reeks instructies als waarden toe te kennen aan onze elementen in het formulier. dus voordat u aan de slag, laten we ‘ ons formulier elementen in de vergelijking:

const inputAddress = document.getElementById(‘adres’),
inputLocality = document.getElementById(‘plaats’),
inputPostalCode = document.getElementById (“postal_code”),
inputLandmark = document.getElementById(‘landmark’),
inputCity = document.getElementById(‘stad’),
inputState = document.getElementById(‘staat’);

Nadat dit gedaan, laten we nu werken aan vooraf invullen van het formulier met de address_components in de inputClicked functie.

inputClicked = resultaat => {
resultaat.address_components.kaart(component => {
const soorten = component.soorten
als (soorten.bevat (“postal_code”)) {
inputPostalCode.waarde = component.long_name
}
als (soorten.bevat(‘plaats’)) {
inputLocality.waarde = component.long_name
}
als (soorten.bevat(‘administrative_area_level_2’)) {
inputCity.waarde = component.long_name
}
als (soorten.bevat(‘administrative_area_level_1’)) {
inputState.waarde = component.long_name
}
als (soorten.bevat(‘point_of_interest’)) {
inputLandmark.waarde = component.long_name
}
});
inputAddress.waarde = resultaat.formatted_address;
// om te voorkomen dat etiketten overlappende pre-gevuld ingang inhoud
M. updateTextFields();
// verwijdert de kaarten van de UI
removeAddressCards();
}

De hierboven blok van de code gaat over de geklikt (of geselecteerde) adres component, controleert de types van componenten en tot slot wijst ze naar de invoervelden als ze overeenkomen.

M. updateTextFields() functie is van de Werkelijkheid en het zorgt ervoor dat het etiket niet overlapt met de invoervelden waarden en de removeAddressCards() functie verwijdert de kaarten van de UI.

Met deze, we zijn klaar met onze app en hebben gered van onze gebruikers heel veel typen en hoofdpijn! Zeker zullen ze ons dankbaar zijn voor het uitvoeren van dergelijke een probleemloze oplossing.

Dit hele UX experiment kan worden gezien als een snelkoppeling die u zullen helpen de gebruiker pre-vul het afleveradres in vorm. We moeten duidelijk vermelden hier dat de geretourneerde adressen is niet altijd 100% accuraat. Maar dat is waarom we het adres handmatig worden bewerkt in de UI.

Demo!

Zie de Pen Uitvullen Adres Vorm met Geolocatie en Google Maps door CSS-Tricks (@css-tricks) op CodePen.