Azure Maps Android SDK에서 WebView의 웹 SDK로 마이그레이션하려면 Azure Maps 웹 SDK를 사용하여 기존 맵 보기를 네이티브 구현에서 웹 기반 맵으로 전환해야 합니다. 이 가이드에서는 Android SDK에서 웹 SDK로 코드 및 기능을 마이그레이션하는 방법을 보여 줍니다.
비고
Azure Maps Android SDK 사용 중지
이제 Android용 Azure Maps 네이티브 SDK가 사용 중지되고 더 이상 지원되지 않습니다. 이 가이드를 사용하여 Azure Maps 웹 SDK로 마이그레이션합니다.
필수 조건
웹 페이지에서 맵 컨트롤을 사용하려면 다음 필수 조건 중 하나가 있어야 합니다.
- Azure Maps 계정.
- 구독 키 또는 Microsoft Entra 자격 증명 자세한 내용은 인증 옵션을 참조하세요.
WebView 만들기
Android 애플리케이션에 WebView가 없다면, 하나를 추가하세요. 레이아웃 XML에 WebView 요소를 추가하거나 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를 사용하도록 설정합니다. 웹 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 간의 통신(선택 사항)
Android 애플리케이션과 WebView 간의 통신을 사용하도록 설정하려면 WebView의 addJavascriptInterface 메서드를 사용하여 WebView에서 실행되는 JavaScript에 Java 개체를 노출할 수 있습니다. JavaScript 코드에서 Java 메서드를 호출할 수 있습니다. 자세한 내용은 Android 설명서의 WebView 를 참조하세요.
네이티브 맵 구현 정리
관련된 종속성 및 초기화 코드를 포함하여 네이티브 Azure Maps Android SDK와 관련된 코드를 제거합니다 com.azure.android:azure-maps-control.
테스팅
애플리케이션을 철저히 테스트하여 마이그레이션에 성공했는지 확인합니다. 지도 기능, 사용자 상호 작용 및 성능과 관련된 문제를 확인합니다.
다음 단계
Azure Maps에서 Map Control 클라이언트 쪽 JavaScript 라이브러리를 사용하여 웹 및 모바일 애플리케이션에 지도를 추가하는 방법을 알아봅니다.