Průvodce migrací sady Azure Mapy Android SDK

Migrace ze sady Azure Mapy Android SDK na webovou sadu SDK ve webovém zobrazení zahrnuje přechod existujícího zobrazení mapy z nativní implementace na webovou mapu pomocí sady Azure Mapy Web SDK. V této příručce se dozvíte, jak migrovat kód a funkce ze sady Android SDK na webovou sadu SDK.

Poznámka:

Vyřazení sady Azure Mapy Android SDK

Sada Azure Mapy Native SDK pro Android je teď zastaralá a bude vyřazena 31. 31. 25. Pokud se chcete vyhnout přerušení služeb, proveďte migraci do sady Azure Mapy Web SDK do 31. 31. 25.

Požadavky

Pokud chcete použít ovládací prvek Mapování na webové stránce, musíte mít jednu z následujících požadavků:

  • Účet Azure Mapy.
  • Klíč předplatného nebo přihlašovací údaje Microsoft Entra. Další informace najdete v tématu Možnosti ověřování.

Vytvoření webového zobrazení

Pokud vaše aplikace pro Android nemá webView, přidejte ji. Uděláte to tak, že do kódu Java přidáte WebView element do xml rozložení nebo programově. Ujistěte se, že je nakonfigurovaná tak, aby zabírala požadovanou oblast vašeho rozložení.

<?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>

Povolte přístup k internetu přidáním oprávnění v AndroidManifest.xml.

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

V aktivitě nebo fragmentu WebView inicializujete a povolte JavaScript aktualizací nastavení. Načtěte soubor HTML, který obsahuje kód webové sady SDK. Můžete ho buď načíst ze složky prostředků, nebo ze vzdálené adresy URL.

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");
    }
}

Nastavení mapy pomocí sady Azure Mapy Web SDK

V souboru HTML inicializujete mapu pomocí klíče předplatného. Nahraďte <YOUR_SUBSCRIPTION_KEY> skutečným klíčem.

<!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>

Uložte a spusťte aplikaci. Mapa se zobrazí v rámci webového zobrazení. Přidejte všechny požadované funkce nebo funkce z webové sady SDK. Další informace najdete v dokumentaci k Azure Mapy a ukázkách azure Mapy.

Snímek obrazovky mapy ve webovém zobrazení

Komunikace mezi nativním kódem a WebView (volitelné)

Pokud chcete povolit komunikaci mezi vaší aplikací pro Android a WebView, můžete pomocí metody WebView addJavascriptInterface zveřejnit objekt Java pro JavaScript spuštěný ve webovém zobrazení. Umožňuje volat metody Java z kódu JavaScriptu. Další informace naleznete v tématu WebView v dokumentaci k Androidu.

Vyčištění nativní implementace mapování

Odeberte kód související s nativní sadou Azure Mapy Android SDK, včetně závislostí a inicializačního kódu souvisejících s com.azure.android:azure-maps-control.

Testování

Důkladně otestujte aplikaci, abyste měli jistotu, že migrace proběhla úspěšně. Zkontrolujte problémy související s funkcemi mapování, interakcemi uživatelů a výkonem.

Další kroky

Naučte se přidávat mapy do webových a mobilních aplikací pomocí javascriptové knihovny Map Control na straně klienta v Azure Mapy: