Cài đặt trên iOS SDK

Để sử dụng được, người dùng cần thao tác như sau.

Vietbando SDK là thư viện bản đồ dành cho hệ điều hành iOS. Hướng dẫn này sẽ giúp bạn cài đặt Vietbando SDK với việc sử dụng IDE, Xcodestoryboards để tải bản đồ, thay đổi kiểu bản đồ, và đặt marker và vị trí của người dùng trên đó. Chúng tôi sẽ chỉ bạn cách làm trong Objective-C.

Lưu ý! Chúng tôi vẫn đang tích cực phát triển vietbando iOS SDK và sẽ cập nhật hướng dẫn này và hướng dẫn mới khi cải thiện các tính năng tuyệt vời của nó.

Thư viện SDK

Xem chi tiết tại đây

Cài đặt Xcode

Mở Xcode và chuyển đến File ‣ New ‣ Project để tạo dự án mới. Chuyển đến iOS Application và chọn template Single View Application.

Đặt tên Examples. Chọn Objective-C. Hướng dẫn này sẽ giúp bạn phát triển ứng dụng trên iPhone. Nếu bạn có dự định để hỗ trợ cả iPhone và iPad, bạn có thể chọn Universal ở phần thiết bị.

Chọn Next để tạo ra một thư mục để Xcode lưu trữ tất cả các tập tin của bạn trong đó.

Thiết lập khóa xác thực

Để hiển thị bản đồ host bởi vietbando trong ứng dụng của bạn, bạn cần phải đặt khóa xác thực của bạn bên trong file Info.plist:

  1. Trong phần Project navigator (bên trái), tìm file Info.plist.
  2. Chọn “Information Property List” và chuyển đến Editor ‣ Add Item.
  3. Tại dòng mới, gán Khóa thành VBDVietbandoAccessToken và gán Giá trị cho khóa xác thực.

access-token

Bạn chỉ phải thiết lập khóa xác thực một lần trong tập tin này. khóa xác thực đảm bảo rằng chỉ các ứng dụng của bạn đang sử dụng tài khoản của bạn.

Xem hướng dẫn chi tiết đăng kí khóa xác thực tại đây

Thiết lập truy cập trang Vietbando.com

access-token

Tải và cài vietbando iOS SDK

Bây giờ bạn đã tạo ra một dự án Xcode, giờ hãy cài vietbando iOS SDK. Tải về phiên bản mới nhất, giải nén các tập tin tải về, và sau đó kéo và thả vietbando.frameworkvào Embedded Binaries của dự án:

Với vietbando framework, bạn có thể truy cập tất cả các lớp và phương pháp có sẵn trong SDK của chúng tôi SDK.

Thêm bản đồ sử dụng storyboards

Trong hướng dẫn này, bạn sẽ xây dựng giao diện của ứng dụng sử dụng một kịch bản giao diện Builder. (Ngoài ra, bạn có thể tạo ra các giao diện hoàn toàn bằng mã.) Chọn chế độ view từ bộ điều khiển view của bạn, sau đó trong tab bên phải, thay đổi lớp thành VBDMapView. Điều này sẽ thêm các bản đồ cơ bản vào bộ điều khiển view, do đó bạn có thể làm những việc như thêm kiểu tùy chỉnh, thiết lập trung tâm của bản đồ, và thêm chú thích.

Bây giờ bạn đã thêm một bản đồ vào ứng dụng của bạn, hãy test nó. Chọn một mô hình iPhone và chọn nút Build and Run.

simulator

Simulator sẽ mở, khởi động, và sau đó bắt đầu các ứng dụng mà bạn vừa tạo:

gl-map-1

Tùy chỉnh bản đồ

Để thay đổi tọa độ và mức độ phóng, chọn Map View trong Interface Builder, và mở tab Attributes inspector ở sidebar bên phải.

Gán Latitude thành 10.7763973, Longitude thành 106.701278, và Zoom Level thành 14.

style-url

Chạy ứng dụng trong Simulator để xem bản đồ zoom tại quận 1, thành phố Hồ Chí Minh:

gl-map-1.5

Thay đổi kiểu bản đồ

Kiểu mặc định bạn đang thấy là kiểu Vector Tile Default, bạn có thể chọn các loại bản đồ tại đây.

Ví dụ: Gõ chọn địa hình vietbando://styles/vietbando/ra_vbdterrian vào Style URL.

style-url

Chạy lại ứng dụng trong Simulator để xem kiểu bản đồ Địa hình:

gl-map-2

Thêm chú thích với mã

Với storyboard, bạn có thể tiếp tục bổ sung các điều khiển và màn hình vào ứng dụng của bạn. Hãy thêm nhiều chức năng hơn cho bản đồ. Để làm điều đó, chúng ta cần phải thêm một số mã. Chuyển từ Interface Builder sang mã View Controller. Trong Project navigator, mở ViewController.m để xem code.

Phân quyền giao diện bản đồ trong Interface Builder

Nhưng trước tiên, để cấu hình các thuộc tính chú thích khác nhau, bạn sẽ cần phải thiết lập thuộc tính đại diện bản đồ. Tại storyboard, giữ phím Ctrl trong khi kéo chuột từ giao diện bản đồ. Chọn delegate .

Nhập Vietbando Framework trong mã

Nhập Vietbando Framework ở đầu của mã điều khiển:

#import "ViewController.h"
@import Vietbando;

Xác định các chú thích và thêm nó vào bản đồ

Với tất cả mọi kết nối, chúng ta hãy thêm một chú thích - từng dòng một. Đầu tiên, tạo một đối tượng VBDPointAnnotation ở cuối của phương pháp viewDidLoad và gán nó vào điểm biến địa phương:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    VBDPointAnnotation *point = [[VBDPointAnnotation alloc] init];
}

Tiếp theo, cho điểm chú thích một tọa độ:

- (void)viewDidLoad {
    [super viewDidLoad];

    VBDPointAnnotation *point = [[VBDPointAnnotation alloc] init];
    point.coordinate = CLLocationCoordinate2DMake(10.7763973, 106.701278);
}

Chú thích có titlesubtitle thuộc tính cung cấp nội dung văn bản cho chú thích, mà chúng ta sẽ nhận được trong một thời điểm:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    VBDPointAnnotation *point = [[VBDPointAnnotation alloc] init];
    point.coordinate = CLLocationCoordinate2DMake(10.7763973, 106.701278);
    point.title = @"Hello world!";
    point.subtitle = @"Welcome to my marker.";
}

Cuối cùng, thêm chú thích vào bản đồ:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    VBDPointAnnotation *point = [[VBDPointAnnotation alloc] init];
    point.coordinate = CLLocationCoordinate2DMake(10.7763973, 106.701278);
    point.title = @"Hello world!";
    point.subtitle = @"Welcome to my marker.";

    [self.mapView addAnnotation:point];
}

Kết quả sẽ là: