Guida alla migrazione di Android SDK Mappe di Azure

Articolo
04/07/2024

La migrazione dalla Mappe di Azure Android SDK all'SDK Web in un WebView comporta la transizione della visualizzazione mappa esistente da un'implementazione nativa a una mappa basata sul Web usando l'SDK Web Mappe di Azure. Questa guida illustra come eseguire la migrazione del codice e delle funzionalità da Android SDK all'SDK Web.

Nota

ritiro di Android SDK Mappe di Azure

Il Mappe di Azure Native SDK per Android è ora deprecato e verrà ritirato il 3/31/25. Per evitare interruzioni del servizio, eseguire la migrazione all'SDK Web di Mappe di Azure entro il 3/31/25.

Prerequisiti

Per usare il controllo mappa in una pagina Web, è necessario disporre di uno dei prerequisiti seguenti:

Un account Mappe di Azure.
Una chiave di sottoscrizione o le credenziali di Microsoft Entra. Per altre informazioni, vedere Opzioni di autenticazione.

Creare un controllo WebView

Aggiungere un controllo WebView se l'applicazione Android non ne ha una. A tale scopo, aggiungere l'elemento WebView al codice XML di layout o a livello di codice nel codice Java. Assicurarsi che sia configurato per occupare l'area desiderata del layout.

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

Abilitare l'accesso a Internet aggiungendo autorizzazioni in AndroidManifest.xml.

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

Nell'attività WebView o nel frammento inizializzare e abilitare JavaScript aggiornando le impostazioni. Caricare il file HTML che contiene il codice Web SDK. È possibile caricarlo dalla cartella assets o da un URL remoto.

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

Configurare una mappa con Mappe di Azure Web SDK

Nel file HTML inizializzare una mappa con la chiave di sottoscrizione. Sostituire <YOUR_SUBSCRIPTION_KEY> con la chiave effettiva.

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

Salvare ed eseguire l'app. Una mappa verrà visualizzata all'interno di un controllo WebView. Aggiungere funzionalità o funzionalità necessarie dall'SDK Web. Per altre informazioni, vedere documentazione Mappe di Azure ed esempi di Mappe di Azure.

Screenshot di una mappa in un controllo WebView.

Comunicazione tra codice nativo e WebView (facoltativo)

Per abilitare la comunicazione tra l'applicazione Android e WebView, è possibile usare il metodo di addJavascriptInterface WebView per esporre un oggetto Java a JavaScript in esecuzione in WebView. Consente di chiamare metodi Java dal codice JavaScript. Per altre informazioni, vedere WebView nella documentazione di Android.

Eseguire la pulizia dell'implementazione della mappa nativa

Rimuovere il codice correlato al Mappe di Azure android SDK nativo, incluse le dipendenze e il codice di inizializzazione correlati a com.azure.android:azure-maps-control.

Test in corso

Testare accuratamente l'applicazione per assicurarsi che la migrazione sia stata completata correttamente. Verificare la presenza di problemi relativi alla funzionalità di mapping, alle interazioni dell'utente e alle prestazioni.

Passaggi successivi

Informazioni su come aggiungere mappe alle applicazioni Web e per dispositivi mobili usando la libreria JavaScript sul lato client di Map Control in Mappe di Azure:

Usare il controllo mappa Mappe di Azure

Condividi tramite