Membuat aplikasi web - Amazon Location Service
Buat sumber dayaOtentikasi pengaturanMenciptakan HTMLMenambahkan petaMenambahkan pencarianAplikasi akhirApa selanjutnya

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Membuat aplikasi web

Di bagian ini, Anda akan membuat halaman web statis dengan peta dan kemampuan untuk mencari di lokasi. Pertama, Anda akan membuat sumber daya Lokasi Amazon Anda dan membuat API kunci untuk aplikasi Anda.

Membuat sumber daya Lokasi Amazon untuk aplikasi Anda

Jika Anda belum memilikinya, Anda harus membuat sumber daya Lokasi Amazon yang akan digunakan aplikasi Anda. Di sini, Anda membuat sumber daya peta untuk menampilkan peta di aplikasi Anda, dan indeks tempat untuk mencari lokasi di peta.

Untuk menambahkan sumber daya lokasi ke aplikasi Anda

  1. Pilih gaya peta yang ingin Anda gunakan.

    1. Di konsol Lokasi Amazon, pada halaman Maps, pilih Buat peta untuk melihat pratinjau gaya peta.

    2. Tambahkan Nama dan Deskripsi untuk sumber daya peta baru. Catat nama yang Anda gunakan untuk sumber daya peta. Anda akan membutuhkannya saat membuat file skrip Anda nanti di tutorial.

    3. Pilih peta.

      catatan

      Memilih gaya peta juga memilih penyedia data peta mana yang akan Anda gunakan. Jika aplikasi Anda melacak atau merutekan aset yang Anda gunakan dalam bisnis Anda, seperti kendaraan pengiriman atau karyawan, Anda hanya dapat menggunakannya HERE sebagai penyedia geolokasi Anda. Untuk informasi selengkapnya, lihat bagian 82 dari ketentuan AWS layanan.

    4. Setuju dengan Syarat dan Ketentuan Lokasi Amazon, lalu pilih Buat peta. Anda dapat berinteraksi dengan peta yang Anda pilih: memperbesar, memperkecil, atau menggeser ke segala arah.

    5. Catat Amazon Resource Name (ARN) yang ditampilkan untuk sumber daya peta baru Anda. Anda akan menggunakannya untuk membuat otentikasi yang benar nanti dalam tutorial ini.

  2. Pilih indeks tempat yang ingin Anda gunakan.

    1. Di konsol Lokasi Amazon di halaman Indeks tempat, pilih Buat indeks tempat.

    2. Tambahkan Nama dan Deskripsi untuk sumber daya indeks tempat baru. Catat nama yang Anda gunakan untuk sumber daya indeks tempat. Anda akan membutuhkannya saat membuat file skrip Anda nanti di tutorial.

    3. Pilih penyedia data.

      catatan

      Dalam kebanyakan kasus, pilih penyedia data yang cocok dengan penyedia peta yang sudah Anda pilih. Ini membantu memastikan bahwa pencarian akan cocok dengan peta.

      Jika aplikasi Anda melacak atau merutekan aset yang Anda gunakan dalam bisnis Anda, seperti kendaraan pengiriman atau karyawan, Anda hanya dapat menggunakannya HERE sebagai penyedia geolokasi Anda. Untuk informasi selengkapnya, lihat bagian 82 dari ketentuan AWS layanan.

    4. Pilih opsi Penyimpanan data. Untuk tutorial ini, hasilnya tidak disimpan, sehingga Anda dapat memilih Tidak, sekali pakai saja.

    5. Setuju dengan Syarat dan Ketentuan Lokasi Amazon, lalu pilih Buat indeks tempat.

    6. Catat ARN yang ditampilkan untuk sumber daya indeks tempat baru Anda. Anda akan menggunakannya untuk membuat otentikasi yang benar di bagian selanjutnya dari tutorial ini.

Menyiapkan otentikasi untuk aplikasi Anda

Aplikasi yang Anda buat dalam tutorial ini memiliki penggunaan anonim, artinya pengguna Anda tidak diharuskan masuk AWS untuk menggunakan aplikasi. Namun, secara default, Amazon Location Service APIs memerlukan otentikasi untuk digunakan. Anda dapat menggunakan Amazon Cognito atau API kunci untuk memberikan otentikasi dan otorisasi bagi pengguna anonim. Dalam tutorial ini, Anda akan membuat API kunci untuk digunakan dalam aplikasi sampel.

