Address Confirmation
This example shows how to use the confirmAddress component to prompt a user to confirm that the address they've provided in a form is correct.
Fill out the address form and click "Confirm" to show the confirmation dialog. Check the browser console to see the returned result of the confirmation action.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Address Confirmation</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.24/web.js"></script>
</head>
<body>
<form class="flex flex--column">
<!-- Input form -->
<label class="txt-s txt-bold color-gray mb3">Address</label>
<input class="input mb12" placeholder="House number and street" autocomplete="address-line1">
<label class="txt-s txt-bold color-gray mb3">Address Line 2</label>
<input class="input mb12" placeholder="Apartment, suite, unit, building, floor, etc." autocomplete="address-line2">
<label class="txt-s txt-bold color-gray mb3">City</label>
<input class="input mb12" placeholder="City" autocomplete="address-level2">
<label class="txt-s txt-bold color-gray mb3">State / Region</label>
<input class="input mb12" placeholder="State / Region" autocomplete="address-level1">
<label class="txt-s txt-bold color-gray mb3">ZIP / Postcode</label>
<input class="input" placeholder="ZIP / Postcode" autocomplete="postal-code">
<!-- Form buttons -->
<div class="mb30 mt30">
<button type="submit" class="btn round">
Confirm
</button>
</div>
</form>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
window.addEventListener('load', () => {
mapboxsearch.config.accessToken = ACCESS_TOKEN;
// Add confirmation prompt to shipping address
const form = document.querySelector("form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const result = await mapboxsearch.confirmAddress(form, {
theme: { variables: { border: '3px solid rgba(0,0,0,0.35)', borderRadius: '18px' } },
minimap: {
defaultMapStyle: ['mapbox', 'outdoors-v11'],
satelliteToggle: true
},
skipConfirmModal: (feature) => false // overrides default behavior, show dialog every time
});
console.log(result);
});
});
</script>
</body>
</html>
このexampleは役に立ちましたか？