Mulai cepat: Membuat peta pencarian interaktif dengan Azure Maps

Mulai cepat ini menunjukkan cara menggunakan Azure Maps untuk membuat peta yang memberi pengguna pengalaman pencarian interaktif. Berikut panduan langkah-langkah dasar:

• Buat akun Azure Maps Anda.
• Dapatkan kunci langganan Azure Maps Anda untuk digunakan di aplikasi web demo.
• Mengunduh dan membuka aplikasi peta demo.

Prasyarat

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

• Masuk ke portal Azure.

Membuat akun Azure Maps

Buat akun Azure Maps baru dengan langkah-langkah berikut:

1. Pilih Buat sumber daya di sudut kiri atas portal Azure.

2. Ketik Azure Maps di kotak Cari layanan dan Marketplace.

3. Pilih Azure Maps dalam daftar drop down yang muncul, lalu pilih tombol Buat.

4. Pada halaman Buat sumber daya Akun Azure Maps, masukkan nilai berikut lalu pilih tombol Buat:

   • Langganan yang ingin Anda gunakan untuk akun ini.
   • Nama Grup sumber daya untuk akun ini. Anda dapat memilih Buat baru atau Gunakan grup sumber daya yang sudah ada.
   • Nama akun Azure Maps baru Anda.
   • Tingkat harga untuk akun ini. Pilih Gen2.
   • Baca Lisensi dan Pernyataan Privasi, dan centang pada kotak untuk menyetujui persyaratan.

   

Mendapatkan kunci langganan untuk akun Anda

Setelah akun Azure Maps Anda berhasil dibuat, ambil kunci langganan yang memungkinkan Anda mengkueri API Maps.

1. Buka akun Maps Anda di portal.
2. Di bagian pengaturan, pilih Autentikasi.
3. Salin Kunci Primer dan simpan secara lokal untuk digunakan nanti dalam tutorial ini.

Mengunduh dan memperbarui demo Azure Maps

1. Salin konten file: Interactive Search Quickstart.html.
2. Simpan konten file ini secara lokal sebagai AzureMapDemo.html. Buka file tersebut di editor teks.
3. Tambahkan nilai Kunci Primer yang Anda dapatkan di bagian sebelumnya
   1. Komentari semua kode dalam authOptions fungsi, kode ini digunakan untuk autentikasi Microsoft Entra.
   2. Batalkan komentar dua baris terakhir dalam fungsi authOptions, kode ini digunakan untuk autentikasi Kunci Bersama, pendekatan yang digunakan dalam mulai cepat ini.
   3. Ganti <Your Azure Maps Key> dengan nilai kunci langganan dari bagian sebelumnya.

Buka aplikasi demo

1. Buka file AzureMapDemo.html di browser pilihan Anda.

2. Amati peta yang ditunjukkan dari Kota Los Angeles. Perbesar dan perkecil untuk melihat bagaimana peta secara otomatis dirender dengan informasi yang lebih atau kurang bergantung pada tingkat perbesar tampilan.

3. Mengubah pusat default peta. Dalam file AzureMapDemo.html, cari variabel bernama pusat. Ganti nilai pasangan garis bujur, garis lintang untuk variabel ini dengan nilai baru [-74.0060, 40.7128]. Simpan file dan refresh browser Anda.

4. Cobalah pengalaman pencarian interaktif. Dalam kotak pencarian di sudut kiri atas aplikasi web demo, cari restoran.

5. Arahkan mouse Anda di atas daftar alamat dan lokasi yang muncul di bawah kotak pencarian. Perhatikan bagaimana sematan yang sesuai pada peta memunculkan informasi tentang lokasi tersebut. Untuk privasi bisnis swasta, nama fiktif, dan alamat akan ditampilkan.

   

Membersihkan sumber daya

Jika Anda tidak ingin melanjutkan ke tutorial, lakukan langkah-langkah ini untuk menghapus sumber daya:

1. Tutup browser yang menjalankan aplikasi web AzureMapDemo.html.
2. Arahkan ke portal Microsoft Azure. Pilih Semua sumber daya dari halaman portal utama, atau pilih ikon menu di sudut kiri atas lalu Semua sumber daya.
3. Pilih akun Azure Maps Anda, lalu pilih Hapus di bagian atas halaman.

Untuk contoh kode lainnya dan pengalaman pengkodean interaktif, lihat panduan berikut:

• Menemukan alamat dengan layanan pencarian Azure Maps
• Menggunakan Kontrol Peta Azure Maps

Langkah berikutnya

Dalam mulai cepat ini, Anda membuat akun Azure Maps dan aplikasi demo. Lihat tutorial berikut ini untuk mempelajari selengkapnya tentang Azure Maps: