Aracılığıyla paylaş

Azure Haritalar Android SDK geçiş kılavuzu

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.

Uyarı

Azure Haritalar Android SDK kullanımdan kaldırılması

Android için Azure Haritalar Yerel SDK'sı artık kullanımdan kaldırıldı ve artık desteklenmiyor. Azure Haritalar Web SDK'sına geçiş yapmak için bu kılavuzu kullanın.

Önkoşullar

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

WebView oluşturma

Android uygulamanızda web görünümü yoksa bir WebView ekleyin. Bunu yapmak için WebView öğesini düzen XML'inize veya Java kodunuza programlı olarak ekleyin. 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.xmlizinlerini ekleyerek İnternet erişimini etkinleştirin.

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

Etkinliğinizde veya parçanızda, WebView öğesini başlatın ve JavaScript'i etkinleştirmek için ayarları güncelleyin. 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

Abonelik anahtarınızı kullanarak HTML dosyanızda bir harita başlatın. <YOUR_SUBSCRIPTION_KEY> öğesini gerçek anahtarınız ile değiştirin.

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

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

Test Yapma

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 harita denetimini kullanma