Azure Maps iOS SDK에서 WebView의 웹 SDK로 마이그레이션하려면 Azure Maps 웹 SDK를 사용하여 기존 맵 보기를 네이티브 구현에서 웹 기반 맵으로 전환해야 합니다. 이 가이드에서는 iOS SDK에서 웹 SDK로 코드 및 기능을 마이그레이션하는 방법을 보여 줍니다.
비고
Azure Maps iOS SDK 사용 중지
이제 iOS용 Azure Maps 네이티브 SDK가 사용 중지되고 더 이상 지원되지 않습니다. 이 가이드를 사용하여 Azure Maps 웹 SDK로 마이그레이션합니다.
필수 조건
웹 페이지에서 맵 컨트롤을 사용하려면 다음 필수 조건 중 하나가 있어야 합니다.
- Azure Maps 계정.
- 구독 키 또는 Microsoft Entra 자격 증명 자세한 내용은 인증 옵션을 참조하세요.
WebView 만들기
iOS 애플리케이션에 WebView가 없는 경우 WebView를 추가합니다. 스토리보드에 WKWebView 추가하거나 Swift 코드에 프로그래밍 방식으로 추가하면 됩니다. 레이아웃의 원하는 영역을 차지하도록 구성되었는지 확인합니다.
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// Create WKWebView instance
webView = WKWebView(frame: view.bounds)
webView.navigationDelegate = self
view.addSubview(webView)
// Load local HTML file
loadLocalHTMLFile()
}
func loadLocalHTMLFile() {
if let htmlPath = Bundle.main.path(forResource: "map", ofType: "html") {
do {
let htmlString = try String(contentsOfFile: htmlPath, encoding: .utf8)
webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
} catch {
print("Error loading HTML file: \(error)")
}
} else {
print("HTML file not found.")
}
}
}
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 간의 통신(선택 사항)
iOS 애플리케이션과 WebView 간의 통신을 사용하도록 설정하려면 클래스에서 WKScriptMessageHandler 제공하는 프로토콜을 WKWebView 사용할 수 있습니다. WebView에서 실행되는 JavaScript와 Swift 코드 간의 통신을 위한 브리지를 설정할 수 있습니다. 자세한 내용은 iOS WebKit 설명서의 WKScriptMessageHandler 를 참조하세요.
네이티브 맵 구현 정리
종속성 및 관련된 초기화 코드를 포함하여 프로젝트에서 네이티브 Azure Maps iOS SDK와 관련된 코드를 제거합니다 azure-maps-ios-sdk-distribution.
테스팅
애플리케이션을 철저히 테스트하여 마이그레이션에 성공했는지 확인합니다. 지도 기능, 사용자 상호 작용 및 성능과 관련된 문제를 확인합니다.
다음 단계
Azure Maps에서 Map Control 클라이언트 쪽 JavaScript 라이브러리를 사용하여 웹 및 모바일 애플리케이션에 지도를 추가하는 방법을 알아봅니다.