Fügen Sie Ihrer Anwendung eine interaktive Amazon-Standortkarte hinzu - Amazon Location Service

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Fügen Sie Ihrer Anwendung eine interaktive Amazon-Standortkarte hinzu

Da Sie nun über ein Framework und einen Div-Platzhalter verfügen, können Sie das Map-Steuerelement zu Ihrer Anwendung hinzufügen. In diesem Tutorial wird MapLibre GL JS als Kartensteuerung verwendet, um Daten von Amazon Location Service abzurufen. Sie werden den auch verwendenJavaScript Authentifizierungshelfer, um das Signieren von Anrufen an den Amazon-Standort APIs mit Ihrem API Schlüssel zu erleichtern.

Um Ihrer Anwendung eine interaktive Karte hinzuzufügen

  1. Öffnen Sie die quickstart.html Datei, die Sie im vorherigen Abschnitt erstellt haben.

  2. Fügen Sie Verweise auf die benötigten Bibliotheken und die Skriptdatei hinzu, die Sie erstellen werden. Die Änderungen, die Sie vornehmen müssen, finden Sie untergreen.

    <!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>

    Dadurch werden Ihrer App die folgenden Abhängigkeiten hinzugefügt:

    • MapLibre GL JS. Diese Bibliothek und das Stylesheet enthalten ein Kartensteuerelement, das Kartenkacheln anzeigt und interaktive Funktionen wie Schwenken und Zoomen bietet. Das Steuerelement ermöglicht auch Erweiterungen, z. B. das Zeichnen eigener Features auf der Karte.

    • Amazon Location-Kunde. Dies bietet Schnittstellen für die Amazon Location-Funktionalität, die zum Abrufen von Kartendaten und zur Suche nach Orten auf der Karte erforderlich ist. Der Amazon Location-Client basiert auf dem AWS SDK for JavaScript v3.

    • Amazon Location Authentication Helper. Dies bietet hilfreiche Funktionen für die Authentifizierung von Amazon Location Service mit API Schlüsseln oder Amazon Cognito.

    In diesem Schritt wird auch ein Verweis hinzugefügtmain.js, den Sie als Nächstes erstellen werden.

  3. Speichern Sie die quickstart.html-Datei.

  4. Erstellen Sie eine neue Datei mit dem Namen main.js in demselben Ordner wie Ihre CSS Dateien HTML und öffnen Sie sie zur Bearbeitung.

  5. Fügen Sie Ihrer Datei das folgende Skript hinzu. Der Text in red sollte durch den API Schlüsselwert, den Namen der Kartenressource und den Namen der Ortsressource, die Sie zuvor erstellt haben, sowie durch die Regionskennung für Ihre Region (z. B.us-east-1) ersetzt werden.

    // 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();

    Dieser Code richtet Amazon Location-Ressourcen ein, konfiguriert und initialisiert dann ein MapLibre GL JS-Kartensteuerelement und platziert es in Ihrem <div> Element mit der ID. map

    Es ist wichtig, die initializeMap() Funktion zu verstehen. Sie erstellt ein neues MapLibre Map-Steuerelement (mlglMaplokal aufgerufen, aber map im restlichen Code aufgerufen), das zum Rendern der Map in Ihrer Anwendung verwendet wird.

      // 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
  });

    Wenn Sie ein neues MapLibre Map-Steuerelement erstellen, geben die übergebenen Parameter den Anfangsstatus des Map-Steuerelements an. Hier legen wir die folgenden Parameter fest.

    • HTMLContainer, der das Map-Div-Element in unserem verwendetHTML.

    • Der ursprüngliche Mittelpunkt der Karte bis zu einem Punkt in Washington, DC.

    • Die Zoomstufe beträgt 16 (vergrößert auf eine Nachbarschafts- oder Blockebene).

    • Der für die Karte zu verwendende Stil, der verwendet werden MapLibre kann, URL um die Kartenkacheln und andere Informationen zum Rendern der Karte abzurufen. Beachten Sie, dass dies Ihren API Schlüssel für die Authentifizierung URL beinhaltet.

  6. Speichern Sie Ihre JavaScript Datei und öffnen Sie sie mit einem Browser. Sie haben jetzt eine Karte auf Ihrer Seite, auf der Sie Schwenk- und Zoom-Aktionen verwenden können.

    Anmerkung

    Sie können diese App verwenden, um zu sehen, wie sich das MapLibre Kartensteuerelement verhält. Sie können versuchen, Strg oder Shift zu verwenden, während Sie einen Ziehvorgang ausführen, um andere Möglichkeiten zur Interaktion mit der Karte zu finden. All diese Funktionen sind anpassbar.

    Map of Washington D.C. showing Constitution Gardens and Independence Ave SW in an Amazon Location Service app.

Ihre App ist fast fertig. Im nächsten Abschnitt werden Sie sich mit der Auswahl eines Standorts auf der Karte befassen und die Adresse des ausgewählten Standorts anzeigen. Sie werden das Ergebnis auch JSON auf der Seite anzeigen, um die vollständigen Ergebnisse zu sehen.