Aggiungi una mappa interattiva di Amazon Location alla tua applicazione - Servizio di posizione Amazon

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à.

Aggiungi una mappa interattiva di Amazon Location alla tua applicazione

Ora che hai un framework e un segnaposto div, puoi aggiungere il controllo della mappa alla tua applicazione. Questo tutorial utilizza MapLibre GL JS come controllo della mappa, ottenendo dati da Amazon Location Service. Utilizzerai anche il JavaScript Aiutante di autenticazione per facilitare la firma delle chiamate verso la sede Amazon APIs con la tua API chiave.

Per aggiungere una mappa interattiva alla tua applicazione

  1. Apri il quickstart.html file che hai creato nella sezione precedente.

  2. Aggiungete i riferimenti alle librerie necessarie e al file di script che creerete. Le modifiche da apportare sono mostrate ingreen.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick start tutorial</title>

    <!-- Styles -->
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    ...
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script>
    
    <!-- JavaScript for the app -->
    <script src="main.js"></script>
  </body>
</html>

    Ciò aggiunge le seguenti dipendenze all'app:

    • MapLibre VAI JS. Questa libreria e questo foglio di stile includono un controllo cartografico che mostra i riquadri della mappa e include elementi interattivi, come panoramica e zoom. Il controllo consente anche estensioni, come disegnare caratteristiche personalizzate sulla mappa.

    • Client Amazon Location. Ciò fornisce interfacce per la funzionalità Amazon Location necessaria per ottenere dati cartografici e cercare luoghi sulla mappa. Il client Amazon Location è basato su AWS SDK for JavaScript v3.

    • Amazon Location Authentication Helper. Ciò fornisce funzioni utili per l'autenticazione di Amazon Location Service con API chiavi o Amazon Cognito.

    Questo passaggio aggiunge anche un riferimento amain.js, che verrà creato in seguito.

  3. Salvare il file quickstart.html.

  4. Crea un nuovo file chiamato main.js nella stessa cartella dei tuoi CSS file HTML e aprilo per modificarlo.

  5. Aggiungi il seguente script al tuo file. Il testo in red deve essere sostituito con il valore della API chiave, il nome della risorsa della mappa e il nome della risorsa del luogo creati in precedenza, nonché con l'identificatore della regione (ad esempious-east-1).

    // Amazon Location Service resource names:
const mapName = "explore.map";
const placesName = "explore.place";
const region = "your_region";
const apiKey = "v1.public.a1b2c3d4...

// Initialize a map
async function initializeMap() {
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

  // Add navigation control to the top left of the map
  mlglMap.addControl(new maplibregl.NavigationControl(), "top-left");
  
  return mlglMap;
}

async function main() {
  // Initialize map and Amazon Location SDK client:
  const map = await initializeMap();
}

main();

    Questo codice configura le risorse di Amazon Location, quindi configura e inizializza un controllo mappa MapLibre GL JS e lo inserisce nel tuo <div> elemento con l'id. map

    La initializeMap() funzione è importante da capire. Crea un nuovo controllo della MapLibre mappa (chiamato mlglMap localmente, ma chiamato map nel resto del codice) che viene utilizzato per eseguire il rendering della mappa nell'applicazione.

      // Initialize the map
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

    Quando si crea un nuovo controllo di MapLibre mappa, i parametri passati indicano lo stato iniziale del controllo della mappa. Qui impostiamo i seguenti parametri.

    • HTMLcontainer, che utilizza l'elemento map div nel nostroHTML.

    • Il centro iniziale della mappa fino a un punto a Washington, DC.

    • Il livello di zoom a 16 (ingrandito a livello di quartiere o blocco).

    • Lo stile da usare per la mappa, che fornisce MapLibre uno strumento URL per ottenere i riquadri della mappa e altre informazioni per renderizzare la mappa. Nota che questo URL include la tua API chiave per l'autenticazione.

  6. Salva il JavaScript file e aprilo con un browser. Ora hai una mappa sulla pagina, in cui puoi usare le azioni di panoramica e zoom.

    Nota

    Puoi usare questa app per vedere come si comporta il controllo della MapLibre mappa. Puoi provare a usare Ctrl o Shift mentre usi un'operazione di trascinamento, per vedere altri modi di interagire con la mappa. Tutte queste funzionalità sono personalizzabili.

    Map of Washington D.C. showing Constitution Gardens and Independence Ave SW in an Servizio di posizione Amazon app.

La tua app è quasi completa. Nella sezione successiva, gestirai la scelta di una posizione sulla mappa e mostrerai l'indirizzo della posizione scelta. Mostrerai anche il risultato JSON sulla pagina, per vedere i risultati completi.