Megosztás a következőn keresztül:

Az Azure Térképek Android SDK migrálási útmutatója

  • Cikk

Az Azure Térképek Android SDK-ból a WebView webes SDK-ba való migrálása magában foglalja a meglévő térképnézet natív implementációról webes térképre való átváltását az Azure Térképek Webes SDK használatával. Ez az útmutató bemutatja, hogyan migrálhatja a kódot és a funkciókat az Android SDK-ból a webes SDK-ba.

Feljegyzés

Az Azure Térképek Android SDK kivonása

Az Androidhoz készült Azure Térképek Natív SDK elavult, és 25.31-én megszűnik. A szolgáltatáskimaradások elkerülése érdekében 25.31-ig migráljon az Azure Térképek Web SDK-ba.

Előfeltételek

A Térképvezérlő weblapon való használatához az alábbi előfeltételek egyikével kell rendelkeznie:

WebView létrehozása

WebView hozzáadása, ha az Android-alkalmazás nem rendelkezik ilyenrel. Ehhez adja hozzá az elemet az WebView elrendezés XML-fájljához, vagy programozott módon a Java-kódban. Győződjön meg arról, hogy úgy van beállítva, hogy elfoglalja az elrendezés kívánt területét.

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

Az internet-hozzáférés engedélyezéséhez adjon hozzá engedélyeket AndroidManifest.xml.

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

A tevékenységben vagy a töredékben inicializálja és engedélyezze a WebView JavaScriptet a beállítások frissítésével. Töltse be a webes SDK-kódot tartalmazó HTML-fájlt. Betöltheti az eszközök mappájából vagy egy távoli URL-címről.

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

Térkép beállítása az Azure Térképek Web SDK-val

A HTML-fájlban inicializáljon egy térképet az előfizetési kulccsal. Cserélje le <YOUR_SUBSCRIPTION_KEY> a tényleges kulcsra.

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

Mentse és futtassa az alkalmazást. Megjelenik egy térkép a WebView-on belül. Adjon hozzá minden szükséges funkciót vagy funkciót a webes SDK-ból. További információt az Azure Térképek dokumentációjában és az Azure Térképek-mintákban talál.

Képernyőkép egy térképről a WebView-ban.

Kommunikáció a natív kód és a WebView között (nem kötelező)

Az Android-alkalmazás és a WebView közötti kommunikáció engedélyezéséhez a WebView metódusával addJavascriptInterface közzétehet egy Java-objektumot a WebView-ban futó JavaScript számára. Lehetővé teszi Java-metódusok meghívását a JavaScript-kódból. További információ: WebView az Android dokumentációjában.

Natív térkép implementálásának törlése

Távolítsa el a natív Azure Térképek Android SDK-val kapcsolatos kódot, beleértve a függőségeket és a kapcsolódó com.azure.android:azure-maps-controlinicializálási kódot.

Tesztelés

Alaposan tesztelje az alkalmazást, hogy meggyőződjön arról, hogy a migrálás sikeres volt. Ellenőrizze a térkép funkcióval, a felhasználói interakciókkal és a teljesítménnyel kapcsolatos problémákat.

Következő lépések

Ismerje meg, hogyan vehet fel térképeket webes és mobilalkalmazásokhoz a Térképvezérlés ügyféloldali JavaScript-kódtár használatával az Azure Térképek:

Az Azure Térképek térképvezérlő használata