Låt oss göra en form som sätter nuvarande läge för att använda på en karta!

0
27

Jag älskar att shoppa på nätet. Jag hittar vad jag behöver och få det mesta för ett anständigt pris. Jag Nigerianska för närvarande arbetar och studerar i Indien, och två saker jag fruktar att när de handlar på nätet är:

  1. Att fylla ut en kredit i form av kort
  2. Att fylla i leverans-och faktureringsadress former

Kanske är jag bara lat, men dessa saker är inte utan utmaningar! För det första, tack till betalning bearbetning tjänster som PayPal och e-plånböcker som jag inte har att skriva i min 12-siffriga kortnummer för varje ny e-handel platsen jag besöker, och inte heller har för att spara mina kreditkortsuppgifter med dem.

För det andra, den enda tidsbesparande alternativ som ges av de flesta webbplatser shopping är att spara din adress, men du måste ändå fylla i formuläret (arrghh!). Det är där utmaningen ligger. Jag har haft de flesta av mina beställningar som returneras eftersom min adress (som jag trodde var rätt adress) kan inte vara placerade eller bekräftas av den app som för en eller annan anledning.

Adress ingångar är utmanande

Att få en användares adress via en ingång form är en ren lösning, men kan också vara en svår uppgift för användaren. Här är varför:

  • Om användaren är ny i en viss stad, kanske de inte vet att deras fullständiga adress
  • Om användaren vill skicka till en ny adress som inte är frälsta (e.g frakt till en arbetsplats eller till en väns adress i stället för det sparade hemadress)
  • Om användaren är bosatt i en stad som har mycket svårt adress-system
  • Om användaren är enkelt lata som mig

En potentiell lösning: få adressen automatiskt

Få användarens adress peka/klicka på en knapp. Japp, det är enkelt! Den UX är bra som det sparar användaren både tid och ansträngning för att fylla i någon form. Det kommer också att spara butiksägaren tid, ansträngning och till och med pengar i vissa fall, så det kommer förmodligen bli en minskning i antalet felaktigt beställningar eller leveranser.

Låt oss bygga ett mini-app som hämtar en användares adress och visar det på en Google-Karta gränssnitt med hjälp av vanilj JavaScript. Konceptet är följande:

  1. Få HTML-knappen och lyssna efter ett klick händelse
  2. Hämta användarens position (latitud och longitud) på en knapp klickar du på
  3. Visa användarens plats på en Google-karta
  4. Skicka latitud och longitud till Google Maps Geokod API URL
  5. Visa återvände adress (eller en lista med adresser) på UI för användaren att välja en
  6. Lyssna för karta händelser och upprepa steg 4 och 5
  7. Pre-fyll i formuläret med den adress data som användaren väljer

Att komma igång och sätta upp

För att bygga den här appen, som vi kommer att använda den Förverkligas CSS-ramverk för att spara oss lite tid att pyssla med stilar. Förverkliga är en modern lyhörd front-end framework som bygger på Google ‘ s Material Design system. Den beta-versionen fungerar med vanilj JavaScript.

En grundläggande inställning Förverkligas med hjälp av CSS-och JavaScript-filer i ett dokument så här:

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

Kommer vi också att använda Google Maps API för att visa kartan och få användarens lättläst adress. Vi behöver en API-nyckel för att göra detta. Här får du ett:

  1. Logga in på ditt Google Developer Console-Konto
  2. Skapa ett nytt projekt eller välj en befintlig
  3. Klicka på “Aktivera Api: er och Tjänster”
  4. Välj “Kartor Javascript-API” alternativ
  5. Klicka på “Aktivera” på den nya sidan som kommer upp. Gå tillbaka till föregående sida och gör en sökning för “Geokodning API,” klicka på den och aktivera den också
  6. Då, på den högra nav av sidan, klicka på Referenser, kopia API-nyckel på sidan och spara den till en fil

Nu ska vi uppdatera våra dokument för att visa kartan och låta användaren vet att det kan användas för att få deras nuvarande plats som adress. Också, vi kommer att lägga till en form som är förfylld med den adress som användaren väljer.

<body>
<div class=”container”>
<h3>Adress</h3>
<p>Du kan klicka på knappen nedan för att använda din aktuella position som din leveransadress</p>
<div id=”karta”>
</div>
<button id=”showMe” class=”btn”>Använd Min Plats</button>
<form id=”shippingAddress”>
<div id=”locationList”></div>
<br>
<div class=”input-fältet”>
<textarea class=”input_fields verklighet-textarea id=”adress” type=”text”></textarea>
<etiketten class=”active” för=”adress”>Adress (Area och Street)</label>
</div>
<div class=”input-fältet”>
<input class=”input_fields” id=”tätort” type=”text”>
<etiketten class=”active” för=”ort”>Ort</label>
</div>
<div class=”input-fältet”>
<input class=”input_fields” id=”city” type=”text”>
<etiketten class=”active” för=”city”>Staden/Stadsdelen/Staden</label>
</div>
<div class=”input-fältet”>
<input class=”input_fields” id=”postal_code” type=”text”>
<etiketten class=”active” för=”pin_code”>Pin-Kod</label>
</div>
<div class=”input-fältet”>
<input class=”input_fields” id=”landmärke” type=”text”>
<etiketten class=”active” för=”landmärke”>Landmärke</label>
</div>
<div class=”input-fältet”>
<input class=”input_fields” id=”stat” type=”text”>
<etiketten class=”active” för=”Stat” – >Staten</label>
</div>
</form>
<!– Du kan lägga till en fallback adress samla in formuläret här –>
</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>

Medan vi är här, låt oss style saker och ting lite för att göra detta ser lite bättre ut:

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

#karta {
höjd: 50vh;
margin-bottom: 10px;
display: none;
}

#locationList .kortet {
padding: 10px;
}

#toast-container {
topp: 50%;
botten: unset;
}

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

@media-bara skärmen och (max-width: 768px) {
.container {
bredd: 80%;
}
}

Denna CSS döljer kartan tills vi är redo att visa det. Vår app ska se ut så här:

Låt oss planera detta

Vår app kommer att vara att använda sig av HTML5-Geolocation API för att bestämma vår användarens aktuella position samt Googles Geokod API med en teknik som kallas Omvänd Geokodning. Geokod API tar en lättläst adress och ändrar den i geografiska (latitud-och längsgående) koordinater och markerar platsen på kartan.

Omvänd Geokodning gör tvärtom. Det tar latitud och longitud och omvandlar dem till läsbara adresser. Geokodning och Omvänd Geokodning är väl dokumenterade.

Här är hur vår app kommer att fungera:

  1. Användaren klickar på “Använd Min Plats” – knappen
  2. Användaren ligger med HTML5-Geolocation API (navigator.geolokalisering)
  3. Vi får användarens geografiska koordinater
  4. Vi passerar koordinater till geokod begäran API
  5. Vi visar den resulterande adresser till användaren

De flesta gånger, geokod returnerar fler än en adress, så att vi skulle ha för att visa användaren alla returnerade adresser och låt dem välja den mest riktiga.

Skönt! Slutligen, vi kan komma till den roliga delen av att faktiskt skriva JavaScript. Låt oss gå igenom varje steg vi anges.

Steg 1: Klicka på knappen

I vår main.js fil, låt oss få en hänvisning till den HTML-knappen. Medan vi på det, vi kommer att ställa upp några andra variabler som vi kommer att behöva, som vår API-nyckel.

//Denna div kommer att visa Google-karta
const mapArea = dokument.getElementById(‘karta’);

//Denna knapp för att ställa allt i rörelse när du klickar
const actionBtn = dokument.getElementById(‘showMe’);

//Detta kommer att visa alla tillgängliga adresser som returneras av Googles Api Geokod
const locationsAvailable = dokument.getElementById(‘locationList’);

//Låt oss sätta vår API_KEY
const __ = ‘YOUR_API_KEY’;

//Låt oss förklara våra Gmap och Gmarker variabler som kommer att hålla Kartan och Markör Objekt senare
låt Gmap;
låt Gmarker;

