Tutorial: Cari tempat menarik terdekat menggunakan Azure Maps

Artikel
04/30/2024

Tutorial ini menunjukkan cara menyiapkan akun dengan Azure Maps, lalu menggunakan API Azure Maps untuk mencari tempat yang menarik. Dalam tutorial ini, Anda akan mempelajari cara:

Membuat akun Azure Maps
Mengambil kunci langganan untuk akun Peta Anda
Membuat halaman web baru menggunakan API kontrol peta
Menggunakan layanan pencarian Azure Maps untuk menemukan tempat menarik terdekat

Prasyarat

Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

Akun Azure Peta
Kunci langganan

Catatan

Untuk informasi selengkapnya tentang autentikasi di Azure Maps, lihat mengelola autentikasi di Azure Maps.

Membuat peta baru

API Kontrol Peta adalah pustaka klien yang nyaman. API ini memungkinkan Anda mudah mengintegrasikan Azure Maps ke dalam aplikasi web Anda. Hal ini menyembunyikan kompleksitas panggilan layanan REST dan meningkatkan produktivitas Anda dengan komponen yang dapat disesuaikan. Langkah-langkah berikut menunjukkan cara membuat halaman HTML statis yang disematkan dengan API Kontrol Peta.

Pada komputer lokal Anda, buat file baru dan beri nama MapSearch.html.

Tambah komponen HTML berikut ke file:

 <!DOCTYPE html>
 <html>
 <head>
     <title>Map Search</title>
     <meta charset="utf-8" />

     <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
     <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
     <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

     <script>
     function GetMap(){
         //Add Map Control JavaScript code here.
     }
     </script>

     <style>
         html,
         body {
             width: 100%;
             height: 100%;
             padding: 0;
             margin: 0;
         }

         #myMap {
             width: 100%;
             height: 100%;
         }
     </style>
 </head>
 <body onload="GetMap()">
     <div id="myMap"></div>
 </body>
 </html>

Beberapa hal yang perlu diketahui mengenai HTML di atas:

Header HTML mencakup file sumber daya CSS dan JavaScript yang di-hosting oleh pustaka Kontrol Azure Map.
Peristiwa onload di isi halaman akan memanggil fungsi GetMap saat isi halaman telah dimuat.
Fungsi ini GetMap berisi kode JavaScript sebaris yang digunakan untuk mengakses AZURE Peta API. Ini ditambahkan di langkah berikutnya.

Tambah kode JavaScript berikut ke fungsi GetMap file HTML. Ganti string <Your Azure Maps Subscription Key> dengan kunci langganan yang Anda salin dari akun Azure Peta Anda.
```
//Instantiate a map object
var map = new atlas.Map("myMap", {
    view: 'Auto',

    // Add your Azure Maps subscription key. https://aka.ms/am-primaryKey
    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Subscription Key>'
    }
});
```
Beberapa hal yang perlu diketahui mengenai HTML di atas:
- Inti fungsiGetMap, yang menginisialisasi API Kontrol Peta untuk kunci akun Azure Peta Anda.
- atlas adalah namespace layanan yang terdiri atas API dan komponen visual terkait.
- atlas.Map menyediakan kontrol untuk peta web visual dan interaktif.
Simpan perubahan Anda ke file dan buka halaman HTML di browser. Peta yang ditampilkan adalah peta paling mendasar yang dapat dibuat dengan memanggil atlas.Map menggunakan kunci akun Anda.
Dalam fungsi GetMap, setelah menginisialisasi peta, tambah kode JavaScript berikut.
```
//Wait until the map resources are ready.
map.events.add('ready', function() {

    //Create a data source and add it to the map.
    datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a layer for rendering point data.
    var resultLayer = new atlas.layer.SymbolLayer(datasource, null, {
        iconOptions: {
            image: 'pin-round-darkblue',
            anchor: 'center',
            allowOverlap: true
        },
        textOptions: {
            anchor: "top"
        }
    });

    map.layers.add(resultLayer);
});
```
Tentang kode ini:
- Peristiwa ready ditambahkan ke peta, yang diaktifkan saat sumber daya peta selesai dimuat dan peta siap diakses.
- Dalam penanganan aktivitas ready peta, sumber data dibuat untuk menyimpan data hasil.
- Lapisan simbol dibuat dan dilampirkan ke sumber data. Lapisan ini menentukan cara data hasil dalam sumber data harus dirender. Dalam hal ini, hasilnya dirender dengan ikon pin bulat biru tua, berpusat di atas koordinat hasil yang memungkinkan ikon lain tumpang tindih.
- Lapisan hasil ditambahkan ke lapisan peta.

Menambah kapabilitas pencarian

Bagian ini menunjukkan cara menggunakan Search API Azure Maps untuk menemukan tempat menarik di peta. Ini adalah API RESTful yang dirancang untuk pengembang agar mencari alamat, tempat menarik, dan informasi geografis lainnya. Layanan Pencarian menetapkan informasi garis lintang dan bujur ke alamat tertentu.

Tip

