Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
# Crea la tua prima applicazione Amazon Location Maps and Places
In questa sezione creerai la tua prima applicazione con Maps and Places.
**Prerequisito:**
Se hai già creato una chiave API durante i [Usa la console Amazon Location Service per l'autenticazione](set-up-auth.md) passaggi, iniziamo.
Se non hai ancora creato una chiave API, [Usa la console Amazon Location Service per l'autenticazione](set-up-auth.md) procedi prima di continuare a creare l'applicazione. In caso di domande, consulta [Usa le chiavi API per l'autenticazione](using-apikeys.md) e [Regioni supportate da Amazon Location](location-regions.md) per ulteriori informazioni.
## App
Ecco un step-by-step tutorial per creare un'applicazione cartografica Amazon Location Service con MapLibre GL JS. Questa guida ti illustrerà come configurare la mappa, aggiungere opzioni di stile e abilitare la funzionalità di ricerca dei luoghi.
### Configura la pagina iniziale
In questa sezione, configureremo la pagina iniziale e la struttura delle cartelle.
#### Aggiungi le librerie e i fogli di stile richiesti
Creare un file `index.html` Per renderizzare la mappa, sono necessari MapLibre GL JS e GL Geocoder. MapLibre Aggiungerai i fogli di stile MapLibre e gli script di Geocoder. JavaScript
Copia e incolla il seguente codice nel tuo file. `index.html`
```
Amazon Location Service - Getting Started with First Map App
```
#### Crea il contenitore Map
Sotto l'``elemento del file HTML, crea un `
` elemento nel codice HTML per contenere la mappa. Puoi modificarlo `
` nel tuo CSS per impostare le dimensioni necessarie per la tua applicazione. È necessario scaricare il file CSS dal nostro GitHub repository. `style.css` Questo ti aiuterà a concentrarti sulla logica aziendale.
Salva i `index.html` file `style.css` and nella stessa cartella.
Scarica il `style.css` file da [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
```
#### Aggiungi la chiave API e i dettagli AWS della regione
Aggiungi la chiave API che hai creato [Usa le chiavi API per l'autenticazione](using-apikeys.md) a questo file, insieme alla AWS regione in cui è stata creata la chiave.
```
.....
.....
```
### Aggiungi Map alla tua applicazione
In questa sezione, aggiungeremo le funzionalità di Map all'applicazione. Prima di iniziare, i file devono trovarsi in questa struttura di cartelle.
Se non l'hai ancora fatto, scarica il `style.css` file da [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
```
#### Crea una funzione per inizializzare la mappa
Per configurare la mappa, crea la seguente funzione`initializeMap(...)`, dopo la riga`//Add functions`.
Scegli una posizione centrale iniziale e un livello di zoom. In questo esempio, impostiamo il centro della mappa su Vancouver, Canada, con un livello di zoom di 10. Aggiungi controlli di navigazione per semplificare lo zoom.
```
/**
* Initializes the map with the specified style and color scheme.
*/
function initializeMap(mapStyle = "Standard", colorScheme = "Dark") {
const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;
const map = new maplibregl.Map({
container: 'map', // The ID of the map container
style: styleUrl, // The style URL for the map
center: [-123.116226, 49.246292], // Starting center coordinates
zoom: 10, // Initial zoom level
validateStyle: false // Disable style validation
});
return map; // Return the initialized map
}
```
#### Inizializza la mappa
Chiama `initializeMap(...)` per inizializzare la mappa. Facoltativamente, è possibile inizializzarla con lo stile e lo schema di colori preferiti dopo la funzione. `initializeMap` Per ulteriori opzioni di stile, consulta. [AWS stili e caratteristiche delle mappe](map-styles.md)
```
// Step 1: Setup API Key and AWS Region
const API_KEY = "Your_API_Key";
const AWS_REGION = "Region_where_you_created_API_Key";
// Step 2.1 Add maps to application
// Step 2.2 initialize the map
const map = initializeMap("Standard","Light");
// Step 3: Add places features to application
```
Apri `index.html` in un browser per vedere la mappa in azione.
#### Aggiungi Navigation Control
Facoltativamente, puoi aggiungere controlli di navigazione (zoom e rotazione) alla mappa. Questo dovrebbe essere fatto dopo la chiamata`initializeMap(...)`.
```
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places features to application
```
#### Controlla il codice della mappa
Complimenti\$1 La tua prima app è pronta per usare una mappa. Apri `index.html` in un browser. Assicurati che `style.css` si trovi nella stessa cartella di`index.html`.
Il codice HTML finale dovrebbe avere il seguente aspetto:
```
Amazon Location Service - Getting Started with First Map App
```
### Aggiungi Places alla tua applicazione
In questa sezione, configureremo le funzionalità di aggiunta di luoghi all'applicazione. Scarica il JavaScript file da GitHub, [https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js).
Prima di iniziare, i file devono trovarsi in questa struttura di cartelle:
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### Crea una funzione da creare GeoPlaces
Per aggiungere funzionalità di ricerca, inizializza la `GeoPlaces` classe utilizzando `AuthHelper` and`AmazonLocationClient`. Aggiungete la seguente `getGeoPlaces(map)` funzione prima del `` tag in`index.html`.
```
/**
* Gets a GeoPlaces instance for Places operations.
*/
function getGeoPlaces(map) {
const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region
const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client
const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance
return geoPlaces; // Return the GeoPlaces instance
}
```
#### Crea una funzione per aggiungere la casella di ricerca all'applicazione
Aggiungi le seguenti `addSearchBox(map, geoPlaces)` `createPopup(feature)` funzioni prima del `` tag in `index.html` per completare la configurazione della funzionalità di ricerca. `renderPopup(feature)`
```
/**
* Adds search box to the map.
*/
function addSearchBox(map, geoPlaces) {
const searchBox = new MaplibreGeocoder(geoPlaces, {
maplibregl,
showResultsWhileTyping: true, // Show results while typing
debounceSearch: 300, // Debounce search requests
limit: 30, // Limit number of results
popuprender: renderPopup, // Function to render popup
reverseGeocode: true, // Enable reverse geocoding
zoom: 14, // Zoom level on result selection
placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box.
});
// Add the search box to the map
map.addControl(searchBox, 'top-left');
// Event listener for when a search result is selected
searchBox.on('result', async (event) => {
const { id, result_type } = event.result; // Get result ID and type
if (result_type === "Place") { // Check if the result is a place
const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place
if (placeResults.features.length) {
createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place
}
}
});
}
/**
* Renders the popup content for a given feature.
*/
function renderPopup(feature) {
return `
${feature.place_type}
${feature.place_name}
`;
}
/**
* Creates a popup for a given feature and sets its position.
*/
function createPopup(feature) {
return new maplibregl.Popup({ offset: 30 }) // Create a new popup
.setLngLat(feature.geometry.coordinates) // Set the popup position
.setHTML(renderPopup(feature)); // Set the popup content
}
```
#### Aggiungi la casella di ricerca all'applicazione
Crea un `GeoPlaces` oggetto chiamando `getGeoPlaces(map)` come definito nella Sezione 3.1, quindi chiama `addSearchBox(map, geoPlaces)` per aggiungere la casella di ricerca all'applicazione.
```
// Step 2: Add maps to application
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
```
La ricerca dei luoghi è pronta per l'uso. Apri `index.html` in un browser per vederlo in azione.
#### Aggiungi funzione per mostrare il popup all'utente Fai clic sulla mappa
Crea una funzione `addMapClick(map, geoPlaces)` per visualizzare un popup quando l'utente fa clic sulla mappa. Aggiungi questa funzione appena prima del `` tag.
```
/**
* Sets up reverse geocoding on map click events.
*/
function addMapClick(map, geoPlaces) {
map.on('click', async ({ lngLat }) => { // Listen for click events on the map
const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding
if (response.features.length) { // If there are results
const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker
const feature = response.features[0]; // Get the clicked feature
const clickedPopup = createPopup(feature); // Create popup for the clicked feature
clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position
.setPopup(clickedPopup) // Attach popup to marker
.addTo(map); // Add marker to the map
clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed
}
});
}
```
#### Funzione di chiamata per aggiungere la funzione Map Click
Per abilitare l'azione del clic sulla mappa, chiama `addMapClick(map, geoPlaces)` dopo la riga contenente`addSearchBox(map, geoPlaces)`.
```
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
// Step 3.3: Setup map click functionality
addMapClick(map, geoPlaces);
```
#### Applicazione Review Maps and Places
Complimenti\$1 La tua prima applicazione è pronta per l'uso di Maps and Places. Apri `index.html` in un browser. Assicurati `style.css` di `utils.js` trovarti nella stessa cartella con`index.html`.
Il codice HTML finale dovrebbe assomigliare a questo:
```
Amazon Location Service - Getting Started with First Map App
```
### Esplora di più
Hai completato il tutorial di avvio rapido e dovresti avere un'idea di come Amazon Location Service viene utilizzato per creare applicazioni. Per ottenere di più da Amazon Location, puoi consultare le seguenti risorse:
+ **Informazioni sui suggerimenti relativi alle query**: valuta la possibilità di estendere la `GeoPlaces` classe o utilizzare un approccio simile `ReverseGeocode` per ottenere maggiori dettagli sui risultati restituiti dall'`Suggestion`API.
+ **Scegli l'API giusta per le tue esigenze aziendali** - Per determinare l'API di Amazon Location migliore per le tue esigenze, consulta questa risorsa:[Scegli l'API giusta](choose-an-api.md).
+ **Consulta le guide pratiche su Amazon Location**: consulta la [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/) per tutorial e altre risorse.
+ **Documentazione e informazioni sul prodotto** - Per la documentazione completa, consulta la [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/). Per ulteriori informazioni sul prodotto, vai alla pagina del [prodotto Amazon Location Service](https://aws.amazon.com/location).