เอกสาร / การตั้งค่า / iOS / Mapbox

การตั้งค่า Mapbox

ขั้นตอนการใช้ Mapbox Maps SDK สำหรับ iOS กับ MapConductor เลือกสิ่งนี้สำหรับแอปที่ขึ้นอยู่กับ Mapbox อยู่แล้วหรือที่ต้องการ Mapbox style URL

PACKAGE

ios-for-mapbox

API KEY

โทเค็นการเข้าถึง

MIN iOS

17.0

VIEW

MapboxMapView

ผู้ให้บริการเดียวกัน แพลตฟอร์มอื่นAndroid React

ดูเดโมแผนที่ร้านค้า · React ↗

ก่อนเริ่ม

Xcode 15 ขึ้นไป

บัญชี Mapbox (ฟรีหรือแบบชำระเงิน)

โทเค็นการเข้าถึงสาธารณะ (ขอบเขต maps:read)

เป้าหมายการปรับใช้ iOS 17.0 ขึ้นไป

STEP 01

รับโทเค็นการเข้าถึง

สร้างบัญชี Mapbox หรือล็อกอิน
คัดลอกโทเค็นสาธารณะเริ่มต้นจาก "โทเค็น"
หากจำเป็น ให้สร้างโทเค็นใหม่ที่มีขอบเขต maps:read

ข้อควรระวัง

อย่าฝังโทเค็นลับไว้ในแอป แอปจะใช้โทเค็นสาธารณะ

STEP 02

เพิ่มด้วย Swift Package Manager

ป้อน URL ของแพ็กเกจจาก File > Add Package Dependencies ใน Xcode Mapbox Maps SDK จะถูกเพิ่มให้โดยอัตโนมัติเป็น dependency

Package URLSwift Package Manager

https://github.com/MapConductor/ios-for-mapbox

Package.swiftSwift

dependencies: [
    .package(url: "https://github.com/MapConductor/ios-sdk-core", from: "1.3.1"),
    .package(url: "https://github.com/MapConductor/ios-for-mapbox", from: "1.0.0"),
],
targets: [
    .target(
        name: "YourApp",
        dependencies: [
            .product(name: "MapConductorCore", package: "ios-sdk-core"),
            .product(name: "MapConductorForMapbox", package: "ios-for-mapbox"),
        ]
    ),
]

STEP 03

เริ่มต้น SDK

เรียก initializeMapbox(accessToken:) ครั้งเดียวก่อนสร้างมุมมองแผนที่

MyApp.swiftSwift

import SwiftUI
import MapConductorForMapbox

@main
struct MyApp: App {
    init() {
        initializeMapbox(accessToken: "YOUR_MAPBOX_PUBLIC_TOKEN")
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ContentView.swiftSwift

// Alternative: call it from the view's sdkInitialize closure
MapboxMapView(state: mapState, sdkInitialize: {
    initializeMapbox(accessToken: "YOUR_MAPBOX_PUBLIC_TOKEN")
})

STEP 04

เพิ่มสิทธิ์ตำแหน่ง (หากจำเป็น)

หากใช้ตำแหน่ง ให้ระบุวัตถุประสงค์ใน Info.plist

Info.plistXML

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to display on the map</string>

LocationManager.swiftSwift

import CoreLocation

final class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {
    private let manager = CLLocationManager()

    override init() {
        super.init()
        manager.delegate = self
    }

    func requestPermission() {
        manager.requestWhenInUseAuthorization()
    }
}

ตรวจสอบ

สิ่งที่ควรเห็น

หากแผนที่ปรากฏขึ้นด้วย Mapbox style และซูมและเลื่อนได้ ถือว่าเสร็จสิ้น

ContentView.swiftSwiftUI

import SwiftUI
import MapConductorCore
import MapConductorForMapbox

struct ContentView: View {
    @StateObject var mapState = MapboxViewState(
        mapDesignType: MapboxMapDesign.Standard,
        cameraPosition: MapCameraPosition(
            position: GeoPoint(latitude: 35.6812, longitude: 139.7671),
            zoom: 12.0
        )
    )

    var body: some View {
        MapboxMapView(state: mapState)
            .ignoresSafeArea()
    }
}

ดีไซน์แผนที่

MapboxMapDesign รองรับสไตล์มาตรฐานของ Mapbox สไตล์ที่กำหนดเองระบุด้วย MapboxMapDesign.custom(styleURI:)

MapboxMapDesign

Notes

Standard

สไตล์มาตรฐานเริ่มต้น

Streets

สไตล์ถนน

SatelliteStreets

ภาพดาวเทียม + ถนนและป้ายกำกับ

Dark

สไตล์มืด

การแก้ปัญหา

แผนที่ขาวสนิท

ตรวจสอบให้แน่ใจว่าเรียก initializeMapbox(accessToken:) ก่อนมุมมองแผนที่
ตรวจสอบว่าโทเค็นมีขอบเขต maps:read
ตรวจสอบว่าเป้าหมายการปรับใช้เป็น iOS 17.0 ขึ้นไป

แสดง "โทเค็นการเข้าถึงไม่ถูกต้อง"

ตรวจสอบค่าโทเค็นและตรวจสอบว่าไม่หมดอายุ
ตรวจสอบว่าคุณใช้โทเค็นสาธารณะ ไม่ใช่โทเค็นลับ

บิลด์ล้มเหลว

ล้างโฟลเดอร์บิลด์ (Cmd+Shift+K)
ลบ ~/Library/Developer/Xcode/DerivedData และสร้างใหม่
อัปเดต dependency ของ Swift Package Manager หลีกเลี่ยงการใช้ร่วมกับ CocoaPods

เมื่อ MapboxMapView ปรากฏขึ้น คุณสามารถวางซ้อนโอเวอร์เลย์ด้วย API สาธารณะเดียวกับผู้ให้บริการรายอื่นได้