Azure Peta menawarkan serangkaian modul npm untuk Azure Peta JavaScript REST SDK. Modul ini mencakup pustaka klien yang menyederhanakan penggunaan layanan Azure Peta REST dalam aplikasi Node.js. Untuk daftar lengkap modul yang tersedia, lihat Panduan Pengembang JavaScript/TypeScript REST SDK (pratinjau).

Layanan Pencarian

Tambahkan blok skrip berikut di penanganan aktivitas peta ready . Ini adalah kode untuk membangun permintaan pencarian. Ini menggunakan Fuzzy layanan Pencarian, API pencarian dasar dari Layanan Pencarian. Fuzzy layanan Pencarian menangani sebagian besar input fuzzy seperti alamat, tempat, dan tempat menarik (POI). Kode ini mencari stasiun pengisian bahan bakar terdekat dalam radius yang ditentukan dari garis lintang dan bujur yang disediakan. Koleksi fitur GeoJSON kemudian diekstrak dan ditambahkan ke sumber data, yang secara otomatis menghasilkan data yang dirender pada lapisan simbol peta. Bagian terakhir dari skrip mengatur tampilan kamera peta menggunakan kotak pembatas hasil menggunakan properti setCamera Peta.

var query = 'gasoline-station';
var radius = 9000;
var lat = 47.64452336193245;
var lon = -122.13687658309935;
var url = `https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=${query}&lat=${lat}&lon=${lon}&radius=${radius}`;

fetch(url, {
    headers: {
        "Subscription-Key": map.authentication.getToken()
    }
})
.then((response) => response.json())
.then((response) => {
    var bounds = [];

    //Extract GeoJSON feature collection from the response and add it to the datasource
    var data = response.results.map((result) => {
        var position = [result.position.lon, result.position.lat];
        bounds.push(position);
        return new atlas.data.Feature(new atlas.data.Point(position), { ...result });
    });
    datasource.add(data);

    //Set camera to bounds to show the results
    map.setCamera({
        bounds: new atlas.data.BoundingBox.fromLatLngs(bounds),
        zoom: 10,
        padding: 15
    });
});

Simpan file MapSearch.htm dan refresh browser Anda. Anda akan melihat peta yang berpusat di Seattle dengan pin biru bulat untuk lokasi stasiun pengisian bahan bakar di daerah tersebut.

Anda dapat melihat data mentah yang dirender peta dengan memasukkan HTTPRequest berikut di browser Anda. Ganti <Your Azure Maps Subscription Key> dengan kunci langganan Anda.

https://atlas.microsoft.com/search/poi/json?api-version=1.0&query=gasoline%20station&subscription-key={Your-Azure-Maps-Subscription-key}&lat=47.6292&lon=-122.2337&radius=100000

Pada titik ini, halaman MapSearch dapat menampilkan lokasi tempat menarik yang dikembalikan dari kueri pencarian fuzzy. Ayo tambahkan beberapa kemampuan interaktif dan informasi selengkapnya tentang lokasi.

Menambah data interaktif

Peta yang kami buat sejauh ini hanya melihat data garis bujur/lintang untuk hasil pencarian. Namun, JSON mentah yang dikembalikan layanan Maps Search terdiri atas informasi tambahan tentang setiap SPBU. Termasuk nama dan alamat jalan. Anda dapat memasukkan data tersebut ke dalam peta dengan kotak popup interaktif.

Tambah baris kode berikut di penanganan aktivitas ready peta setelah kode untuk meminta layanan pencarian fuzzy. Kode ini membuat instans Popup dan menambahkan peristiwa mouseover ke lapisan simbol.
```
// Create a popup but leave it closed so we can update it and display it later.
popup = new atlas.Popup();

//Add a mouse over event to the result layer and display a popup when this event fires.
map.events.add('mouseover', resultLayer, showPopup);
```
API atlas.Popup menyediakan jendela informasi yang berjangkar pada posisi yang diperlukan di peta.

Tambahkan baris kode berikut di ready peta event handler setelah kode untuk membuat instans Popup dan menambahkan peristiwa mouseover ke lapisan simbol. Kode ini menunjukkan jendela popup dengan hasil ketika Anda mengarahkan mouse ke suatu titik yang menarik.

function showPopup(e) {
    //Get the properties and coordinates of the first shape that the event occurred on.

    var p = e.shapes[0].getProperties();
    var position = e.shapes[0].getCoordinates();

    //Create HTML from properties of the selected result.
    var html = `
      <div style="padding:5px">
        <div><b>${p.poi.name}</b></div>
        <div>${p.address.freeformAddress}</div>
        <div>${position[1]}, ${position[0]}</div>
      </div>`;

    //Update the content and position of the popup.
    popup.setPopupOptions({
        content: html,
        position: position
    });

    //Open the popup.
    popup.open(map);
}

Simpan file dan refresh browser Anda. Sekarang peta di browser menampilkan popup informasi saat Anda mengarahkan kursor ke salah satu pin pencarian.

Untuk kode lengkap yang digunakan dalam tutorial ini, lihat tutorial search di GitHub.
Untuk melihat sampel ini secara langsung, lihat Mencari tempat menarik di situs Azure Maps Code Samples.

Langkah berikutnya

Tutorial berikutnya menunjukkan cara menampilkan rute antara dua lokasi.

Membuat rute ke tujuan

Bagikan melalui