Panduan migrasi Azure Peta iOS SDK

Artikel
04/07/2024

Migrasi dari Azure Peta iOS SDK ke Web SDK di WebView melibatkan transisi tampilan peta yang ada dari implementasi asli ke peta berbasis web menggunakan Azure Peta Web SDK. Panduan ini menunjukkan kepada Anda cara memigrasikan kode dan fitur anda dari iOS SDK ke Web SDK.

Catatan

Penghentian Azure Peta iOS SDK

Azure Peta Native SDK untuk iOS sekarang tidak digunakan lagi dan akan dihentikan pada 31/3/3/25. Untuk menghindari gangguan layanan, migrasikan ke Azure Peta Web SDK dengan 3/31/25.

Prasyarat

Untuk menggunakan Kontrol Peta di halaman web, Anda harus memiliki salah satu prasyarat berikut ini:

Sebuah akun Azure Maps.
Kunci langganan atau kredensial Microsoft Entra. Untuk informasi selengkapnya, lihat opsi autentikasi.

Membuat WebView

Tambahkan WebView jika aplikasi iOS Anda tidak memilikinya. Lakukan dengan menambahkan ke WKWebView papan cerita Anda atau secara terprogram dalam kode Swift Anda. Pastikan dikonfigurasi untuk menempati area tata letak yang diinginkan.

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

Menyiapkan peta dengan Azure Peta Web SDK

Dalam file HTML Anda, inisialisasi peta dengan kunci langganan Anda. Ganti <YOUR_SUBSCRIPTION_KEY> dengan kunci Anda yang sebenarnya.

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

Simpan dan jalankan aplikasi. Peta harus ditampilkan dalam WebView. Tambahkan fitur atau fungsionalitas apa pun yang ingin Anda gunakan dari Web SDK. Anda dapat merujuk ke Dokumentasi Azure Peta dan Sampel Azure Peta untuk kasus penggunaan lainnya.

Cuplikan layar peta di WebView.

Komunikasi antara kode asli dan WebView (opsional)

Untuk mengaktifkan komunikasi antara aplikasi iOS dan WebView, Anda dapat menggunakan protokol yang WKScriptMessageHandler disediakan oleh WKWebView kelas . Ini memungkinkan Anda membuat jembatan untuk komunikasi antara JavaScript yang berjalan di WebView dan kode Swift Anda. Untuk informasi selengkapnya, lihat WKScriptMessageHandler dalam dokumentasi iOS WebKit.

Membersihkan Implementasi Peta Asli

Hapus kode yang terkait dengan Azure Peta iOS SDK asli dari proyek Anda, termasuk dependensi dan kode inisialisasi yang terkait dengan azure-maps-ios-sdk-distribution.

Pengujian

Uji aplikasi Anda secara menyeluruh untuk memastikan bahwa migrasi berhasil. Periksa masalah yang terkait dengan fungsionalitas peta, interaksi pengguna, dan performa.

Langkah berikutnya

Pelajari cara menambahkan peta ke aplikasi web dan seluler menggunakan pustaka JavaScript sisi klien Kontrol Peta di Azure Peta:

Menggunakan kontrol peta Azure Peta

Bagikan melalui