Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Buat aplikasi Peta dan Tempat Lokasi Amazon pertama Anda
Di bagian ini, Anda akan membuat aplikasi pertama Anda dengan Peta dan Tempat.
**Prasyarat:**
Jika Anda sudah membuat kunci API di [Menggunakan konsol Amazon Location Service untuk mengautentikasi](set-up-auth.md) langkah-langkahnya, mari kita mulai.
Jika Anda belum membuat kunci API, ikuti [Menggunakan konsol Amazon Location Service untuk mengautentikasi](set-up-auth.md) sebelum melanjutkan membangun aplikasi. Jika Anda memiliki pertanyaan, lihat [Gunakan kunci API untuk mengautentikasi](using-apikeys.md) dan [Wilayah yang didukung Lokasi Amazon](location-regions.md) untuk informasi lebih lanjut.
## Web
Berikut adalah step-by-step tutorial untuk membuat aplikasi peta Amazon Location Service dengan MapLibre GL JS. Panduan ini akan memandu Anda melalui pengaturan peta, menambahkan opsi gaya, dan mengaktifkan fungsionalitas pencarian tempat.
### Siapkan halaman awal
Pada bagian ini, kita akan mengatur halaman awal dan struktur folder.
#### Tambahkan pustaka dan stylesheet yang diperlukan
Buat file `index.html`. Untuk merender peta, Anda memerlukan MapLibre GL JS dan MapLibre GL Geocoder. Anda akan menambahkan stylesheet MapLibre dan skrip Geocoder dan skrip. JavaScript
Salin dan tempel kode berikut ke `index.html` file Anda.
```
Amazon Location Service - Getting Started with First Map App
```
#### Buat wadah Peta
Di bawah `` elemen file HTML, buat `
` elemen dalam HTML Anda untuk menahan peta. Anda dapat menata gaya ini `
` di CSS Anda untuk mengatur dimensi sesuai kebutuhan untuk aplikasi Anda. Anda harus mengunduh file CSS,`style.css`, dari GitHub repositori kami. Ini akan membantu Anda fokus pada logika bisnis.
Simpan `index.html` file `style.css` dan di folder yang sama.
Unduh `style.css` file dari [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css).
```
```
#### Tambahkan kunci API dan detail AWS Wilayah
Tambahkan kunci API yang Anda buat [Gunakan kunci API untuk mengautentikasi](using-apikeys.md) ke file ini, bersama dengan AWS Wilayah tempat kunci dibuat.
```
.....
.....
```
### Tambahkan Peta ke aplikasi Anda
Di bagian ini, kami akan menambahkan kemampuan Peta ke aplikasi. Sebelum Anda mulai, file Anda harus dalam struktur folder ini.
Jika belum melakukannya, silakan unduh `style.css` file dari [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]
```
#### Buat Fungsi untuk Menginisialisasi Peta
Untuk mengatur peta Anda, buat fungsi berikut`initializeMap(...)`, setelah baris`//Add functions`.
Pilih lokasi pusat awal dan tingkat zoom. Dalam contoh ini, kami mengatur pusat peta ke Vancouver, Kanada, dengan tingkat zoom 10. Tambahkan kontrol navigasi untuk memperbesar mudah.
```
/**
* 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
}
```
#### Inisialisasi Peta
Panggilan `initializeMap(...)` untuk menginisialisasi peta. Secara opsional, Anda dapat menginisialisasi dengan gaya dan skema warna pilihan Anda setelah fungsi. `initializeMap` Untuk opsi gaya lainnya, lihat[AWS gaya peta dan fitur](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
```
Buka `index.html` di browser untuk melihat peta beraksi.
#### Tambahkan Kontrol Navigasi
Secara opsional, Anda dapat menambahkan kontrol navigasi (zoom dan rotasi) ke peta. Ini harus dilakukan setelah menelepon`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
```
#### Tinjau Kode Peta
Selamat\$1 Aplikasi pertama Anda siap menggunakan peta. Buka `index.html` di browser. Pastikan `style.css` berada di folder yang sama dengan`index.html`.
HTML akhir Anda akan terlihat seperti ini:
```
Amazon Location Service - Getting Started with First Map App
```
### Tambahkan Tempat ke aplikasi Anda
Di bagian ini, kami akan mengatur kemampuan menambahkan tempat ke aplikasi. Unduh JavaScript file dari 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).
Sebelum Anda mulai, file Anda harus dalam struktur folder ini:
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### Buat Fungsi untuk Membuat GeoPlaces
Untuk menambahkan fungsionalitas pencarian, inisialisasi `GeoPlaces` kelas menggunakan `AuthHelper` dan`AmazonLocationClient`. Tambahkan `getGeoPlaces(map)` fungsi berikut sebelum `` tag masuk`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
}
```
#### Buat Fungsi untuk Menambahkan Kotak Pencarian ke Aplikasi
Tambahkan berikut ini`addSearchBox(map, geoPlaces)`,`renderPopup(feature)`, dan `createPopup(feature)` fungsi sebelum `` tag masuk `index.html` untuk menyelesaikan pengaturan fungsionalitas pencarian.
```
/**
* 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
}
```
#### Tambahkan Kotak Pencarian ke Aplikasi
Buat `GeoPlaces` objek dengan memanggil `getGeoPlaces(map)` seperti yang didefinisikan dalam Bagian 3.1 dan kemudian panggil `addSearchBox(map, geoPlaces)` untuk menambahkan kotak pencarian ke aplikasi.
```
// 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);
```
Pencarian tempat Anda siap digunakan. Buka `index.html` di browser untuk melihatnya beraksi.
#### Tambahkan Fungsi untuk Menampilkan Popup pada Pengguna Klik pada Peta
Buat fungsi `addMapClick(map, geoPlaces)` untuk menampilkan popup saat pengguna mengklik peta. Tambahkan fungsi ini tepat sebelum `` 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
}
});
}
```
#### Fungsi Panggilan untuk Menambahkan Fitur Klik Peta
Untuk mengaktifkan tindakan klik peta, panggil `addMapClick(map, geoPlaces)` setelah baris yang berisi`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);
```
#### Tinjau aplikasi Peta dan Tempat
Selamat\$1 Aplikasi pertama Anda siap menggunakan Peta dan Tempat. Buka `index.html` di browser. Pastikan `style.css` dan `utils.js` berada di folder yang sama dengan`index.html`.
HTML akhir Anda akan terlihat seperti ini:
```
Amazon Location Service - Getting Started with First Map App
```
### Jelajahi lebih lanjut
Anda telah menyelesaikan tutorial mulai cepat, dan harus memiliki gagasan tentang bagaimana Amazon Location Service digunakan untuk membangun aplikasi. Untuk mendapatkan lebih banyak dari Lokasi Amazon, Anda dapat melihat sumber daya berikut:
+ **Detail saran kueri** - Pertimbangkan untuk memperluas `GeoPlaces` kelas atau menggunakan pendekatan serupa `ReverseGeocode` untuk mendapatkan detail lebih lanjut tentang hasil yang dikembalikan oleh API. `Suggestion`
+ **Pilih API yang tepat untuk kebutuhan bisnis Anda** - Untuk menentukan API Lokasi Amazon terbaik untuk kebutuhan Anda, lihat sumber daya ini:[Pilih API yang tepat](choose-an-api.md).
+ **Lihat panduan “cara” Lokasi Amazon - Kunjungi Panduan** [Pengembang Layanan Lokasi Amazon](https://docs.aws.amazon.com/location/) untuk tutorial dan sumber daya lebih lanjut.
+ **Dokumentasi dan informasi produk** - Untuk dokumentasi lengkap, kunjungi [Amazon Location Service Developer Guide](https://docs.aws.amazon.com/location/). Untuk mempelajari lebih lanjut tentang produk, buka halaman [Produk Amazon Location Service](https://aws.amazon.com/location).