Compartir a través de

Guía de migración del SDK de iOS de Azure Maps

La migración desde el SDK de iOS de Azure Maps al SDK web en una vista web implica la transición de la vista de mapa existente desde una implementación nativa a un mapa basado en web mediante el SDK web de Azure Maps. En esta guía se muestra cómo migrar el código y las características del SDK de iOS al SDK web.

Nota:

Retirada del SDK de Azure Maps para iOS

El SDK nativo de Azure Maps para iOS ahora se retira y ya no se admite. Use esta guía para migrar al SDK web de Azure Maps.

Prerrequisitos

Para usar el control de mapa en una página web, debe cumplir uno de los siguientes requisitos previos:

Creación de una vista web

Agregue una vista web si la aplicación de iOS no tiene ninguna. Puede hacerlo agregando WKWebView al guión gráfico o mediante programación en el código Swift. Asegúrese de que está configurado para ocupar el área deseada del diseño.

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

Configuración de un mapa con el SDK web de Azure Maps

En el archivo HTML, inicialice un mapa con su clave de suscripción. Reemplace <YOUR_SUBSCRIPTION_KEY> por la clave real.

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

Guarde y ejecute la aplicación. Se debe mostrar un mapa dentro de un objeto WebView. Agregue las características o funcionalidades que quiera usar desde el SDK web. Puede consultar la documentación de Azure Maps y los ejemplos de Azure Maps para obtener más casos de uso.

Captura de pantalla de un mapa en una vista web.

Comunicación entre código nativo y WebView (opcional)

Para habilitar la comunicación entre la aplicación iOS y WebView, puede usar el WKScriptMessageHandler protocolo proporcionado por la WKWebView clase . Permite establecer un puente para la comunicación entre JavaScript que se ejecuta en WebView y el código Swift. Para obtener más información, consulte WKScriptMessageHandler en la documentación de WebKit de iOS.

Limpieza de una implementación de mapas nativos

Quite el código relacionado con el SDK nativo de iOS de Azure Maps del proyecto, incluidas las dependencias y el código de inicialización relacionados con azure-maps-ios-sdk-distribution.

Ensayo

Pruebe la aplicación exhaustivamente para asegurarse de que la migración se realizó correctamente. Compruebe si hay problemas relacionados con la funcionalidad del mapa, las interacciones del usuario y el rendimiento.

Pasos siguientes

Obtenga información sobre cómo agregar mapas a aplicaciones web y móviles mediante la biblioteca de JavaScript del lado cliente de Map Control en Azure Maps:

Uso del control de mapa Azure Maps