建立一個新專案

首先先開啟 Xcode 建立新專案，選擇 App 範本

接著設定您的 app name，Interface 請選擇 Storyboard，Language 可使用 Swift 或 Objective-C

儲存您的專案位置

安裝 Map8 SDK framework

下載 Map8.framework https://api.map8.zone/download/maps_sdk/map8-maps-sdk-ios.zip?key=您的key，將解壓縮後的檔案拖曳加入您的 Xcode 專案中

前往 General 頁籤，在 Frameworks, Libraries, and Embedded Content 區塊中，確認 Map8.framework 已加入，並將 Embed 選項設為 Embed & Sign

前往 Build Phases 頁籤，點擊左上角 + ，選擇 New Run Script Phase

展開新增的 Run Script，填入 bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Map8.framework/strip-frameworks.sh"

前往 Build Settings 頁籤，搜尋 User Script Sandboxing，將其設為 No

在 Info.plist 加入描述

Map8 Access Key

加入 Map8Key，內容為您申請的 key

定位權限描述

加入 Privacy - Location When In Use Usage Description，描述內容可自填，以下為範例：

[Map8 SDK Demo] need your location for demonstration purpose. Kindly grant, thanks.

顯示地圖

在 ViewController 中填上以下範例程式，即可以顯示地圖：

Swift Example

import UIKit
import Map8

class ViewController: UIViewController, MGLMapViewDelegate {

    var maxBounds: MGLCoordinateBounds!
    var hasCenteredOnUser = false

    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MGLMapView(frame: view.bounds, styleURL: NSURL(string: "https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json") as URL?)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(CLLocationCoordinate2D(latitude: 25.03625, longitude: 121.54885), zoomLevel: 16, animated: false)
        mapView.maximumZoomLevel = 19.99
        view.addSubview(mapView)

        mapView.delegate = self
        mapView.showsUserLocation = true

        // Taiwan's max bounds
        let northeast = CLLocationCoordinate2D(latitude: 33.4, longitude:138.45858)
        let southwest = CLLocationCoordinate2D(latitude: 15, longitude: 105)
        maxBounds = MGLCoordinateBounds(sw: southwest, ne: northeast)
    }

    func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
        let cameraPosition = MGLMapCamera(lookingAtCenter: mapView.userLocation?.coordinate ?? CLLocationCoordinate2D(latitude: 25.03625, longitude: 121.54885),
                                          altitude: mapView.camera.altitude,
                                          pitch: 50,
                                          heading: 0)
        mapView.camera = cameraPosition
    }

    // mapViewDidFinishLoadingMap only fires once, right when the style finishes loading — location
    // permission is often still pending at that point, so the camera falls back to the hardcoded
    // coordinate above. Move the camera to the user's location the first time it actually arrives.
    func mapView(_ mapView: MGLMapView, didUpdate userLocation: MGLUserLocation?) {
        guard !hasCenteredOnUser, let coordinate = userLocation?.coordinate else { return }
        hasCenteredOnUser = true
        let cameraPosition = MGLMapCamera(lookingAtCenter: coordinate,
                                          altitude: mapView.camera.altitude,
                                          pitch: 50,
                                          heading: 0)
        mapView.setCamera(cameraPosition, animated: true)
    }

    // Restrict panning area
    func mapView(_ mapView: MGLMapView, shouldChangeFrom oldCamera: MGLMapCamera, to newCamera: MGLMapCamera) -> Bool {
        let currentCamera = mapView.camera
        let newCameraCenter = newCamera.centerCoordinate
        mapView.camera = newCamera
        let newVisibleCoordinates = mapView.visibleCoordinateBounds
        mapView.camera = currentCamera
        let inside = MGLCoordinateInCoordinateBounds(newCameraCenter, maxBounds)
        let intersects = MGLCoordinateInCoordinateBounds(newVisibleCoordinates.ne, maxBounds) && MGLCoordinateInCoordinateBounds(newVisibleCoordinates.sw, maxBounds)

        return inside && intersects
    }
}

Objective-C Example

#import "ViewController.h"
@import Map8;

@interface ViewController () <MGLMapViewDelegate>
{
    MGLCoordinateBounds maxBounds;
    BOOL hasCenteredOnUser;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *styleURL = [[NSURL alloc] initWithString:@"https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json"];

    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:styleURL];

    mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    // Set the map’s center coordinate and zoom level.
    [mapView setCenterCoordinate:CLLocationCoordinate2DMake(25.03625, 121.54885)
                       zoomLevel:16
                        animated:NO];

    [mapView setMaximumZoomLevel:19.9];

    [self.view addSubview:mapView];

    mapView.delegate = self;
    mapView.showsUserLocation = YES;

    // Taiwan's max bounds
    CLLocationCoordinate2D northeast = CLLocationCoordinate2DMake(33.4, 138.45858);
    CLLocationCoordinate2D southwest = CLLocationCoordinate2DMake(15, 105);
    maxBounds = MGLCoordinateBoundsMake(southwest, northeast);
}

- (void)mapViewDidFinishLoadingMap:(MGLMapView *)mapView {
    CLLocationCoordinate2D currentLocation = mapView.userLocation.location != nil ? mapView.userLocation.coordinate : CLLocationCoordinate2DMake(25.04753, 121.55045);
    MGLMapCamera *cameraPosition = [MGLMapCamera cameraLookingAtCenterCoordinate:currentLocation altitude:mapView.camera.altitude pitch:50.0 heading:0];

    mapView.camera = cameraPosition;
}

// mapViewDidFinishLoadingMap only fires once, right when the style finishes loading — location
// permission is often still pending at that point, so the camera falls back to the hardcoded
// coordinate above. Move the camera to the user's location the first time it actually arrives.
- (void)mapView:(MGLMapView *)mapView didUpdateUserLocation:(MGLUserLocation *)userLocation {
    if (hasCenteredOnUser || userLocation == nil) {
        return;
    }
    hasCenteredOnUser = YES;
    MGLMapCamera *cameraPosition = [MGLMapCamera cameraLookingAtCenterCoordinate:userLocation.coordinate altitude:mapView.camera.altitude pitch:50.0 heading:0];
    [mapView setCamera:cameraPosition animated:YES];
}

- (BOOL)mapView:(MGLMapView *)mapView shouldChangeFromCamera:(MGLMapCamera *)oldCamera toCamera:(MGLMapCamera *)newCamera {
    MGLMapCamera *currentCamera = mapView.camera;
    CLLocationCoordinate2D newCameraCenter = newCamera.centerCoordinate;
    mapView.camera = newCamera;
    MGLCoordinateBounds newVisibleCoordinates = mapView.visibleCoordinateBounds;
    mapView.camera = currentCamera;

    BOOL inside = MGLCoordinateInCoordinateBounds(newCameraCenter, maxBounds);
    BOOL intersects = MGLCoordinateInCoordinateBounds(newVisibleCoordinates.ne, maxBounds) && MGLCoordinateInCoordinateBounds(newVisibleCoordinates.sw, maxBounds);

    return inside && intersects;
}

@end

接著執行 Run，應該就會顯示出地圖

恭喜！Congratulations!!! :D

---

台灣圖霸感謝您的支持與愛護！

有任何疑問，或是指教，都非常歡迎您找我們詢問。

非常感謝！

---