catatan

Untuk informasi selengkapnya tentang menggunakan API kunci atau Amazon Cognito dengan Amazon Location Service, lihat. Memberikan akses ke Amazon Location Service

Untuk menyiapkan otentikasi untuk aplikasi Anda

  1. Buka konsol Lokasi Amazon, dan pilih APItombol dari menu kiri.

  2. Pilih APItombol Buat.

    penting

    APIKunci yang Anda buat harus sama Akun AWS dan AWS Wilayah sebagai sumber daya Amazon Location Service yang Anda buat di bagian sebelumnya.

  3. Satu halaman Create API key, isi informasi berikut.

    • Nama — Nama untuk API kunci Anda, sepertiMyWebAppKey.

    • Sumber Daya — Pilih sumber daya indeks Peta Lokasi Amazon dan Tempat yang Anda buat di bagian sebelumnya. Anda dapat menambahkan lebih dari satu sumber daya dengan memilih Tambah sumber daya. Ini akan memungkinkan API kunci untuk digunakan dengan sumber daya tersebut.

    • Tindakan - Tentukan tindakan yang ingin Anda otorisasi dengan API kunci ini. Anda harus memilih setidaknya geo: GetMap * dan geo: SearchPlaceIndexfForPosition sehingga tutorial akan berfungsi seperti yang diharapkan.

    • Anda dapat menambahkan Deskripsi, Waktu kedaluwarsa, atau Tag secara opsional ke kunci Anda. API Anda juga dapat menambahkan referer (seperti*.example.com), untuk membatasi kunci hanya digunakan dari domain tertentu. Ini berarti bahwa tutorial hanya akan bekerja dari domain itu.

      catatan

      Disarankan agar Anda melindungi penggunaan API kunci Anda dengan menetapkan waktu kedaluwarsa atau perujuk, jika tidak keduanya.

  4. Pilih Buat API kunci untuk membuat API kunci.

  5. Pilih Tampilkan API kunci, dan salin nilai kunci untuk digunakan nanti dalam tutorial. Itu akan dalam bentukv1.public.a1b2c3d4....

    penting

    Anda akan memerlukan kunci ini saat menulis kode untuk aplikasi Anda nanti dalam tutorial ini.

Membuat HTML untuk aplikasi Anda

Dalam tutorial ini, Anda akan membuat HTML halaman statis yang menyematkan peta, dan memungkinkan pengguna untuk menemukan apa yang ada di lokasi di peta. Aplikasi ini akan terdiri dari tiga file: HTML file dan CSS file untuk halaman web, dan file JavaScript (.js) untuk kode yang membuat peta dan merespons interaksi pengguna dan peristiwa peta.

Pertama, mari kita buat HTML dan CSS kerangka kerja yang akan digunakan untuk aplikasi. Ini akan menjadi halaman sederhana dengan <div> elemen untuk menahan wadah peta dan <pre>elemen untuk menunjukkan JSON respons terhadap pertanyaan Anda.

Untuk membuat aplikasi HTML untuk mulai cepat Anda

  1. Buat file baru bernamaquickstart.html.

  2. Edit file di editor teks atau lingkungan pilihan Anda. Tambahkan yang berikut ini HTML ke 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>

    Ini HTML memiliki pointer ke CSS file yang akan Anda buat pada langkah berikutnya, beberapa elemen placeholder untuk aplikasi, dan beberapa teks penjelasan.

    Ada dua elemen placeholder yang akan Anda gunakan nanti dalam tutorial ini. Yang pertama adalah <div id="map> elemen, yang akan memegang kontrol peta. Yang kedua adalah <pre id="response"> elemen, yang akan menunjukkan hasil pencarian di peta.

  3. Simpan file Anda.

Sekarang tambahkan CSS untuk halaman web. Ini akan mengatur gaya teks dan elemen placeholder untuk aplikasi.

Untuk membuat aplikasi CSS untuk mulai cepat Anda

  1. Buat file baru bernamamain.css, di folder yang sama dengan file quickstart.html yang dibuat dalam prosedur sebelumnya.

  2. Edit file di editor apa pun yang ingin Anda gunakan. Tambahkan teks berikut ke 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;
}

    Ini menetapkan peta untuk mengisi ruang yang tidak digunakan oleh hal lain, menetapkan area untuk tanggapan kami untuk mengambil 30% dari lebar aplikasi, dan menetapkan warna dan gaya untuk judul dan teks penjelasan.

  3. Simpan file tersebut.

  4. Anda sekarang dapat melihat quickstart.html file di browser untuk melihat tata letak aplikasi.

Selanjutnya, Anda akan menambahkan kontrol peta ke aplikasi.

Menambahkan peta interaktif ke aplikasi Anda

Sekarang Anda memiliki kerangka kerja dan placeholder div, Anda dapat menambahkan kontrol peta ke aplikasi Anda. Tutorial ini menggunakan MapLibre GL JS sebagai kontrol peta, mendapatkan data dari Amazon Location Service. Anda juga akan menggunakan JavaScript Pembantu otentikasi untuk memfasilitasi penandatanganan panggilan ke Lokasi Amazon APIs dengan API kunci Anda.

Untuk menambahkan peta interaktif ke aplikasi Anda

  1. Buka quickstart.html file yang Anda buat di bagian sebelumnya.

  2. Tambahkan referensi ke pustaka yang dibutuhkan, dan file skrip yang akan Anda buat. Perubahan yang perlu Anda lakukan ditampilkan digreen.

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

    Ini menambahkan dependensi berikut ke aplikasi Anda:

    • MapLibre GL JS. Pustaka dan stylesheet ini menyertakan kontrol peta yang menampilkan ubin peta dan mencakup interaktivitas, seperti pan dan zoom. Kontrol juga memungkinkan ekstensi, seperti menggambar fitur Anda sendiri di peta.

    • Klien Lokasi Amazon. Ini menyediakan antarmuka untuk fungsionalitas Lokasi Amazon yang diperlukan untuk mendapatkan data peta, dan untuk mencari tempat di peta. Klien Lokasi Amazon didasarkan pada AWS SDK untuk JavaScript v3.

    • Pembantu Otentikasi Lokasi Amazon. Ini menyediakan fungsi bermanfaat untuk mengautentikasi Amazon Location Service dengan API kunci atau Amazon Cognito.

    Langkah ini juga menambahkan referensi kemain.js, yang akan Anda buat selanjutnya.

  3. Simpan file quickstart.html.

  4. Buat file baru yang disebut main.js di folder yang sama dengan CSS file Anda HTML dan, dan buka untuk diedit.

  5. Tambahkan skrip berikut ke file Anda. Teks di red harus diganti dengan nilai API kunci, nama sumber daya peta, dan nama sumber daya tempat yang Anda buat sebelumnya, serta pengenal wilayah untuk wilayah Anda (sepertius-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();

    Kode ini mengatur sumber daya Lokasi Amazon, lalu mengonfigurasi dan menginisialisasi kontrol peta MapLibre GL JS dan menempatkannya di <div> elemen Anda dengan id. map

    initializeMap()Fungsi ini penting untuk dipahami. Ini menciptakan kontrol MapLibre peta baru (disebut mlglMap secara lokal, tetapi dipanggil map di sisa kode) yang digunakan untuk merender peta dalam aplikasi Anda.

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

    Saat Anda membuat kontrol MapLibre peta baru, parameter yang Anda lewati menunjukkan status awal kontrol peta. Di sini, kami mengatur parameter berikut.

    • HTMLkontainer, yang menggunakan elemen div peta di kamiHTML.

    • Pusat awal peta ke suatu titik di Washington, DC.

    • Tingkat zoom ke 16 (diperbesar ke lingkungan atau tingkat blok).

    • Gaya yang digunakan untuk peta, MapLibre yang memberikan penggunaan URL untuk mendapatkan ubin peta dan informasi lainnya untuk membuat peta. Perhatikan bahwa ini URL termasuk API kunci Anda untuk otentikasi.

  6. Simpan JavaScript file Anda, dan buka dengan browser. Anda sekarang memiliki peta di halaman Anda, di mana Anda dapat menggunakan tindakan pan dan zoom.

    catatan

    Anda dapat menggunakan aplikasi ini untuk melihat bagaimana kontrol MapLibre peta berperilaku. Anda dapat mencoba menggunakan Ctrl atau Shift saat menggunakan operasi menyeret, untuk melihat cara lain untuk berinteraksi dengan peta. Semua fungsi ini dapat disesuaikan.

Aplikasi Anda hampir selesai. Di bagian selanjutnya, Anda akan menangani pemilihan lokasi di peta, dan menunjukkan alamat lokasi yang dipilih. Anda juga akan menampilkan hasil JSON pada halaman, untuk melihat hasil lengkapnya.

Langkah terakhir untuk aplikasi Anda adalah menambahkan pencarian di peta. Dalam hal ini, Anda akan menambahkan pencarian geocoding terbalik, di mana Anda menemukan item di suatu lokasi.

catatan

Amazon Location Service juga menyediakan kemampuan untuk mencari berdasarkan nama atau alamat untuk menemukan lokasi tempat di peta.

Untuk menambahkan fungsionalitas penelusuran ke aplikasi Anda

  1. Buka main.js file yang Anda buat di bagian sebelumnya.

  2. Ubah main fungsi, seperti yang ditunjukkan. Perubahan yang perlu Anda lakukan ditampilkan digreen.

    async function main() {
  // Create an authentication helper instance using an API key
  const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);


  // Initialize map and Amazon Location SDK client:
  const map = await initializeMap();

  const client = new amazonLocationClient.LocationClient({
    region,
    ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location
  });


  // On mouse click, display marker and get results:
  map.on("click", async function (e) {
    // Set up parameters for search call
    let params = {
      IndexName: placesName,
      Position: [e.lngLat.lng, e.lngLat.lat],
      Language: "en",
      MaxResults: "5",
    };

    // Set up command to search for results around clicked point
    const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);

    try {
      // Make request to search for results around clicked point
      const data = await client.send(searchCommand);

      // Write JSON response data to HTML
      document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2);

      // Display place label in an alert box
      alert(data.Results[0].Place.Label);
    } catch (error) {
      // Write JSON response error to HTML
      document.querySelector("#response").textContent = JSON.stringify(error, undefined, 2);

      // Display error in an alert box
      alert("There was an error searching.");
    }
  });
}

    Kode ini dimulai dengan menyiapkan pembantu otentikasi Lokasi Amazon untuk menggunakan kunci AndaAPI.

    const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

    Kemudian ia menggunakan pembantu otentikasi itu, dan wilayah yang Anda gunakan untuk membuat klien Lokasi Amazon baru.

    const client = new amazonLocationClient.LocationClient({
    region,
    ...authHelper.getLocationClientConfig(),
  });

    Selanjutnya, kode merespons pengguna yang memilih tempat pada kontrol peta. Ini dilakukan dengan menangkap acara yang MapLibre disediakan untukclick.

    map.on("click", async function(e) {
    ...
  });

    MapLibre clickAcara ini menyediakan parameter yang mencakup garis lintang dan bujur yang dipilih pengguna ()e.lngLat. Dalam click acara tersebut, kode membuat searchPlaceIndexForPositionCommand untuk menemukan entitas pada garis lintang dan bujur yang diberikan.

        // Set up parameters for search call
    let params = {
      IndexName: placesName,
      Position: [e.lngLat.lng, e.lngLat.lat],
      Language: "en",
      MaxResults: "5"
    };

    // Set up command to search for results around clicked point
    const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);

    try {
      // Make request to search for results around clicked point
      const data = await client.send(searchCommand);
      ...
    });

    Di sini, IndexName adalah nama sumber daya Indeks Tempat yang Anda buat sebelumnya, Position adalah garis lintang dan bujur untuk dicari, Language adalah bahasa pilihan untuk hasil, dan memberi tahu Lokasi MaxResults Amazon untuk mengembalikan hanya maksimal lima hasil.

    Kode yang tersisa memeriksa kesalahan, dan kemudian menampilkan hasil pencarian dalam <pre> elemen yang disebutresponse, dan menunjukkan hasil teratas dalam kotak peringatan.

  3. (Opsional) Jika Anda menyimpan dan membuka quickstart.html file di browser sekarang, memilih lokasi di peta akan menunjukkan nama atau alamat tempat yang Anda pilih.

  4. Langkah terakhir dalam aplikasi ini adalah menggunakan MapLibre fungsionalitas untuk menambahkan penanda di tempat yang dipilih pengguna. Ubah main fungsinya sebagai berikut. Perubahan yang perlu Anda lakukan ditampilkan digreen.

    async function main() {
  // Create an authentication helper instance using an API key
  const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

  // Initialize map and Amazon Location SDK client
  const map = await initializeMap();
  const client = new amazonLocationClient.LocationClient({
    region,
    ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location
  });

  // Variable to hold marker that will be rendered on click
  let marker;

  // On mouse click, display marker and get results:
  map.on("click", async function (e) {
    // Remove any existing marker
    if (marker) {
      marker.remove();
    }

    // Render a marker on clicked point
    marker = new maplibregl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);

    // Set up parameters for search call
    let params = {
      IndexName: placesName,
      Position: [e.lngLat.lng, e.lngLat.lat],
      Language: "en",
      MaxResults: "5",
    };

    // Set up command to search for results around clicked point
    const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);

...

    Kode ini mendeklarasikan marker variabel, yang diisi setiap kali pengguna memilih lokasi, menunjukkan di mana mereka memilih. Penanda secara otomatis dirender oleh kontrol peta, setelah ditambahkan ke peta dengan.addTo(map);. Kode juga memeriksa penanda sebelumnya, dan menghapusnya, sehingga hanya ada 1 penanda di layar sekaligus.

  5. Simpan main.js file, dan buka quickstart.html file di browser. Anda dapat menggeser dan memperbesar peta, seperti sebelumnya, tetapi sekarang jika Anda memilih lokasi, Anda akan melihat detail tentang lokasi yang Anda pilih.

Aplikasi mulai cepat Anda selesai. Tutorial ini telah menunjukkan kepada Anda cara membuat HTML aplikasi statis yang:

  • Membuat peta yang dapat berinteraksi dengan pengguna.

  • Menangani acara peta (click).

  • Memanggil Amazon Location ServiceAPI, khusus untuk mencari peta di lokasi, menggunakansearchPlaceIndexForPosition.

  • Menggunakan kontrol MapLibre peta untuk menambahkan penanda.

Melihat aplikasi akhir

Kode sumber akhir untuk aplikasi ini termasuk dalam bagian ini. Anda juga dapat menemukan proyek akhir di GitHub.

Anda juga dapat menemukan versi aplikasi yang menggunakan Amazon Cognito alih-alih API tombol aktif. GitHub

Overview

Pilih setiap tab untuk melihat kode sumber akhir dari file dalam tutorial mulai cepat ini.

File-file tersebut adalah:

  • quickstart.html - kerangka kerja untuk aplikasi Anda, termasuk pemegang HTML elemen untuk peta dan hasil pencarian.

  • main.css — stylesheet untuk aplikasi.

  • main.js — skrip untuk aplikasi Anda yang mengautentikasi pengguna, membuat peta, dan mencari pada suatu click peristiwa.

quickstart.html

HTMLKerangka kerja untuk aplikasi mulai cepat.

<!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>
main.css

Stylesheet untuk aplikasi mulai cepat.

* {
  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;
}
main.js

Kode untuk aplikasi mulai cepat. Teks di red harus diganti dengan nama objek Lokasi Amazon yang sesuai.

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

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

  return mlglMap;
}

async function main() {
  // Create an authentication helper instance using an API key
  const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);

  // Initialize map and Amazon Location SDK client
  const map = await initializeMap();
  const client = new amazonLocationClient.LocationClient({
    region,
    ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location
  });

  // Variable to hold marker that will be rendered on click
  let marker;

  // On mouse click, display marker and get results:
  map.on("click", async function (e) {
    // Remove any existing marker
    if (marker) {
      marker.remove();
    }

    // Render a marker on clicked point
    marker = new maplibregl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);

    // Set up parameters for search call
    let params = {
      IndexName: placesName,
      Position: [e.lngLat.lng, e.lngLat.lat],
      Language: "en",
      MaxResults: "5",
    };

    // Set up command to search for results around clicked point
    const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params);

    try {
      // Make request to search for results around clicked point
      const data = await client.send(searchCommand);

      // Write JSON response data to HTML
      document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2);

      // Display place label in an alert box
      alert(data.Results[0].Place.Label);
    } catch (error) {
      // Write JSON response error to HTML
      document.querySelector("#response").textContent = JSON.stringify(error, undefined, 2);

      // Display error in an alert box
      alert("There was an error searching.");
    }
  });
}

main();

Apa selanjutnya

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: