Panduan migrasi Android SDK Azure Maps

2025-04-16

Migrasi dari Azure Maps Android SDK ke Web SDK di WebView melibatkan transisi tampilan peta yang ada dari implementasi asli ke peta berbasis web menggunakan Azure Maps Web SDK. Panduan ini menunjukkan cara memigrasikan kode dan fitur Anda dari Android SDK ke Web SDK.

Nota

Penghentian Android SDK Azure Maps

Azure Maps Native SDK untuk Android sekarang dihentikan dan tidak lagi didukung. Gunakan panduan ini untuk bermigrasi ke Azure Maps Web SDK.

Prasyarat

Untuk menggunakan Kontrol Peta di halaman web, Anda harus memiliki salah satu prasyarat berikut ini:

Akun Azure Maps.
Kunci langganan atau kredensial Microsoft Entra. Untuk informasi selengkapnya, lihat opsi autentikasi.

Membuat WebView

Tambahkan WebView jika aplikasi Android Anda tidak memilikinya. Lakukan dengan menambahkan elemen ke WebView XML tata letak Anda atau secara terprogram dalam kode Java Anda. Pastikan itu dikonfigurasi untuk menempati area yang diinginkan dalam tata letak Anda.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Aktifkan akses internet dengan menambahkan izin di AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />

Dalam aktivitas atau fragmen Anda, inisialisasi WebView dan aktifkan JavaScript dengan memperbarui pengaturan. Muat file HTML yang berisi kode Web SDK. Anda dapat memuatnya dari folder aset atau dari URL jarak jauh.

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);

        // Enable JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // Load local HTML file from /src/main/assets/map.html
        webView.loadUrl("file:///android_asset/map.html");
    }
}

Menyiapkan peta dengan Azure Maps Web SDK

Dalam file HTML Anda, inisialisasi peta dengan kunci langganan Anda. Ganti <YOUR_SUBSCRIPTION_KEY> dengan kunci Anda yang sebenarnya.

<!DOCTYPE html>
<html>
   <head>
       <title>Azure Maps</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <!-- 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>
       <style>
           html,
           body,
           #map {
               margin: 0;
               height: 100%;
               width: 100%;
           }
           body {
               display: flex;
               flex-direction: column;
           }
           main {
               flex: 1 1 auto;
           }
       </style>
       <script type="text/javascript">
           // Create an instance of the map control.
           function InitMap() {
               var map = new atlas.Map("map", {
                   center: [-122.33, 47.6],
                   zoom: 12,
                   authOptions: {
                       authType: "subscriptionKey",
                       subscriptionKey: "<YOUR_SUBSCRIPTION_KEY>"
                   }
               });

               // Wait until the map resources are ready.
               map.events.add("ready", function () {
                   // Resize the map to fill the container.
                   map.resize();
               });
           }
       </script>
   </head>
   <body onload="InitMap()">
       <main>
           <div id="map"></div>
       </main>
   </body>
</html>

Simpan dan jalankan aplikasi. Peta akan muncul dalam WebView. Tambahkan fitur atau fungsionalitas yang diperlukan dari Web SDK. Untuk informasi selengkapnya, lihat Dokumentasi Azure Maps dan Sampel Azure Maps.

Cuplikan layar peta di WebView.

Komunikasi antara kode asli dan WebView (opsional)

Untuk mengaktifkan komunikasi antara aplikasi Android dan WebView, Anda dapat menggunakan metode WebView addJavascriptInterface untuk mengekspos objek Java ke JavaScript yang berjalan di WebView. Ini memungkinkan Anda untuk memanggil metode Java dari kode JavaScript Anda. Untuk informasi selengkapnya, lihat WebView di dokumentasi Android.

Membersihkan Implementasi Peta Asli

Hapus kode yang terkait dengan Azure Maps Android SDK asli, termasuk dependensi dan kode inisialisasi yang terkait dengan com.azure.android:azure-maps-control.

Uji coba

Uji aplikasi Anda secara menyeluruh untuk memastikan migrasi berhasil. Periksa masalah yang terkait dengan fungsionalitas peta, interaksi pengguna, dan performa.

Langkah selanjutnya

Pelajari cara menambahkan peta ke aplikasi web dan seluler menggunakan pustaka JavaScript sisi klien Kontrol Peta di Azure Maps:

Menggunakan kontrol peta Azure Maps

Bagikan melalui