การเริ่มต้นใช้งาน Longdo Map Framework 4.x บน iOS - MetamediaTechnology/longdo-map-demo-ios GitHub Wiki

สร้าง Project ใหม่บนโปรแกรม XCode จากเมนูหรือหน้าแรก
เลือก iOS ที่แท็บด้านบนแล้วเลือก App กดปุ่ม Next
ตั้งชื่อ Product Name และเลือก Interface เป็น SwiftUI กดปุ่ม Next
บันทึกโปรเจกต์บนเครื่องคอมพิวเตอร์ในตำแหน่งที่ต้องการ
ทำการ Add Packages
- ไปที่เมนู Files และเลือก Add Packages...
- วางลิงก์ https://github.com/MetamediaTechnology/longdo-map-ios-framework ลงที่ด้านบนขวาของหน้าต่างที่แสดงขึ้นมา
- Dependency Rules เลือก Up to Next Major Version
- คลิกปุ่ม Add Package
- คลิกปุ่ม Add Package ที่ Popup อีกครั้ง
กรณีมีหลาย Target ให้ทำการเลือก Framework เพิ่มเติมในแต่ละ Target (หากมี Framework ปรากฏอยู่แล้วสามารถข้ามขั้นตอนนี้ไป)
- เลือกชื่อ Project ที่แท็บด้านซ้าย
- ที่ด้านซ้ายของตรงกลาง เลือก TARGETS ที่จะเพิ่ม framework
- ที่แท็บด้านบนเลือก General
- คลิกปุ่มบวกด้านล่างในส่วนของ Frameworks, Libraries, and Embedded Content
- เลือก LongdoMapFramework จากหน้าต่างที่แสดงขึ้นมา แล้วคลิกปุ่ม Add

เลือก ContentView ที่แท็บด้านซ้าย หรือไฟล์ view ที่ต้องการเพิ่มแผนที่

Edit Code

แก้ไขโค้ดให้มีลักษณะตามด้านล่าง และกำหนด apikey ในบรรทัด map.apiKey = ให้เป็นไปตามรหัสที่ลงทะเบียนไว้

import SwiftUI
import LongdoMapFramework

struct ContentView: View {
    let map = LongdoMap()
    var body: some View {
        VStack {
            Map(map: map)
                .ignoresSafeArea()
        }
    }
}

#Preview {
    ContentView()
}

struct Map: UIViewRepresentable {
    var map: LongdoMap

    func makeUIView(context: Context) -> LongdoMap {
        map.apiKey = "แทนที่ด้วย API Key ของคุณ"
        map.render()
        return map
    }

    func updateUIView(_ uiView: LongdoMap, context: Context) {
    
    }
}

ลองเพิ่มปุ่มแสดงสภาพการจราจรบนแผนที่ โดยแก้ไขโค้ดส่วน struct ContentView ดังนี้ (สามารถข้ามข้อนี้ไปได้)

struct ContentView: View {
    let map = LongdoMap()
    var body: some View {
        VStack {
            Map(map: map)
                .ignoresSafeArea()
            Button("Show Traffic", action: showTraffic)
        }
    }

    func showTraffic() {
        let _ = map.call(method: "Layers.add", args: [map.ldstatic("Layers", with: "TRAFFIC")])
    }
}

ทดสอบการใช้งานโดยเลือก device ที่ต้องการ ในที่นี้จะเลือก iPhone 16 ซึ่งเป็น simulator และกดปุ่ม run รูปสามเหลี่ยม
- ตัวอย่าง application เมื่อ run สำเร็จ
ดูตัวอย่างโปรแกรมที่เสร็จแล้ว