Mulai cepat: Membuat peta pencarian interaktif dengan Azure Maps

  • Artikel

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

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

Mulai cepat ini menggunakan Web SDK Azure Maps. Namun, layanan Azure Maps dapat digunakan dengan kontrol peta, seperti kontrol peta sumber terbuka populer ini yang plugin-nya telah dibuat oleh tim Azure Maps.

Prasyarat

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.

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

Mendapatkan kunci langganan untuk akun Anda

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

  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.

Screenshot showing your Azure Maps subscription key in the Azure portal.

Catatan

Mulai cepat ini menggunakan pendekatan autentikasi Kunci Bersama untuk tujuan demonstrasi, tetapi pendekatan yang disukai untuk lingkungan produksi apa pun adalah menggunakan autentikasi [MICROSOFT Entra ID].

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.

    Screenshot showing the interactive map search web application.

Membersihkan sumber daya

Penting

Tutorial yang tercantum di bagian Langkah Berikutnya memerinci cara menggunakan dan mengonfigurasi Azure Maps dengan akun Anda. Jangan hapus sumber daya yang dibuat dalam mulai cepat ini jika Anda ingin melanjutkan ke tutorial.

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. Buka 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:

Langkah berikutnya

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

Cari tempat menarik di sekitar dengan Azure Maps