Panduan migrasi Azure Peta Android SDK

Artikel
04/07/2024

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

Catatan

Penghentian Azure Peta Android SDK

Azure Peta Native SDK untuk Android sekarang tidak digunakan lagi dan akan dihentikan pada 31/3/25. Untuk menghindari gangguan layanan, migrasikan ke Azure Peta Web SDK dengan 3/31/25.

Prasyarat

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

Sebuah 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 dikonfigurasi untuk menempati area tata letak yang diinginkan.

<?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 dan aktifkan WebView 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 Peta 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 Peta dan Sampel Azure Peta.

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 Peta Android SDK asli, termasuk dependensi dan kode inisialisasi yang terkait dengan com.azure.android:azure-maps-control.

Pengujian

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

Langkah berikutnya

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

Menggunakan kontrol peta Azure Peta

Bagikan melalui