مشاركة عبر

دليل ترحيل خرائط Azure Android SDK

  • مقالة

يتضمن الترحيل من خرائط Azure Android SDK إلى Web SDK في WebView نقل طريقة عرض الخريطة الحالية من تطبيق أصلي إلى خريطة مستندة إلى الويب باستخدام خرائط Azure Web SDK. يوضح لك هذا الدليل كيفية ترحيل التعليمات البرمجية والميزات من Android SDK إلى Web SDK.

إشعار

خرائط Azure إيقاف Android SDK

تم الآن إهمال خرائط Azure Native SDK لنظام التشغيل Android وسيتم إيقافه في 3/31/25. لتجنب انقطاع الخدمة، قم بالترحيل إلى خرائط Azure Web SDK بحلول 3/31/25.

المتطلبات الأساسية

لاستخدام عنصر التحكم بالخريطة في صفحة الويب، يجب أن يكون لديك أحد المتطلبات الأساسية التالية:

إنشاء WebView

أضف WebView إذا لم يكن تطبيق Android الخاص بك يحتوي على تطبيق. قم بذلك عن طريق إضافة WebView العنصر إلى تخطيط XML أو برمجيا في التعليمات البرمجية ل Java. تأكد من تكوينه ليشغل المنطقة المطلوبة من التخطيط الخاص بك.

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

تمكين الوصول إلى الإنترنت عن طريق إضافة أذونات في AndroidManifest.xml.

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

في نشاطك أو جزء، قم بتهيئة WebView وتمكين JavaScript عن طريق تحديث الإعدادات. قم بتحميل ملف HTML الذي يحتوي على التعليمات البرمجية ل Web SDK. يمكنك إما تحميله من مجلد الأصول أو من عنوان 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");
    }
}

إعداد خريطة باستخدام خرائط Azure Web SDK

في ملف HTML، قم بتهيئة خريطة باستخدام مفتاح الاشتراك الخاص بك. استبدل <YOUR_SUBSCRIPTION_KEY> بالمفتاح الفعلي.

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

حفظ التطبيق وتشغيله. ستظهر خريطة داخل WebView. أضف أي ميزات أو وظائف مطلوبة من Web SDK. لمزيد من المعلومات، راجع وثائق خرائط Azure وعينات خرائط Azure.

لقطة شاشة لخريطة في WebView.

الاتصال بين التعليمات البرمجية الأصلية وWebView (اختياري)

لتمكين الاتصال بين تطبيق Android الخاص بك وWebView، يمكنك استخدام أسلوب WebView addJavascriptInterface لعرض كائن Java ل JavaScript قيد التشغيل في WebView. يسمح لك باستدعاء أساليب Java من التعليمات البرمجية ل JavaScript. لمزيد من المعلومات، راجع WebView في وثائق Android.

تنظيف تنفيذ الخريطة الأصلية

قم بإزالة التعليمات البرمجية المتعلقة خرائط Azure Android SDK الأصلية، بما في ذلك التبعيات ورمز التهيئة المتعلق ب com.azure.android:azure-maps-control.

الاختبار

اختبر تطبيقك بدقة للتأكد من نجاح الترحيل. تحقق من المشكلات المتعلقة بوظائف الخريطة وتفاعلات المستخدم والأداء.

الخطوات التالية

تعرف على كيفية إضافة خرائط إلى تطبيقات الويب والأجهزة المحمولة باستخدام مكتبة JavaScript من جانب العميل ل Map Control في خرائط Azure:

استخدام عنصر تحكم خريطة خرائط Azure