Azure Maps Android SDK 마이그레이션 가이드

Azure Maps Android SDK에서 WebView의 웹 SDK로 마이그레이션하려면 Azure Maps 웹 SDK를 사용하여 기존 맵 보기를 네이티브 구현에서 웹 기반 맵으로 전환해야 합니다. 이 가이드에서는 Android SDK에서 웹 SDK로 코드와 기능을 마이그레이션하는 방법을 보여 줍니다.

참고 항목

Azure Maps Android SDK 사용 중지

이제 Android용 Azure Maps 네이티브 SDK는 더 이상 사용되지 않으며 2025년 3월 31일에 사용 중지됩니다. 서비스 중단을 방지하려면 2025년 3월 31일까지 Azure Maps Web SDK로 마이그레이션합니다.

필수 조건

웹 페이지에서 맵 컨트롤을 사용하려면 다음 필수 조건 중 하나가 있어야 합니다.

WebView 만들기

Android 애플리케이션에 WebView가 없는 경우 WebView를 추가합니다. 레이아웃 XML에 또는 Java 코드에서 프로그래밍 방식으로 WebView 요소를 추가하면 됩니다. 레이아웃의 원하는 영역을 차지하도록 구성되었는지 확인합니다.

<?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를 사용하도록 설정합니다. 웹 SDK 코드가 포함된 HTML 파일을 로드합니다. 자산 폴더나 원격 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 Maps 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 내에 맵이 나타납니다. 웹 SDK에서 필요한 기능을 추가합니다. 자세한 내용은 Azure Maps 설명서Azure Maps 샘플을 참조하세요.

WebView의 맵 스크린샷.

네이티브 코드와 WebView 간의 통신(선택 사항)

Android 애플리케이션과 WebView 간의 통신을 사용하도록 설정하려면 WebView의 addJavascriptInterface 메서드를 사용하여 WebView에서 실행되는 JavaScript에 Java 개체를 노출할 수 있습니다. 이를 통해 JavaScript 코드에서 Java 메서드를 호출할 수 있습니다. 자세한 내용은 Android 설명서의 WebView를 참조하세요.

네이티브 맵 구현 정리

com.azure.android:azure-maps-control과 관련된 종속성 및 초기화 코드를 포함하여 네이티브 Azure Maps Android SDK와 관련된 코드를 제거합니다.

테스팅

애플리케이션을 철저히 테스트하여 마이그레이션이 성공했는지 확인합니다. 맵 기능, 사용자 상호 작용, 성능과 관련된 문제를 확인합니다.

다음 단계

Azure Maps에서 맵 컨트롤 클라이언트 측 JavaScript 라이브러리를 사용하여 웹 및 모바일 애플리케이션에 맵을 추가하는 방법에 대해 알아봅니다.