Crea il file HTML per la tua applicazione Amazon Location - 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à.

Crea il file HTML per la tua applicazione Amazon Location

In questo tutorial, creerai una HTML pagina statica che incorpora una mappa e consente all'utente di trovare cosa si trova in una posizione sulla mappa. L'app sarà composta da tre file: un HTML file e un CSS file per la pagina web e un file JavaScript (.js) per il codice che crea la mappa e risponde alle interazioni dell'utente e agli eventi della mappa.

Per prima cosa, creiamo il CSS framework HTML and che verrà utilizzato per l'applicazione. Questa sarà una pagina semplice con un <div> elemento per contenere il contenitore della mappa e un <pre>elemento per mostrare le JSON risposte alle tue domande.

Per creare l'HTMLapplicazione per l'avvio rapido

  1. Crea un nuovo file denominato quickstart.html.

  2. Modifica il file nell'editor di testo o nell'ambiente che preferisci. Aggiungi quanto segue HTML al file.

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

    <!-- Styles -->
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    <header>
      <h1>Quick start tutorial</h1>
    </header>
    <main>
      <div id="map"></div>
      <aside>
        <h2>JSON Response</h2>
        <pre id="response"></pre>
      </aside>
    </main>
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
  </body>
</html>

    HTMLContiene un puntatore al CSS file che verrà creato nel passaggio successivo, alcuni elementi segnaposto per l'applicazione e del testo esplicativo.

    Ci sono due elementi segnaposto che utilizzerai più avanti in questo tutorial. Il primo è l'<div id="map>elemento, che manterrà il controllo della mappa. Il secondo è l'<pre id="response">elemento, che mostrerà i risultati della ricerca sulla mappa.

  3. Salva il file.

Ora aggiungi il CSS per la pagina web. Questo imposterà lo stile del testo e degli elementi segnaposto per l'applicazione.

Per creare l'applicazione CSS per l'avvio rapido

  1. Creare un nuovo file denominatomain.css, nella stessa cartella del file quickstart.html creato nella procedura precedente.

  2. Modifica il file con l'editor che desideri utilizzare. Aggiungi il seguente testo al file.

    * {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
}

header {
  background: #000000;
  padding: 0.5rem;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  color: #ffffff;
}

main {
  display: flex;
  min-height: calc(100vh - 94px);
}

#map {
  flex: 1;
}

aside {
  overflow-y: auto;
  flex: 0 0 30%;
  max-height: calc(100vh - 94px);
  box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426;
  background: #f9f9f9;
  padding: 1rem;
}

h2 {
  margin: 0;
}

pre {
  white-space: pre-wrap;
  font-family: monospace;
  color: #16191f;
}

footer {
  background: #000000;
  padding: 1rem;
  color: #ffffff;
}

    Ciò imposta la mappa in modo che riempia lo spazio non utilizzato da nient'altro, imposta l'area delle nostre risposte in modo che occupi il 30% della larghezza dell'app e imposta il colore e gli stili per il titolo e il testo esplicativo.

  3. Salvare il file.

  4. Ora puoi visualizzare il quickstart.html file in un browser per vedere il layout dell'applicazione.

    Browser window displaying a Quick start tutorial page with JSON Response section.

Successivamente, aggiungerai il controllo della mappa all'applicazione.