La oss lage en form som setter gjeldende plassering til bruk i et kart!

0
57

Jeg elsker å handle på nettet. Jeg finner det jeg trenger og få de fleste ting for en anstendig pris. Jeg er Nigerianske tiden jobbe og studere i India, og to ting jeg gruer meg når du handler på nettet er:

  1. Å fylle ut et kredittkort form
  2. Fylle ut shipping og fakturaadresse former

Kanskje er jeg bare lat, men disse tingene er ikke uten utfordringer! For det første, takk til betaling behandling tjenester som PayPal og e-lommebøker, jeg har heller ikke til å skrive i min 12-sifret kreditt kort nummer for hver nye e-commerce området jeg besøker, og har heller ikke til å lagre mine kredittkortopplysninger med dem.

For det andre, bare tidsbesparende alternativ som er gitt av de fleste shopping nettsteder er å spare din leveringsadresse, men du har fortsatt å fylle ut skjemaet (arrghh!). Det er der utfordringen ligger. Jeg har hatt de fleste av mine ordre returneres fordi min adresse (som jeg trodde var riktig adresse), ikke kunne være plassert eller bekreftet av app for en eller annen grunn.

Adresse innganger er utfordrende

Å få en brukers adresse gjennom en inngang form er en ren løsning, men kan også være en herculean oppgave for brukeren. Her er hvorfor:

  • Hvis brukeren er nye i en bestemt by, kanskje de ikke vet sitt fulle adresse
  • Hvis brukeren ønsker å sende til en ny adresse som ikke er lagret (e.g frakt til en arbeidsplass eller en venns adresse i stedet for lagrede adresse)
  • Hvis brukeren bor i en by med svært vanskelig adresse systemer
  • Hvis brukeren er vanlig lat som meg

En potensiell løsning: få adressen automatisk

Komme i brukerens adresse, pek/klikk på en knapp. Yup, det er enkelt! UX er flott som det sparer brukeren både tid og krefter på å fylle ut noen form. Det vil også spare store eieren tid, krefter, og til og med penger i noen tilfeller, som det vil trolig være en reduksjon i antall feil plassert ordre eller forsendelser.

La oss bygge en mini-appen som får en brukers adresse og viser det på en Google-Kart grensesnitt ved hjelp av vanilje JavaScript. Konseptet er som følger:

  1. Få HTML-knappen og høre et klikk event
  2. Få brukerens posisjon (breddegrad og lengdegrad) på et klikk på en knapp
  3. Vise brukerens posisjon på et Google kart
  4. Pass breddegrad og lengdegrad til Google Maps Geocode API URL
  5. Vise tilbake-adresse (eller en liste over adresser) på BRUKERGRENSESNITT for brukeren å velge en
  6. Lytt til kart hendelser, og gjenta trinn 4 og 5
  7. Pre-fyll ut skjemaet med adresse data brukeren velger

Komme i gang og sette opp

For å bygge denne app, vi kommer til å bruke den Materialisere CSS rammeverk for å spare oss for litt tid fussing med stiler. Vestfold er et moderne responsive front-end rammeverk basert på Googles Materiale Design system. Beta-versjonen fungerer med vanilje JavaScript.

En grunnleggende oppsett ved å bruke Materialisere er CSS og JavaScript-filer i et dokument som dette:

<!DOCTYPE html>
<html lang=”no”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, første-skala=1.0″>
<title>Adresse 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>

Vi også kommer til å bruke Google Maps API for å vise kartet og få brukeren er lesbar adresse. Vi trenger en API-nøkkel for å gjøre dette. Her er hvordan å bli en:

  1. Logg deg på Google developers-Konsollen Konto
  2. Opprette et nytt prosjekt eller velge en eksisterende
  3. Klikk på “Aktiver Api-er og Tjenester”
  4. Velg “Kart Javascript API” alternativet
  5. Klikk “Aktiver” på den nye siden som kommer opp. Gå tilbake til forrige side og gjør et søk for “Geokode API, klikker du på det og gjøre det så godt
  6. Deretter, på den høyre nav på siden, klikk på Legitimasjonen, kopiere API-nøkkel på siden, og lagre den i en fil

Nå, la oss oppdatere våre dokument for å vise kartet og la brukeren vet det kan brukes til å få sin nåværende posisjon som adresse. Også, vil vi legge til en form som er forhåndsutfylt med adressen brukeren velger.

<body>
<div class=”beholder”>
<h3>leveringsadresse</h3>
<p>Du kan klikke på knappen nedenfor for å bruke den gjeldende posisjonen din som din leveringsadresse</p>
<div id=”kart”>
</div>
<- knappen id=”showMe” class=”btn”>Bruk Min Plassering</button>
<form id=”shippingAddress”>
<div id=”locationList”></div>
<br>
<div class=”input-feltet”>
<textarea class=”input_fields materialisere-textarea” id=”adresse” type=”text”></textarea>
<label class=”aktiv” for=”adresse”>Adresse (Området og Gaten)</label>
</div>
<div class=”input-feltet”>
<input class=”input_fields” id=”lokalitet” type=”text”>
<label class=”aktiv” for=”lokalitet”>Sted</label>
</div>
<div class=”input-feltet”>
<input class=”input_fields” id=”byen” type=”text”>
<label class=”aktiv” for=”byen”>By/Distrikt/By</label>
</div>
<div class=”input-feltet”>
<input class=”input_fields” id=”postal_code” type=”text”>
<label class=”aktiv” for=”pin_code”>Pin-Kode</label>
</div>
<div class=”input-feltet”>
<input class=”input_fields” id=”landemerke” type=”text”>
<label class=”aktiv” for=”landemerke”>Landemerke</label>
</div>
<div class=”input-feltet”>
<input class=”input_fields” id=”staten” type=”text”>
<label class=”aktiv” for=”Staten”>State</label>
</div>
</form>
<!– Du kan legge til et skifte adresse gathering skjemaet her –>
</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>

Mens vi er her, la oss style ting litt for å gjøre dette se litt bedre:

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

#kartet {
høyde: 50vh;
margin-bottom: 10px;
display: none;
}

#locationList .kort {
padding: 10px;
}

#toast-container {
øverst: 50%;
nederst: unset;
}

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

@media bare skjermen og (maks bredde: 768px) {
.beholder {
bredde: 80%;
}
}

Dette CSS skjuler kartet før vi er klare til å vise det. Våre app bør se ut som dette:

La oss planlegge ut dette

Våre app vil være å gjøre bruk av HTML5 Geolocation API for å bestemme vår brukerens nåværende plassering samt Googles Geocode API med en teknikk som kalles Revers Geokode. Den Geocode API tar en lesbar adresse og endringer det inn geografisk (latitudinal og langsgående) koordinater og markerer stedet i kartet.

Omvendt Geokode gjør det motsatte. Det tar breddegrad og lengdegrad og konverterer dem til lesbar adresser. Geokode og Omvendt Geokode er godt dokumentert.

Her er hvordan vår app vil fungere:

  1. Brukeren klikker på “Bruk Min Posisjon” – knappen
  2. Brukeren er forretningsvennlig og ligger med HTML5 Geolocation API (navigator.geolocation)
  3. Vi får brukerens geografiske koordinater
  4. Vi passerer koordinatene til geocode forespørsel API
  5. Vi viser det resulterende adresser til brukeren

De fleste ganger, geocode returnerer mer enn én adresse, så ville vi ha for å vise brukeren alle de returnerte adresser og la dem velge den mest nøyaktige.

Phew! Endelig kan vi få til den morsomme delen av faktisk å skrive JavaScript. La oss gå gjennom hvert av trinnene vi beskrevet.

Trinn 1: klikk på den knappen for

I vår main.js fil, la oss få en referanse til HTML-knappen. Mens vi er inne på det, vil vi sette opp noen andre variabler som vi trenger, som våre API-nøkkel.

//Dette div vil vise Google kart
const mapArea = – dokument.bürgerliches(‘kart’);

//Denne knappen vil sette alt i bevegelse når du har klikket
const actionBtn = – dokument.bürgerliches(‘showMe’);

//Denne vil vise alle tilgjengelige adressene som returneres av Googles Api Geocode
const locationsAvailable = – dokument.bürgerliches(‘locationList’);

//La oss bringe i vår API_KEY
const __KEY = ‘YOUR_API_KEY’;

//La oss erklære våre Gmap og Gmarker variabler som vil holde Kartet og Markør Objekter senere
la Gmap;
la Gmarker;

//Nå er vi høre et klikk hendelsen på våre knappen
actionBtn.addEventListener(‘click’, e => {
// skjul-knappen
actionBtn.stil.vis = “ingen”;
// samtale Materialisere toast til å oppdatere bruker
M. toast({ html: ‘henting av din nåværende posisjon, klasser: ‘runde’ });
// komme i brukerens posisjon
getLocation();
});

Når de klikker du handler for våre knappen går, det:

  1. Skjuler knappen
  2. Varsler brukeren om at vi får sin nåværende plassering (en “skål” i Vestfold er som en popup-melding)
  3. Kaller getLocation funksjon

Trinn 2: Få brukerens posisjon (breddegrad og lengdegrad)

Når våre getLocation funksjonen aktiveres, må vi gjøre litt mer arbeid. La oss først sjekke om vi kan til og med bruke Geolocation API:

getLocation = () => {
// sjekker om brukerens nettleser støtter Navigator.geolocation
hvis (navigator.geolocation) {
navigator.geolokasjon.getCurrentPosition(displayLocation, showError, valg);
} else {
M. toast({ html -: “Beklager, nettleseren din støtter ikke denne funksjonen… må du Oppdatere din Nettleser for å nyte det”, klasser: “avrundet” });
}
}

Når vi har støtte, det kaller geolocation er getCurrentPosition metode. Hvis den ikke har støtte, så brukeren er varslet om at det er ingen nettleser støtte.

Hvis det er støtte, så getCurrentLocation metoden er brukt for å få den nåværende posisjon av enheten. Syntaksen er slik:

navigator.geolokasjon.getCurrentPosition(*suksess, feil, [valg]*)

  • suksess : Dette er en callback-funksjon som tar en posisjon som eneste parameter. For oss, vår suksess tilbakering funksjon er displayLocation funksjon.
  • feil : [valgfri] Dette er en callback-funksjon som tar en PositionError som eneste input parameter. Du kan lese mer om dette her. Våre feil tilbakering funksjon er showError funksjon.
  • valg : [valgfri] Dette er et objekt som beskriver valg eiendom skal sendes til getCurrentPosition metode. Du kan lese mer om dette her. Våre valg parameter er valg objekt.

Før du skriver vår displayLocation funksjon, la oss håndtere showError funksjon og valg objekt:

// Viser de forskjellige feilmeldinger
showError = (feil) => {
mapArea.stil.vis = “block”
bryteren (feil.kode) {
saken feil.PERMISSION_DENIED:
mapArea.innerHTML = “Du har avslått forespørselen for ditt sted.”
break;
saken feil.POSITION_UNAVAILABLE:
mapArea.innerHTML = “Din posisjonsinformasjon er utilgjengelig.”
break;
saken feil.TIMEOUT:
mapArea.innerHTML = “forespørsel avbrutt. Vennligst prøv på nytt”
break;
saken feil.UNKNOWN_ERROR:
mapArea.innerHTML = “ukjent feil har oppstått, vennligst prøv igjen etter noen tid.”
break;
}
}
//Sørger for at posisjonsnøyaktigheten er høy
const valg = {
enableHighAccuracy: true
}

Nå, la oss skrive koden for våre displayLocation funksjon inne i vår main.js fil:

displayLocation = (posisjon) => {
const lat = posisjon.koord..breddegrad;
const lng = posisjon.koord..lengdegrad;
}

Vi har nå vår brukerens breddegrad og lengdegrad, og vi kan se dem i konsollen ved å skrive inn koden nedenfor på innsiden displayLocation:

– konsollen.logg( `Gjeldende Breddegrad er ${lat} og lengdegrad er ${lng}` );
Trinn 3: Vis brukerens nåværende posisjon på et Google Kart

For å gjøre dette, vil vi legge til disse linjene med kode til vår displayLocation funksjon.

const latlng = {lat lng}
showMap(latlng);
createMarker(latlng);
mapArea.stil.vis = “block”;

Den første linjen tar våre lat og lng-verdier og omslutter det i latlng objekt bokstavelig. Dette gjør det lett for oss å bruke i vår app.

Den andre linjen med kode kaller en showMap funksjon som aksepterer en latlng argument. Her får vi instantiate Google map og gjengi det i vår UI.

Den tredje linjen som påkaller en createMarker funksjon som også aksepterer våre objekt bokstavelig (latlng) som argument og bruker det til å opprette en Google Maps-Markør for oss.

Den fjerde linjen gjør mapArea synlig, slik at våre brukere kan nå se beliggenheten.

displayLocation = (posisjon) => {
const lat = posisjon.koord..breddegrad;
const lng = posisjon.koord..lengdegrad;
const latlng = { lat lng }
showMap(latlng);
createMarker(latlng);
mapArea.stil.vis = “block”;
}

Nå, la oss komme til å skape våre funksjoner. Vi vil starte med showMap funksjon.

showMap = (latlng) => {
la mapOptions = {
center: latlng,
zoom: 17
};
Gmap = ny google.kart.Kart(mapArea, mapOptions);
}

Den showMap funksjonen skaper en mapOptions objekter som inneholder kart center (som er lat og lng-koordinater som vi fikk fra displayLocation) og zoom-nivå på kartet. Til slutt, vi oppretter en forekomst av Google Maps-klasse og gi det videre til våre kart. I færre ord, vi instantiate Google Maps-klasse.

For å lage et kart som eksempel, kan vi angi to parametre i konstruktøren: div kartet vil vises, og mapOptions. I vårt tilfelle, vår div kalles mapArea og våre mapOptions kalles mapOptions. Etter dette, er vår opprettet kart vil dukke opp, men uten en markør. Vi trenger en markør, slik at brukeren kan identifisere deres nåværende posisjon på kartet.

La oss lage vår markør ved hjelp av createMarker funksjon:

createMarker = (latlng) => {
la markerOptions = {
posisjon: latlng,
kart: Gmap,
animasjon: google.kart.Animasjon.SPRETTE,
klikkbare: true
};
Gmarker = ny google.kart.Markør(markerOptions);
}

Et par ting å merke seg i denne koden:

  1. Stillingen eiendom stillinger markøren på den angitte latlng
  2. Kartet egenskapen angir kartet eksempel hvor markøren skal bli gjort (i vårt tilfelle, det er Gmap)
  3. Animasjonen eiendom legger til en liten BOUNCE til vår markør
  4. Det klikkbare eiendommen satt til true betyr at våre markør kan klikkes
  5. Til slutt, vi instantiate Markøren klasse i vår Gmarker instance variable

Så langt, har våre brukerens plassering har blitt hentet, kartet har gjort, og brukeren kan se gjeldende plassering på kartet. Ting ser bra ut! 🕺

Trinn 4: Pass breddegrad og lengdegrad til Geocode API

Googles Geokode API vil bli brukt til å konvertere vår brukerens numeriske geografiske koordinatene til et formatert, lesbar-adresse ved hjelp av den omvendte geokode prosessen vi dekket tidligere.

URL tar dette skjemaet:

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

…hvor outputFormat kan enten være en json eller xml som bestemmer formatet som brukes til å levere data. Parametrene del er en liste over parametere som trengs for forespørsel.

Våre forespørsel URL-en vil se ut som dette:

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

La oss gå videre og koble til API. Vi ville gjøre dette på en funksjon som kalles getGeolocation.

getGeolocation = (lat lng) => {
const latlng = lat -+ “, ” + lng;
hente( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__- TASTEN}` )
.deretter(res => res.json())
.deretter(data => konsollen.logg(data.resultater));
}

Den getGeolocation funksjon som tar to argumenter ( lat og lng } setter sammen dem til å danne en ny latlng variabel som er gått over til den URL-en.

Ved å bruke Hente API (mer om dette her), og vi legger til den nye latlng og __ – TASTEN i Geocode forespørsel URL. Deretter, i response-objektet vi får tilbake, vi passerer .json metode for å løse løfte med JSON. Til slutt, vi logger svaret i vår konsollen.

Å gjøre bruk av vår nyopprettede funksjonen, må vi kaller det i displayLocation funksjon. Så la oss oppdatere våre displayLocation funksjonen til å inneholde getGeolocation funksjonen samtale:

displayLocation = (posisjon) => {
const lat = posisjon.koord..breddegrad;
const lng = posisjon.koord..lengdegrad;
const latlng = { lat lng }
showMap(latlng);
createMarker(latlng);
mapArea.stil.vis = “block”;
getGeolocation(lat lng)// våre nye funksjonen samtale
}

De returnerte dataene skal se ut noe som dette:

{
“resultater” :
{
“address_components”:
{
“long_name”: “1600”,
“short_name”: “1600”,
“typer”: [“street_number”]
},
{
“long_name”: “Amfiteater Pkwy”,
“short_name”: “Amfiteater Pkwy”,
“typer”: [“rute”]
},
{
“long_name”: “Mountain View”,
“short_name”: “Mountain View”,
“typer”: [“lokalitet”, “politiske”]
},
{
“long_name”: “Santa Clara County”,
“short_name”: “Santa Clara County”,
“typer”: [“administrative_area_level_2”, “politiske”]
},
{
“long_name”: “California”,
“short_name”: “CA”,
“typer”: [“administrative_area_level_1”, “politiske”]
},
{
“long_name”: “Usa”,
“short_name”: “OSS”,
“typer”: [“landet”, “politiske”]
},
{
“long_name”: “94043, usa”,
“short_name”: “94043, usa”,
“typer”: [“postal_code”]
}
],
“formatted_address”: “1600 Amphitheatre Parkway, Mountain View, CA 94043, USA”,
“geometri”: {
“beliggenhet”: {
“lat”: 37.4224764,
“lng”: -122.0842499
},
“location_type”: “TAKET”,
“viewport”: {
“nordøst”: {
“lat”: 37.4238253802915,
“lng”: -122.0829009197085
},
“sørvest”: {
“lat”: 37.4211274197085,
“lng”: -122.0855988802915
}
}
},
“place_id”: “ChIJ2eUgeAK6j4ARbn5u_wAGqWA”,
“typer”: [“street_address”]
}
],
“status” : “OK”
}
Trinn 5: Vise de returnerte adresse(r) for brukeren til å velge

På dette stadiet, har vi laget en forespørsel til Google er å Geokode API og har fått våre resultat er logget på konsollen. Nå har vi for å vise resultatene i en UI for våre brukere. Dette krever to ting:

  1. Opprette en ny funksjon som håndterer å lage HTML-elementer
  2. Oppdatere våre getGeolocation-funksjonen for å gjøre funksjonen samtale

La oss lage en funksjon som skulle ta seg av å lage HTML-elementer og oppdatere DOM.

populateCard = (geoResults) => {
geoResults.kart(geoResult => {
// du først opprette inngang div container
const addressCard = – dokument.createElement(‘div’);
// opprett deretter inn-og etikettelementer
const input = – dokument.createElement(‘input’);
const etikett-dokument.createElement(‘label’);
// legg deretter til materialisere klasser til div og innspill
addressCard.classList.legge til(“kortet”);
input.classList.legge til(“gap”);
// legger til attributter til dem
etiketten.setAttribute(“for”, geoResult.place_id);
etiketten.innerHTML = geoResult.formatted_address;
input.setAttribute(“name”, “adresse”);
input.setAttribute(“type”, “radio”);
input.setAttribute(“verdi”, geoResult.formatted_address);
input.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(etikett)
retur (
// legg opprettet div til locationsAvailable div
locationsAvailable.appendChild(addressCard)
);
})
}

I denne funksjonen, må vi gå gjennom våre resultater og skape noen HTML-elementer (div , inngang og en etikett), legge til innspill og etiketten til div og endelig legge den nye div til et overordnet div (som er locationsAvailable). Når vi får resultatene fra våre API-kall, vår DOM vil bli opprettet og vises til brukeren.

Neste, vi oppdaterer våre getGeolocation funksjon for å ringe vår populateCard funksjon ved å bytte ut den siste linjen av getGeolocation med dette:

.deretter(data => populateCard(data.resultater));

…som betyr våre oppdaterte funksjonen skal se denne:

getGeolocation = (lat lng) => {
const latlng = lat -+ “, ” + lng;
hente( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latlng}&key=${__- TASTEN}` )
.deretter(res => res.json())
.deretter(data => populateCard(data.resultater));
}

På dette punktet, bør alt fungere fint. Våre brukeren klikker på en knapp, får en posisjon vises på kartet sammen med en liste over adresser som samsvarer med den gjeldende plasseringen.

Trinn 6: Lytt til kart hendelser, og gjenta trinn 4 og 5

Hvis brukeren bestemmer seg for å flytte kartet eller markør, skjer det ingenting å UI — nye adressene ikke vises ikke og alt forblir statisk. Vi har fått for å fikse dette, så la oss gjøre vår app dynamisk ved å lytte til kart hendelser. Du kan lese alt om Google-Kart Arrangementer her.

Det er tre ting vi ønsker å lytte til:

  1. dra: Dette er sparket i gang brukeren starter å dra og fortsetter å dra i kartet
  2. dragend: Dette er sparket når brukeren slutter å dra i kartet
  3. ledig: Dette er sparket i gang i hver event har blitt sparket, og kartet er ledig

Et raskt Spørsmål: Hvorfor er disse hendelsene som er best egnet for vår app?

Raskt Svar: De to første hendelsene vil sørge for at våre kartmarkøren opphold i midten av kartet mens du drar arrangementet mens den inaktive arrangementet vil gjøre en geokode avtale med de nye koordinatene.

Til å lytte etter disse hendelsene vi har å oppdatere showMap funksjon med følgende:

Gmap.addListener(‘dra’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
});
Gmap.addListener(‘inaktiv’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
hvis (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(denne.getCenter().lat(), dette.getCenter().lng()); // oppdater posisjon display
}, 2000);
}
});

Som forklart ovenfor, er de to første event lyttere bare sørge for at merket fortsatt er i sentrum av vårt kart. Betale nærmere oppmerksomhet til den inaktive event lytteren fordi det er der handlingen er.

Når inaktiv arrangementet er avfyrt, og markøren går til sentrum, deretter en sjekk er gjort for å finne ut om den aktuelle posisjonen til markøren er den samme lat-eller lng-verdier mottatt av displayLocation funksjon. Hvis det ikke er det samme, så vi kaller updatePosition funksjon etter to sekunder av lediggang.

Når det er sagt, har vi å gjøre noen oppdateringer til showMap funksjon. Først, på den funksjonen hodet, vi har for å inkludere flere parametere og på showMap funksjonen samtale. Vi må legge til den nye argumenter på det også. Våre showMap funksjon bør se ut som dette:

showMap = (latlng, lat lng) => {
la mapOptions = {
center: latlng,
zoom: 17
};
Gmap = ny google.kart.Kart(mapArea, mapOptions);
Gmap.addListener(‘dra’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
});
Gmap.addListener(‘inaktiv’, function () {
Gmarker.setPosition(denne.getCenter()); // sett markørposisjon for å kartlegge center
hvis (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(denne.getCenter().lat(), dette.getCenter().lng()); // oppdater posisjon display
}, 2000);
}
});
}

Og vår displayLocation funksjon bør se ut som dette:

displayLocation = (posisjon) => {
const lat = posisjon.koord..breddegrad;
const lng = posisjon.koord..lengdegrad;
const latlng = { lat lng }
showMap(latlng, lat lng); //bestått lat og lng som den nye argumenter til funksjonen
createMarker(latlng);
mapArea.stil.vis = “block”;
getGeolocation(lat lng);
}

Etter å ha lyttet til kart hendelser, la oss gjenta trinn 4 og Trinn 5.

Vi starter med å skrive vår updatePosition funksjon. Denne funksjonen vil bare utføre en handling for nå, som er å passere den nye lat og lng-verdier til getGeolocation funksjon:

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

Etter å ha fått ny plassering og henting av adresser, vår DOM bør re-gjengi for brukeren, ikke sant? Vel, det har det ikke. Og for å fikse det, kan vi lage en funksjon som vil tvinge DOM for å re-gjengi:

// sjekker om beholderen har et barn node for å styrke re-gjengi dom
funksjonen removeAddressCards(){
hvis (locationsAvailable.hasChildNodes()) {
mens (locationsAvailable.firstChild) {
locationsAvailable.removeChild(locationsAvailable.firstChild);
}
}
}

Det kontrollerer om locationsAvailable div har noen childNodes, og hvis det gjør det, sletter du dem før du oppretter nye adressekort. Den populateCard funksjonen er nå oppdatert til dette:

populateCard = (geoResults) => {
// sjekker om en beholderen har et barn node for å styrke re-gjengi dom
removeAddressCards();

geoResults.kart(geoResult => {
// du først opprette inngang div container
const addressCard = – dokument.createElement(‘div’);
// opprett deretter inn-og etikettelementer
const input = – dokument.createElement(‘input’);
const etikett-dokument.createElement(‘label’);
// legg deretter til materialisere klasser til div og innspill
addressCard.classList.legge til(“kortet”);
input.classList.legge til(“gap”);
// legger til attributter til dem
etiketten.setAttribute(“for”, geoResult.place_id);
etiketten.innerHTML = geoResult.formatted_address;
input.setAttribute(“name”, “adresse”);
input.setAttribute(“type”, “radio”);
input.setAttribute(“verdi”, geoResult.formatted_address);
input.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(etikett);
retur (
locationsAvailable.appendChild(addressCard);
);
})
}

Vi er ferdig, og er nå i stand til å fullt ut få og vise brukerens adresse!

Trinn 7: Pre-fyll ut skjemaet med adresse data brukeren velger

Det siste trinnet er å fylle ut skjemaet med adressen brukeren velger. Vi må legge til et klikk event lytter til-adresse-kort og pass adressen som argument for å tilbakering funksjon.

Her er hvordan vi legge til hendelsen lytteren i populateCard funksjon:

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

Du bør være oppmerksom på at geoResult argument i over tilbakering er valgt adresse objekt fra resultatene utvalg. Når det er sagt, kan du oppdatere populateCard funksjon for å imøtekomme våre nye linje av koden.

Den inputClicked funksjonen bruker en rekke uttalelser om å tilordne verdier til vårt skjema-elementer. så før du arbeider på det, la oss få vår form elementer i ligningen:

const inputAddress = – dokument.bürgerliches (“adresse”),
inputLocality = – dokument.bürgerliches(‘sted’),
inputPostalCode = – dokument.bürgerliches(‘postal_code’),
inputLandmark = – dokument.bürgerliches(‘landemerke’),
inputCity = – dokument.bürgerliches(‘by’),
inputState = – dokument.bürgerliches(‘stat’);

Etter å ha gjort dette, la oss nå arbeidet på fylling i form med address_components i inputClicked funksjon.

inputClicked = resultat => {
resultatet.address_components.kart(komponent => {
const typer = komponent.typer
hvis (typer.inkluderer(‘postal_code’)) {
inputPostalCode.value = komponent.long_name
}
hvis (typer.inkluderer(‘sted’)) {
inputLocality.value = komponent.long_name
}
hvis (typer.inkluderer(‘administrative_area_level_2’)) {
inputCity.value = komponent.long_name
}
hvis (typer.inkluderer(‘administrative_area_level_1’)) {
inputState.value = komponent.long_name
}
hvis (typer.inkluderer(‘point_of_interest’)) {
inputLandmark.value = komponent.long_name
}
});
inputAddress.value = resultat.formatted_address;
// for å unngå etiketter overlappende pre-fylt inngang innhold
M. updateTextFields();
// fjerner adressen kort fra UI
removeAddressCards();
}

Ovenfor blokk med kode-koden over klikket (eller valgt) adresse komponent, sjekker typer komponenter og til slutt tilordner dem til feltene om de passer.

M. updateTextFields () – funksjonen er fra Vestfold, og det sikrer at etiketten ikke overlapper med de feltene verdier og removeAddressCards () – funksjonen fjerner adressen kort fra BRUKERGRENSESNITTET.

Med dette, vi er ferdig med vår app og du har lagret våre brukere masse å skrive og hodepine! Sikkert de vil takke oss for å gjennomføre en slik en problemfri løsning.

Hele denne UX eksperiment kan bli sett på som en snarvei som vil hjelpe brukeren pre-fyll leveringsadresse form. Vi bør tydelig her at de returnerte adresser er ikke alltid 100% nøyaktig. Men det er derfor vi tillater postadresse for å bli manuelt redigert i BRUKERGRENSESNITTET.

Demo!

Se Penn Forhåndsutfyll Adresse Skjema med Geolokasjon og Google Maps med CSS-Triks (@css-triks) på CodePen.