Azure Haritalar iOS SDK geçiş kılavuzu

2025-04-16

Bir WebView'da Azure Haritalar iOS SDK'sından Web SDK'sına geçiş yapmak için, Azure Haritalar Web SDK'sını kullanarak mevcut harita görünümünüzü yerel bir uygulamadan web tabanlı bir haritaya geçirmeniz gerekir. Bu kılavuzda, kodunuzu ve özelliklerinizi iOS SDK'dan Web SDK'sına nasıl geçirebilirsiniz?

Uyarı

Azure Haritalar iOS SDK'sı kullanımdan kaldırılıyor

iOS için Azure Haritalar Yerel SDK'sı artık kullanımdan kaldırıldı ve artık desteklenmiyor. Azure Haritalar Web SDK'sına geçiş yapmak için bu kılavuzu kullanın.

Önkoşullar

Web sayfasında Harita Denetimi'ni kullanmak için aşağıdaki önkoşullardan birine sahip olmanız gerekir:

Azure Haritalar hesabı.
Abonelik anahtarı veya Microsoft Entra kimlik bilgileri. Daha fazla bilgi için bkz . kimlik doğrulama seçenekleri.

WebView oluşturma

iOS uygulamanızda yoksa WebView ekleyin. Görsel şeridinize WKWebView ekleyerek veya Swift kodunuzda programatik olarak yaparak bunu gerçekleştirin. Düzeninizin istenen alanını kaplar şekilde yapılandırıldığından emin olun.

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 Haritalar Web SDK'sı ile harita ayarlama

Abonelik anahtarınızı kullanarak HTML dosyanızda bir harita başlatın. <YOUR_SUBSCRIPTION_KEY> öğesini gerçek anahtarınız ile değiştirin.

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

Uygulamayı kaydedin ve çalıştırın. WebView içinde bir harita gösterilmelidir. Web SDK'sından kullanmak istediğiniz özellikleri veya işlevleri ekleyin. Daha fazla kullanım örneği için Azure Haritalar Belgeleri'ne ve Azure Haritalar Örnekleri'ne bakabilirsiniz.

WebView'daki bir haritanın ekran görüntüsü.

Yerel kod ile WebView arasındaki iletişim (isteğe bağlı)

iOS uygulamanız ile WebView arasında iletişimi etkinleştirmek için WKWebView sınıfı tarafından sağlanan WKScriptMessageHandler protokolünü kullanabilirsiniz. WebView'da çalışan JavaScript ile Swift kodunuz arasında iletişim için bir köprü oluşturmanıza olanak tanır. Daha fazla bilgi için iOS WebKit belgelerindeki WKScriptMessageHandler'a bakın.

Yerel Harita Uygulamasını Temizleme

ile ilgili bağımlılıklar ve başlatma kodu dahil olmak üzere yerel Azure Haritalar iOS SDK'sı ile ilgili azure-maps-ios-sdk-distributionkodu projenizden kaldırın.

Test aşaması

Geçişin başarılı olduğundan emin olmak için uygulamanızı kapsamlı bir şekilde test edin. Eşleme işlevselliği, kullanıcı etkileşimleri ve performansla ilgili sorunları denetleyin.

Sonraki adımlar

Azure Haritalar'da Harita Denetimi istemci tarafı JavaScript kitaplığını kullanarak web ve mobil uygulamalara haritalar eklemeyi öğrenin:

Azure Haritalar harita denetimini kullanma

Aracılığıyla paylaş