Freigeben über

Das Azure Maps iOS SDK-Migrationshandbuch

Die Migration vom Azure Maps iOS SDK zum Web SDK in einem WebView umfasst den Übergang Ihrer vorhandenen Kartenansicht von einer nativen Implementierung zu einer webbasierten Karte mithilfe des Azure Maps Web SDK. In diesem Handbuch erfahren Sie, wie Sie Ihren Code und Ihre Features aus dem iOS-SDK zum Web SDK migrieren.

Hinweis

Ausmusterung des Azure Maps iOS SDK

Das Native SDK für Azure Maps für iOS wird jetzt eingestellt und wird nicht mehr unterstützt. Verwenden Sie dieses Handbuch, um zum Azure Maps Web SDK zu migrieren.

Voraussetzungen

Zur Verwendung des Kartensteuerelements auf einer Webseite müssen Sie eine der folgenden Voraussetzungen erfüllen:

Erstellen eines WebView

Fügen Sie ein WebView hinzu, wenn Ihre iOS-Anwendung über keines verfügt. Fügen Sie dazu WKWebView zu Ihrem Storyboard hinzu oder fügen Sie es programmgesteuert in Ihrem Swift-Code ein. Stellen Sie sicher, dass sie so konfiguriert ist, dass sie den gewünschten Bereich Ihres Layouts einnimmt.

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.")
        }
    }
}

Einrichten einer Karte mit dem Azure Maps Web SDK

Initialisieren Sie in Ihrer HTML-Datei eine Karte mit Ihrem Abonnementschlüssel. Ersetzen Sie <YOUR_SUBSCRIPTION_KEY> durch Ihren tatsächlichen Schlüssel.

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

Speichern sie die App, und führen Sie sie aus. Eine Karte sollte in einer WebView angezeigt werden. Fügen Sie alle Features oder Funktionen hinzu, die Sie aus dem Web SDK verwenden möchten. Weitere Anwendungsfälle finden Sie in der Azure Maps-Dokumentation und in den Azure Maps-Beispielen .

Screenshot einer Karte in einer WebView.

Kommunikation zwischen systemeigenem Code und WebView (optional)

Um die Kommunikation zwischen Ihrer iOS-Anwendung und dem WebView zu ermöglichen, können Sie das WKScriptMessageHandler von der WKWebView Klasse bereitgestellte Protokoll verwenden. Damit können Sie eine Brücke für die Kommunikation zwischen JavaScript einrichten, die in WebView und Ihrem Swift-Code ausgeführt wird. Weitere Informationen finden Sie in der iOS WebKit-Dokumentation unter WKScriptMessageHandler .

Bereinigen der nativen Kartenimplementierung

Entfernen Sie Code im Zusammenhang mit dem systemeigenen Azure Maps iOS SDK aus Ihrem Projekt, einschließlich Abhängigkeiten und Initialisierungscode im Zusammenhang mit azure-maps-ios-sdk-distribution.

Testen

Testen Sie Ihre Anwendung sorgfältig, um sicherzustellen, dass die Migration erfolgreich war. Suchen Sie nach Problemen in Bezug auf die Kartenfunktionalität, Benutzerinteraktionen und Leistung.

Nächste Schritte

Erfahren Sie, wie Sie mithilfe der clientseitigen JavaScript-Bibliothek Map Control in Azure Maps Karten zu Web- und mobilen Anwendungen hinzufügen.

Verwenden des Azure Maps-Kartensteuerelements