//Nu ska vi lyssna för en click-händelse på vår knapp
actionBtn.addEventListener(‘klicka’, e => {
// dölj-knappen
actionBtn.style.display = “none”;
// ring Förverkligas toast att uppdatera användare
M. toast({ html: ‘hämta din nuvarande plats, klasser: ‘rundade’ });
// hämta användarens position
getLocation();
});

När klicka på hanteraren för våra knappen körs:

  1. Döljer knappen
  2. Varnar användaren för att vi blir deras nuvarande plats (en “skål” i Förverkligas är som ett popup-meddelande)
  3. Samtal getLocation funktion

Steg 2: Hämta användarens position (latitud och longitud)

När våra getLocation funktion anropas, vi behöver göra lite mer arbete. Första, låt oss se om vi även kan använda den Geolocation API:

getLocation = () => {
// kontrollera om användarens webbläsare stöder Navigator.geolocation
om (navigator.geografisk lokalisering) {
navigator.geolocation.getCurrentPosition(displayLocation, showError, alternativ).
} else {
M. toast({ html: “Tyvärr, din webbläsare har inte stöd för den här funktionen… Vänligen Uppdatera din Webbläsare för att njuta av det”, klasser: “rundade” });
}
}

När vi har stöd, samtal geolocation är metoden getCurrentPosition. Om det inte har stöd för, då användaren varnas för att det finns ingen webbläsare stöd.

Om det finns stöd, då getCurrentLocation metoden används för att få den aktuella platsen för enheten. Syntaxen är som detta:

navigator.geolocation.getCurrentPosition(*framgång, fel, [alternativ]*)

  • framgång : Detta är en callback-funktion som tar en position som enda parameter. För oss, vår framgång callback-funktion är displayLocation funktion.
  • fel : [valfritt] Detta är en callback-funktion som tar en PositionError som enda input parameter. Du kan läsa mer om detta här. Våra fel callback-funktion är showError funktion.
  • alternativ : [valfritt] Detta är ett objekt som beskriver de alternativ egendom ska skickas till metoden getCurrentPosition. Du kan läsa mer om detta här. Vårt alternativ för parametern är alternativ objekt.

Innan du skriver våra displayLocation funktion, låt oss hantera showError funktion och val objekt:

// Visar olika felmeddelanden
showError = (fel) => {
mapArea.style.display = “blockera”
switch (error.kod) {
fall fel.PERMISSION_DENIED:
mapArea.innerHTML = “Du förnekade begäran om din position.”
break;
fall fel.POSITION_UNAVAILABLE:
mapArea.innerHTML = “Din positionsinformation är inte tillgänglig”.
break;
fall fel.TIMEOUT:
mapArea.innerHTML = “begäran tog för lång tid. Vänligen försök igen”
break;
fall fel.UNKNOWN_ERROR:
mapArea.innerHTML = “Ett okänt fel har uppstått-vänligen prova igen efter en tid.”
break;
}
}
//Gör att precisionen är hög
const alt = {
enableHighAccuracy: sanna
}

Nu, låt oss skriva koden för våra displayLocation funktion i vår main.js fil:

displayLocation = (position) => {
const lat = position.koordinater.latitud;
const lng = position.koordinater.longitud;
}

Nu har vi vår användarens latitud och longitud och vi kan visa dem i konsollen genom att skriva in koden nedan på insidan displayLocation:

konsolen.log (Nuvarande Latitud är ${lat} och din longitud är ${lng}` );
Steg 3: Visa användarens aktuella position på en Google-Karta

För att göra detta, vi kommer att lägga till dessa rader kod för att våra displayLocation funktion.

const lat / long = {lat, lng}
showMap(lat / long);
createMarker(lat / long);
mapArea.style.visa = “block”;

Den första linjen tar våra lat och lng-värden och kapslar in det i lat / long-objekt bokstavlig. Detta gör det enkelt för oss att använda i vår app.

Den andra raden av kod som anropar en showMap funktion som tar emot ett lat / long-argument. Här får vi för att initiera Google-karta och göra det i våra ANVÄNDARGRÄNSSNITT.

Den tredje raden visar en createMarker funktion som accepterar även våra objekt bokstavlig (lat / long) som argument och använder den för att skapa en Google Maps Markör för oss.

Den fjärde raden gör mapArea synliga så att våra användare kan nu se platsen.

displayLocation = (position) => {
const lat = position.koordinater.latitud;
const lng = position.koordinater.longitud;
const lat / long = { lat, lng }
showMap(lat / long);
createMarker(lat / long);
mapArea.style.visa = “block”;
}

Nu, låt oss få skapa våra funktioner. Vi kommer att börja med showMap funktion.

showMap = (lat / long) => {
låt mapOptions = {
center: lat / long,
zoom: 17
};
Gmap = nya google.kartor.Karta(mapArea, mapOptions);
}

Den showMap funktion skapar en mapOptions objekt som innehåller karta center (som är lat och lng-koordinater vi fick från displayLocation) och zoomen på kartan. Slutligen skapar vi en instans av Google Maps klass och skickar den vidare till vår karta. I färre ord, vi initiera Google Maps klass.

För att skapa en karta exempel anger vi två parametrar i konstruktorn: div kartan ska visas och mapOptions. I vårt fall, vårt div kallas mapArea och våra mapOptions kallas mapOptions. Efter detta, vår skapat kartan kommer att visa upp, men utan en markör. Vi behöver en markör så att användaren kan identifiera deras nuvarande position på kartan.

Låt oss skapa vår markör med den createMarker funktion:

createMarker = (lat / long) => {
låt markerOptions = {
position: lat / long,
karta: Gmap,
animation: google.kartor.Animation.STUDSA,
klickbara: sanna
};
Gmarker = nya google.kartor.Markör(markerOptions);
}

Några saker att notera i denna kod:

  1. Den position egenskapen positioner markören på den angivna lat / long
  2. Kartan egenskapen anger den karta exempel där markeringen ska göras (i vårt fall, det är Gmap)
  3. Animation egendom lägger till en liten STUDS till våra markör
  4. Den klickbara egendom ställ in till true betyder att våra marker kan klickas
  5. Slutligen, vi initiera Markör klass i vår Gmarker exempel variabel

Så långt, vår användarens plats har hämtats, kartan har gjorts och användaren kan se sin nuvarande position på kartan. Det ser bra ut! 🕺

Steg 4: Skicka latitud och longitud till Geokod API

Googles Geocoding API kommer att användas för att konvertera våra användarens numeriska geografiska koordinater till en formaterad, lättläst adress med hjälp av omvänd geokodning process som vi berört tidigare.

URL tar denna form:

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

…där utdataformat kan antingen vara en json eller xml som avgör vilket format som används för att leverera data. De parametrar del är en lista över de parametrar som behövs för ansökan.

Våra request-URL: en ser ut så här:

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

Låt oss gå vidare och ansluta till API. Vi skulle göra detta i en funktion som kallas getGeolocation.

getGeolocation = (lat, lng) => {
const lat / long = lat + “,” + lng.
hämta( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat / long}&key=${__KEY}` )
.då(res => res.json())
.sedan(data => konsol.log(data.resultaten));
}

Den getGeolocation funktionen tar två argument ( lat och lng } sammanfogar dem till att bilda en ny lat / long-variabel som skickas till den ADRESSEN.

Med Fetch API (mer om detta här), vi lägger till det nya lat / long och __NYCKELN i Geokod request-URL: en. Då, på svar objektet är vi tillbaka, vi passerar .json metod för att lösa löfte med JSON. Slutligen, vi loggar svar i vårt konsolen.

Att använda sig av vår nyskapade funktion, måste vi kalla det i displayLocation funktion. Så låt oss uppdatera vår displayLocation funktion för att innehålla getGeolocation funktionsanrop:

displayLocation = (position) => {
const lat = position.koordinater.latitud;
const lng = position.koordinater.longitud;
const lat / long = { lat, lng }
showMap(lat / long);
createMarker(lat / long);
mapArea.style.visa = “block”;
getGeolocation(lat, lng)// på vår nya funktion för samtal
}

Den returnerade data bör se ut ungefär så här:

{
“resultat” :
{
“address_components”:
{
“long_name”: “1600”,
“short_name”: “1600”,
“typer”: [“street_number”]
},
{
“long_name”: “Amfiteater Pkwy”,
“short_name”: “Amfiteater Pkwy”,
“typer”: [“rutt”]
},
{
“long_name”: “Mountain View”,
“short_name”: “Mountain View”,
“typer”: [“tätort”, “politiska”]
},
{
“long_name”: “Santa Clara County”,
“short_name”: “Santa Clara County”,
“typer”: [“administrative_area_level_2”, “politiska”]
},
{
“long_name”: “Kalifornien”,
“short_name”: “CA”,
“typer”: [“administrative_area_level_1”, “politiska”]
},
{
“long_name”: “Usa”,
“short_name”: “OSS”,
“typer”: [“land”, “politiska”]
},
{
“long_name”: “94043, usa”,
“short_name”: “94043, usa”,
“typer”: [“postal_code”]
}
],
“formatted_address”: “1600 Amphitheatre Parkway, Mountain View, CA 94043, USA, USA”,
“geometri”: {
“plats”: {
“lat”: 37.4224764,
“lng”: -122.0842499
},
“location_type”: “TAKET”,
“viewport”: {
“nordost”: {
“lat”: 37.4238253802915,
“lng”: -122.0829009197085
},
“sydväst”: {
“lat”: 37.4211274197085,
“lng”: -122.0855988802915
}
}
},
“place_id”: “ChIJ2eUgeAK6j4ARbn5u_wAGqWA”,
“typer”: [“street_address”]
}
],
“status” : “OK”
}
Steg 5: Visa återvände adress(er) för användaren att välja

I detta skede har vi gjort en begäran om att Googles Geocoding API och har fått våra resultat inloggad på konsolen. Nu har vi för att visa resultat i ett ANVÄNDARGRÄNSSNITT för våra användare. Detta kräver två saker:

  1. Skapa en ny funktion som hanterar skapa HTML-element
  2. Uppdatera våra getGeolocation funktion för att göra funktionen samtal

Låt oss skapa den funktion som skulle ta hand för att skapa den HTML-element och uppdatera DOM.

populateCard = (geoResults) => {
geoResults.karta(geoResult => {
// först skapar input div-behållare
const addressCard = dokument.createElement (“div”);
// sedan skapar input och märkningsuppgifter
const input = dokument.createElement (“input”);
const label = – dokument.createElement(‘etikett’);
// sedan lägger förverkligas klasser till div och input
addressCard.classList.lägga till(“kort”);
ingång.classList.lägga till(“med-gap”);
// lägger till attribut till dem
etikett.setAttribute(“för”, geoResult.place_id);
etikett.innerHTML = geoResult.formatted_address;
ingång.setAttribute(“namn”, “adress”);
ingång.setAttribute(“type”, “radio”);
ingång.setAttribute(“värde”, geoResult.formatted_address);
ingång.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(etikett)
avkastning (
// lägg till det som skapats div till locationsAvailable div
locationsAvailable.appendChild(addressCard)
);
})
}

I denna funktion, vi går igenom våra resultat och skapa vissa HTML-element (div , input och etikett), lägga till ingången och den etikett till div och slutligen lägga till nya div en förälder div (som är locationsAvailable). När får vi resultatet från vår API-anrop, vår DOM kommer att skapas och visas för användaren.

Nästa, vi uppdaterar våra getGeolocation funktion för att ringa våra populateCard funktion genom att byta ut den sista raden i getGeolocation med detta:

.sedan(data => populateCard(data.resultaten));

…vilket innebär att vår uppdaterade funktion bör titta här:

getGeolocation = (lat, lng) => {
const lat / long = lat + “,” + lng.
hämta( `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat / long}&key=${__KEY}` )
.då(res => res.json())
.sedan(data => populateCard(data.resultaten));
}

Vid denna punkt, allt ska fungera bra. Våra användare klickar på en knapp, får en plats som visas på kartan tillsammans med en lista med adresser som matchar den aktuella platsen.

Steg 6: Lyssna på karta händelser och upprepa steg 4 och 5

Om våra användare bestämmer sig för att flytta kort eller marker, ingenting händer till UI — nya adresser inte är inte visas och allt förblir statisk. Vi har fått fixa detta, så låt oss göra vår app dynamisk genom att lyssna efter karta händelser. Du kan läsa allt om Google Karta Händelser här.

Det finns tre händelser som vi vill lyssna till:

  1. dra: Detta är sparken när användaren börjar dra och fortsätter att dra kartan
  2. dragend: Detta är sparken när användaren slutar att dra kartan
  3. tomgång: Det är sköt en gång varje händelse har fått sparken och kartan är ledig

Snabb Fråga: Varför är dessa händelser som lämpade sig bäst för vår app?

Snabbt Svar: De två första evenemang kommer att se till att vår karta markören stannar i mitten av kartan finns under dra händelse medan inaktiv händelse kommer att göra en geokodning begäran med de nya koordinaterna.

För att lyssna efter dessa händelser har vi att uppdatera showMap funktion med följande:

Gmap.addListener(‘dra’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
});
Gmap.addListener(‘tom’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
om (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(det här.getCenter().lat(), här.getCenter().lng()); // uppdatera position display
}, 2000);
}
});

Som förklaras ovan, de två första händelsen lyssnare helt enkelt se till att markören är fortfarande i centrum av vår karta. Ägna större uppmärksamhet till tomgång händelselyssnare eftersom det är där det händer.

När inaktiv händelse avfyras markören går till centrum, då en kontroll görs för att ta reda på om den aktuella positionen för markören är samma med lat-eller lng-värden som mottagits av displayLocation funktion. Om det är inte samma sak, då vi kallar updatePosition funktion efter två sekunder av sysslolöshet.

Med detta sagt, har vi att göra några uppdateringar till showMap funktion. För det första, om funktionen header, vi har till att omfatta fler parametrar och på function showMap samtal. Vi behöver lägga till den nya argument för det också. Våra showMap funktion bör se ut så här:

showMap = (lat / long, lat, lng) => {
låt mapOptions = {
center: lat / long,
zoom: 17
};
Gmap = nya google.kartor.Karta(mapArea, mapOptions);
Gmap.addListener(‘dra’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
});
Gmap.addListener(‘dragend’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
});
Gmap.addListener(‘tom’, function () {
Gmarker.setPosition(det här.getCenter()); // ange markörposition till karta center
om (Gmarker.getPosition().lat() !== lat || Gmarker.getPosition().lng() !== lng) {
setTimeout(() => {
updatePosition(det här.getCenter().lat(), här.getCenter().lng()); // uppdatera position display
}, 2000);
}
});
}

Och vår displayLocation funktion bör se ut så här:

displayLocation = (position) => {
const lat = position.koordinater.latitud;
const lng = position.koordinater.longitud;
const lat / long = { lat, lng }
showMap(lat / long, lat, lng); //passerade lat och lng den nya argument till funktionen
createMarker(lat / long);
mapArea.style.visa = “block”;
getGeolocation(lat, lng);
}

Efter att ha lyssnat för den karta händelser, låt oss upprepa Steg 4 och Steg 5.

Vi börjar med att skriva våra updatePosition funktion. Denna funktion kommer endast utföra en åtgärd för nu, vilket är att passera den nya lat och lng-värden till getGeolocation funktion:

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

Efter att den nya positionen och hämta adresser, vår DOM åter bör göra för användaren, eller hur? Jo, det gör det inte. Och att fixa det, vi skapar en funktion som kommer att tvinga DOM att åter göra:

// kontrollera om behållaren har ett barn nod till force re-göra av dom
funktion removeAddressCards(){
om (locationsAvailable.hasChildNodes()) {
medan (locationsAvailable.firstChild) {
locationsAvailable.removeChild(locationsAvailable.firstChild);
}
}
}

Den kontrollerar om locationsAvailable div har någon childNodes, och om det gör det, det tar bort dem innan du skapar nya adressen kort. Den populateCard funktion är nu uppdaterad till detta:

populateCard = (geoResults) => {
// kontrollera om en container har ett barn nod till force re-göra av dom
removeAddressCards();

geoResults.karta(geoResult => {
// först skapar input div-behållare
const addressCard = dokument.createElement (“div”);
// sedan skapar input och märkningsuppgifter
const input = dokument.createElement (“input”);
const label = – dokument.createElement(‘etikett’);
// sedan lägger förverkligas klasser till div och input
addressCard.classList.lägga till(“kort”);
ingång.classList.lägga till(“med-gap”);
// lägger till attribut till dem
etikett.setAttribute(“för”, geoResult.place_id);
etikett.innerHTML = geoResult.formatted_address;
ingång.setAttribute(“namn”, “adress”);
ingång.setAttribute(“type”, “radio”);
ingång.setAttribute(“värde”, geoResult.formatted_address);
ingång.setAttribute(“id”, geoResult.place_id);
addressCard.appendChild(input);
addressCard.appendChild(etikett);
avkastning (
locationsAvailable.appendChild(addressCard);
);
})
}

Vi är klara och finns nu möjlighet att fullt ut få och visa användarens adress!

Steg 7: Pre-fyll i formuläret med den adress data som användaren väljer

Det sista steget är att fylla i formuläret med den adress som användaren väljer. Behöver vi lägga till en click-händelse lyssnaren till den adress som kort och passera den adress som argument till callback-funktion.

Här är hur vi lägga till händelse lyssnaren i populateCard funktion:

ingång.addEventListener(‘klicka’, () => inputClicked(geoResult));

Du bör observera att geoResult argument i ovanstående återuppringning är vald adress objekt från resultaten array. Som sagt, uppdatera populateCard funktion för att ta emot vår nya koden.

Den inputClicked funktion använder en serie av uttalanden om att tilldela värden till våra formulär. så innan du arbetar på det, låt oss ge våra form element i ekvationen:

const inputAddress = dokument.getElementById (“adress”),
inputLocality = dokument.getElementById(‘ort’),
inputPostalCode = dokument.getElementById(‘postal_code’),
inputLandmark = dokument.getElementById(‘landmärke’),
inputCity = dokument.getElementById (“city”),
inputState = dokument.getElementById(‘state’);

Efter att ha gjort detta, låt oss nu arbeta på förhand fylla i formuläret med address_components i inputClicked funktion.

inputClicked = resultat => {
resultat.address_components.karta(component => {
const typer = komponent.typer
om (typer.innehåller(‘postal_code’)) {
inputPostalCode.värde = komponent.long_name
}
om (typer.innehåller(‘ort’)) {
inputLocality.värde = komponent.long_name
}
om (typer.innehåller(‘administrative_area_level_2’)) {
inputCity.värde = komponent.long_name
}
om (typer.innehåller(‘administrative_area_level_1’)) {
inputState.värde = komponent.long_name
}
om (typer.innehåller(‘point_of_interest’)) {
inputLandmark.värde = komponent.long_name
}
});
inputAddress.värde = resultat.formatted_address;
// för att undvika etiketter överlappande pre-filled ingång innehållet
M. updateTextFields();
// tar bort adressen kort från UI
removeAddressCards();
}

Ovanstående block av kod itererar över klickat (eller valda) adress komponent, kontrollerar typer av komponenter och slutligen tilldelar dem till inmatningsfält om de matchar.

M. updateTextFields() funktion är från Förverkligas och ser till att etiketten inte överlappar med inmatningsfält värderingar och removeAddressCards () – funktionen tar bort adressen kort från UI.

Med detta, vi har gjort med vår app och har sparat våra användare massor av att skriva och huvudvärk! Helt säkert kommer de att tacka oss för att genomföra en så problemfri lösning.

Hela denna UX experiment kan ses som en genväg, som hjälper användaren att i förväg fylla leveransadress form. Vi bör tydligt ange här att den returneras adresser är inte alltid 100% korrekt. Men det är därför vi tillåter adressen till redigeras manuellt i ANVÄNDARGRÄNSSNITTET.

Demo!

Se Pennan Prefill Adress Form med Geolocation och Google Maps genom att CSS-Tricks (@css-tricks) på CodePen.