Azure Haritalar Android SDK geçiş kılavuzu

Makale
04/07/2024

Azure Haritalar Android SDK'sından WebView'da Web SDK'sına geçiş yapmak için, Azure Haritalar Web SDK'sını kullanarak mevcut harita görünümünüzü yerel bir uygulamadan web tabanlı bir haritaya geçirmeniz gerekir. Bu kılavuz, kodunuzu ve özelliklerinizi Android SDK'dan Web SDK'sına nasıl geçireceğini gösterir.

Not

Android SDK'sı kullanımdan kaldırılmasını Azure Haritalar

Android için Azure Haritalar Yerel SDK artık kullanım dışıdır ve 31/3/25 tarihinde kullanımdan kaldırılacaktır. Hizmet kesintilerini önlemek için 31.03.25'e kadar Azure Haritalar Web SDK'sına geçin.

Önkoşullar

Web sayfasında Harita Denetimi'ni kullanmak için aşağıdaki önkoşullardan birine sahip olmanız gerekir:

bir Azure Haritalar hesabı.
Abonelik anahtarı veya Microsoft Entra kimlik bilgileri. Daha fazla bilgi için bkz . kimlik doğrulama seçenekleri.

WebView oluşturma

Android uygulamanızda web görünümü yoksa bir WebView ekleyin. Bunu yapmak için öğesini düzen XML'inize veya Java kodunuzda program aracılığıyla ekleyin WebView . Düzeninizin istenen alanını kaplar şekilde yapılandırıldığından emin olun.

<?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 izinler ekleyerek İnternet erişimini etkinleştirin.

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

Etkinliğinizde veya parçanızda, ayarları güncelleştirerek JavaScript'i başlatın WebView ve etkinleştirin. Web SDK kodunu içeren HTML dosyasını yükleyin. Bunu assets klasöründen veya uzak bir URL'den yükleyebilirsiniz.

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 Haritalar Web SDK'sı ile harita ayarlama

HTML dosyanızda abonelik anahtarınız ile bir harita başlatın. değerini gerçek anahtarınız ile değiştirin <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>

Uygulamayı kaydedin ve çalıştırın. WebView içinde bir harita görüntülenir. Web SDK'sından gerekli özellikleri veya işlevleri ekleyin. Daha fazla bilgi için bkz. Azure Haritalar Belgeleri ve Azure Haritalar Örnekleri.

WebView'daki bir haritanın ekran görüntüsü.

Yerel kod ile WebView arasındaki iletişim (isteğe bağlı)

Android uygulamanızla WebView arasında iletişimi etkinleştirmek için WebView'un yöntemini kullanarak WebView'da addJavascriptInterface çalışan JavaScript'e bir Java nesnesi gösterebilirsiniz. JavaScript kodunuzdan Java yöntemlerini çağırmanıza olanak tanır. Daha fazla bilgi için Android belgelerindeki WebView'a bakın.

Yerel Harita Uygulamasını Temizleme

Bağımlılıklar ve ile ilgili başlatma kodu dahil olmak üzere yerel Azure Haritalar Android SDK'sı com.azure.android:azure-maps-controlile ilgili kodu kaldırın.

Test Etme

Geçişin başarılı olduğundan emin olmak için uygulamanızı kapsamlı bir şekilde test edin. Eşleme işlevselliği, kullanıcı etkileşimleri ve performansla ilgili sorunları denetleyin.

Sonraki adımlar

Azure Haritalar'da Harita Denetimi istemci tarafı JavaScript kitaplığını kullanarak web ve mobil uygulamalara haritalar eklemeyi öğrenin:

Azure Haritalar eşleme denetimini kullanma

Aracılığıyla paylaş