建立一個新專案

首先先開啟 Xcode 建立新專案，使用 Single View App

I 1

接著設定您的 app name，Language 可使用 Swift 或 Objective-C

I 2

儲存您的專案位置

安裝 Map8 SDK framework

下載 Map8.framework https://api.map8.zone/download/maps_sdk/map8-maps-sdk-ios.zip?key=您的key，將檔案放置於您的專案目錄中

I 3

前往 General 頁籤，Embedded Binaries 區塊中，加入 Map8.framework

I 4

I 5

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

I 6

填入 bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Map8.framework/strip-frameworks.sh"

I 7

在 Info.plist 加入描述

Map8 Access Key

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

I 8

定位權限描述

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

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

I 9

顯示地圖

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

Swift Example

import UIKit
import Map8

class ViewController: UIViewController, MGLMapViewDelegate {

    var maxBounds: MGLCoordinateBounds!

    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

        // 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
    }

    // 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;
}
@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;

    // 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;
}

- (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，應該就會顯示出地圖

I 10 I 11

恭喜！Congratulations!!! :D

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

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

非常感謝！

https://map8.zone