Listen for Address Autofill events | Mapbox Search JS

This example shows how to listen for events when using Address Autofill in Search JS Web. The retrieve event is fired when the user selects an autofill suggestion. In the event handler, a GeoJSON feature for the selected result is used to set the feature property of MapboxAddressMinimap, showing the selected address to the user.

JavaScript


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listen for Address Autofill events</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.5.1/web.js"></script>
</head>
<body>
<form class="prose">
    <mapbox-address-autofill>
        <input name="address" autocomplete="shipping address-line1" placeholder="Search for an Address" class="input bg-white">
    </mapbox-address-autofill>
</form>
<div style="max-width: 678px; height: 300px; margin-top: 16px;">
    <mapbox-address-minimap></mapbox-address-minimap>
</div>
<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', () => {
    const autofill = document.querySelector('mapbox-address-autofill');
    const minimap = document.querySelector('mapbox-address-minimap');

    autofill.accessToken = ACCESS_TOKEN;
    minimap.accessToken = ACCESS_TOKEN;

    autofill.addEventListener('retrieve', (event) => {
        const featureCollection = event.detail;
        if (!featureCollection || !featureCollection.features.length) {
            minimap.feature = null;
            return;
        }

        const feature = featureCollection.features[0];
        minimap.feature = feature;
    });
});
</script>

</body>
</html>

このexampleは役に立ちましたか？