Tambahkan peta interaktif Lokasi Amazon ke aplikasi Anda - Amazon Location Service

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

Tambahkan peta interaktif Lokasi Amazon 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 referensimain.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 membuat 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.

    • HTMLcontainer, yang menggunakan elemen map div di. HTML

    • 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.

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

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.