Az Azure Maps iOS SDK migrálási útmutatója

2025-04-16

Az Azure Maps iOS SDK-ból a WebView webes SDK-jába való migrálás magában foglalja a meglévő térképnézet natív implementációról webes térképre való átváltását az Azure Maps Web SDK használatával. Ez az útmutató bemutatja, hogyan migrálhatja a kódot és a funkciókat az iOS SDK-ból a webes SDK-ba.

Megjegyzés:

Az Azure Maps iOS SDK kivonása

Az iOS-hez készült Azure Maps Natív SDK már ki van állítva, és már nem támogatott. Use this guide to migrate to the Azure Maps Web SDK.

Előfeltételek

To use the Map Control in a web page, you must have one of the following prerequisites:

An Azure Maps account.
A subscription key or Microsoft Entra credentials. További információkért lásd a hitelesítési beállításokat.

Create a WebView

WebView hozzáadása, ha az iOS-alkalmazás nem rendelkezik ilyenrel. Ehhez adja hozzá a WKWebView forgatókönyvhöz, vagy tegye meg programkódon keresztül Swift-ben. Győződjön meg róla, hogy úgy van beállítva, hogy elfoglalja a kívánt területet az elrendezésében.

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

Állítson be egy térképet az Azure Maps Web SDK-val.

A HTML fájlban inicializáljon egy térképet az előfizetői kulcsával. Cserélje ki a <YOUR_SUBSCRIPTION_KEY> tényleges kulccsal.

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

Mentse el és futtassa az alkalmazást Egy térképnek a WebView-on belül kell megjelennie. Adjon hozzá bármilyen funkciót, amelyet használni szeretne a webes SDK-ból. További használati esetekért tekintse meg az Azure Maps dokumentációját és az Azure Maps-mintákat .

Egy térkép képernyőképe egy WebView-ben.

Kommunikáció a natív kód és a WebView között (opcionális)

Az iOS-alkalmazás és a WebView közötti kommunikáció engedélyezéséhez használhatja az WKScriptMessageHandler osztály által biztosított protokollt WKWebView . Lehetővé teszi, hogy hidat hozzon létre a WebView-ban futó JavaScript és a Swift-kód közötti kommunikációhoz. További információ: WKScriptMessageHandler az iOS WebKit dokumentációjában.

Alakítsd át a natív térkép megvalósítását

Távolítsa el a natív Azure Maps iOS SDK-val kapcsolatos kódot a projektből, beleértve a kapcsolódó függőségeket és inicializálási kódot azure-maps-ios-sdk-distribution.

Tesztelés

Tesztelje alaposan az alkalmazást, hogy meggyőződjön arról, hogy a migrálás sikeres volt. Check for issues related to map functionality, user interactions, and performance.

Következő lépések

Ismerje meg, hogyan adhat hozzá térképeket webes és mobilalkalmazásokhoz az Azure Maps Map Control kliensoldali JavaScript könyvtárának segítségével.

Használja az Azure Maps térképvezérlőt