Tambahkan pencarian Lokasi Amazon ke aplikasi Anda

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.