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.
# Erstellen Sie Ihre erste Amazon Location Maps and Places-Anwendung
In diesem Abschnitt erstellen Sie Ihre erste Anwendung mit Maps and Places.
**Voraussetzung:**
Wenn Sie in den [Verwenden Sie die Amazon Location Service Service-Konsole, um sich zu authentifizieren](set-up-auth.md) Schritten bereits einen API-Schlüssel erstellt haben, lassen Sie uns beginnen.
Wenn Sie noch keinen API-Schlüssel erstellt haben, folgen Sie den Anweisungen, [Verwenden Sie die Amazon Location Service Service-Konsole, um sich zu authentifizieren](set-up-auth.md) bevor Sie mit der Erstellung der Anwendung fortfahren. Wenn Sie Fragen haben, finden Sie weitere [Unterstützte Regionen mit Amazon-Standort](location-regions.md) Informationen unter [Verwenden Sie API-Schlüssel zur Authentifizierung](using-apikeys.md) und.
## Web
Hier finden Sie ein step-by-step Tutorial zum Erstellen einer Amazon Location Service Service-Kartenanwendung mit MapLibre GL JS. Diese Anleitung führt Sie durch die Einrichtung der Karte, das Hinzufügen von Gestaltungsoptionen und die Aktivierung der Ortssuchfunktion.
### Richten Sie die erste Seite ein
In diesem Abschnitt richten wir die erste Seiten- und Ordnerstruktur ein.
#### Fügen Sie die erforderlichen Bibliotheken und Stylesheets hinzu
Erstellen Sie eine Datei `index.html`. Um die Karte zu rendern, benötigen Sie MapLibre GL JS und MapLibre GL Geocoder. Sie werden die Stylesheets MapLibre und die Geocoder-Stylesheets und -Skripte hinzufügen. JavaScript
Kopieren Sie den folgenden Code und fügen Sie ihn in Ihre Datei ein. `index.html`
```
Amazon Location Service - Getting Started with First Map App
```
#### Erstellen Sie den Map-Container
Erstellen Sie unter dem `` Element der HTML-Datei ein `
` Element in Ihrem HTML-Code, das die Map aufnehmen soll. Sie können dies `
` in Ihrem CSS gestalten, um die Abmessungen nach Bedarf für Ihre Anwendung festzulegen. Sie müssen die CSS-Datei,`style.css`, aus unserem GitHub Repository herunterladen. Dies wird Ihnen helfen, sich auf die Geschäftslogik zu konzentrieren.
Speichern Sie die `index.html` Dateien `style.css` und im selben Ordner.
Laden Sie die `style.css` Datei von herunter [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
```
#### Fügen Sie API-Schlüssel und AWS Regionsdetails hinzu
Fügen Sie den API-Schlüssel, den Sie erstellt haben, zusammen mit der AWS Region, in [Verwenden Sie API-Schlüssel zur Authentifizierung](using-apikeys.md) der der Schlüssel erstellt wurde, zu dieser Datei hinzu.
```
.....
.....
```
### Fügen Sie Ihrer Anwendung eine Karte hinzu
In diesem Abschnitt werden wir der Anwendung Kartenfunktionen hinzufügen. Bevor Sie beginnen, sollten sich Ihre Dateien in dieser Ordnerstruktur befinden.
Falls Sie dies noch nicht getan haben, laden Sie die `style.css` Datei bitte von herunter [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]
```
#### Erstellen Sie eine Funktion zur Initialisierung der Map
Um Ihre Map einzurichten, erstellen Sie nach der Zeile `//Add functions` die folgende Funktion. `initializeMap(...)`
Wählen Sie eine anfängliche Position in der Mitte und eine Zoomstufe. In diesem Beispiel haben wir Vancouver, Kanada, als Kartenmittelpunkt mit einer Zoomstufe von 10 festgelegt. Fügen Sie Navigationssteuerungen für einfaches Zoomen hinzu.
```
/**
* 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
}
```
#### Initialisieren Sie die Karte
Rufen Sie `initializeMap(...)` auf, um die Map zu initialisieren. Optional können Sie sie nach der Funktion mit Ihrem bevorzugten Stil und Farbschema initialisieren. `initializeMap` Weitere Stiloptionen finden Sie unter[AWS Kartenstile und Funktionen](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
```
Öffnen Sie die Karte `index.html` in einem Browser, um sich die Karte in Aktion anzusehen.
#### Navigationskontrolle hinzufügen
Optional können Sie der Karte Navigationssteuerungen (Zoom und Drehung) hinzufügen. Dies sollte nach dem Anruf erfolgen`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
```
#### Überprüfen Sie den Kartencode
Herzlichen Glückwunsch\$1 Ihre erste App ist bereit, eine Karte zu verwenden. `index.html`In einem Browser öffnen. Stellen Sie sicher, dass `style.css` es sich im selben Ordner befindet wie`index.html`.
Ihr endgültiger HTML-Code sollte so aussehen:
```
Amazon Location Service - Getting Started with First Map App
```
### Fügen Sie Ihrer Bewerbung Orte hinzu
In diesem Abschnitt werden wir die Funktionen zum Hinzufügen von Orten zur Anwendung einrichten. Laden Sie die JavaScript Datei herunter von 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).
Bevor Sie beginnen, sollten sich Ihre Dateien in dieser Ordnerstruktur befinden:
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### Funktion zum Erstellen erstellen GeoPlaces
Um Suchfunktionen hinzuzufügen, initialisieren Sie die `GeoPlaces` Klasse mit `AuthHelper` und`AmazonLocationClient`. Fügen Sie vor dem `` Tag die folgende `getGeoPlaces(map)` Funktion hinzu. `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
}
```
#### Funktion erstellen, um der Anwendung ein Suchfeld hinzuzufügen
Fügen Sie vor dem `` Tag die folgenden `createPopup(feature)` Funktionen `addSearchBox(map, geoPlaces)``renderPopup(feature)`, und hinzu`index.html`, um die Einrichtung der Suchfunktion abzuschließen.
```
/**
* 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
}
```
#### Fügen Sie der Anwendung ein Suchfeld hinzu
Erstellen Sie ein `GeoPlaces` Objekt, indem Sie es `getGeoPlaces(map)` wie in Abschnitt 3.1 definiert aufrufen und dann aufrufen`addSearchBox(map, geoPlaces)`, um das Suchfeld zur Anwendung hinzuzufügen.
```
// 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);
```
Ihre Ortssuche ist einsatzbereit. Öffnen Sie es `index.html` in einem Browser, um es in Aktion zu sehen.
#### Funktion hinzufügen, um ein Popup anzuzeigen, wenn der Benutzer auf die Karte klickt
Erstellen Sie eine Funktion`addMapClick(map, geoPlaces)`, um ein Popup anzuzeigen, wenn der Benutzer auf die Karte klickt. Fügen Sie diese Funktion direkt vor dem `` Tag hinzu.
```
/**
* 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
}
});
}
```
#### Rufen Sie die Funktion auf, um die Kartenklick-Funktion hinzuzufügen
Um die Aktion zum Klicken auf die Karte zu aktivieren, rufen Sie `addMapClick(map, geoPlaces)` nach der Zeile auf, die enthält`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);
```
#### Sehen Sie sich die App Maps and Places an
Herzlichen Glückwunsch\$1 Ihre erste Anwendung ist bereit, Maps and Places zu verwenden. `index.html`In einem Browser öffnen. Stellen Sie sicher`style.css`, dass Sie `utils.js` sich im selben Ordner befinden wie`index.html`.
Ihr endgültiger HTML-Code sollte so aussehen:
```
Amazon Location Service - Getting Started with First Map App
```
### Erkunde mehr
Sie haben das Schnellstart-Tutorial abgeschlossen und sollten eine Vorstellung davon haben, wie Amazon Location Service zum Erstellen von Anwendungen verwendet wird. Um mehr aus Amazon Location herauszuholen, können Sie sich die folgenden Ressourcen ansehen:
+ **Einzelheiten zu den Vorschlägen abfragen** — Erwägen Sie, den `GeoPlaces` Kurs zu erweitern oder einen ähnlichen Ansatz zu verwenden`ReverseGeocode`, um mehr Details zu den von der `Suggestion` API zurückgegebenen Ergebnissen zu erhalten.
+ **Wählen Sie die richtige API für Ihre Geschäftsanforderungen** — Um die beste Amazon Location API für Ihre Anforderungen zu ermitteln, sehen Sie sich diese Ressource an:[Wählen Sie die richtige API](choose-an-api.md).
+ **Schauen Sie sich die Anleitungen zu Amazon Location an —** Tutorials und weitere Ressourcen finden Sie im [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/).
+ **Dokumentation und Produktinformationen** — Vollständige Dokumentation finden Sie im [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/). Um mehr über das Produkt zu erfahren, gehen Sie auf die [Produktseite von Amazon Location Service](https://aws.amazon.com/location).