Cài đặt trên Android SDK

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

Vietbando Android SDK là thư viện bản đồ vector cho Android. Hướng dẫn này sẽ hướng dẫn bạn cài đặt vietbando Android SDK với Android Studio, tải bản đồ, cấm 1 điểm lên nó, và thay đổi kiểu bản đồ.

Lưu ý! Chúng tôi vẫn đang tích cực phát triển Vietbando Android 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ó.

Cài đặt Android Studio

Mở Android Studio và vào File ‣ New ‣ New Project để tạo một dự án mới (hoặc chọn Start a new Android Studio project). Định cấu hình dự án mới của bạn::

  • Đặt tên dự án là Example
  • Thiết lập tên miền vietbando.com

Dưới Select the form factors your app will run on, chọn “Phone and Tablet.” Để có bộ SDK tối giản, chọn API 15: Android 4.0.3 (IceCreamSandwich). Đây là cấp API thấp nhất đang được hỗ trợ bởi vietbando Android SDK.

Nhấn Next để đến màn hình lựa chọn Activity. Chọn Empty Activity and chọn Next. Chấp nhận mặc định Activity Name and Layout Name and chọn Finish.

Cài đặt Android Virtual Device

Android Studio có thể giúp bạn thiết lập các thiết bị Android ảo trên máy tính của bạn để giúp thử nghiệm ứng dụng của bạn trong khi bạn phát triển. Để thiết lập một thiết bị bạn chọn biểu tượng Android Virtual Device (AVD) Manager , và chọn nút Create Virtual Device . Tại danh mục Phones, chọn Nexus 5 and chọn Next. Chọn phiên bản bạn muốn kiểm tra (hướng dẫn này được xây dựng bằng Lollipop API level 23, x86, Android 6.0). Tìm hiểu thêm về cách thiết lập AVD từ Android Studio’s documentation.

Cài đặt Vietbando

Tải Vietbando SDK về tại đây. Giao diện bắt đầu cài đặt thư viện sẽ tuần tự theo thứ tự như sau:

Để sủ dụng Android SDK, thêm dòng Module Build File <PROJECT_ROOT>\app\build.gradle này vào:

repositories {
    mavenCentral()
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
   	compile'com.squareup.okhttp3:okhttp:3.2.0'
    compile'com.mapzen.android:lost:1.0.1'
    // add the vietbando SDK dependency below
    compile project(':'VietbandoGLAndroidSDK-release')
}

Cấp quyền ứng dụng

Đảm bảo các quyền core sau đây được yêu cầu trong file AndroidManifest.xml từ dự án ~/Example/app/src/main/:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Nếu ứng dụng nhắm vào Android Marshmallow (API 23) hoặc cao hơn thì cần yêu cầu quyền truy cập tại runtime. Ngoài ra, bạn sẽ cần phải thêm các dịch vụ từ xa bên trong <application> tags:

<service android:name="com.vietbando.vietbandosdk.telemetry.TelemetryService" />

Access tokens

Để dùng dịch vụ vietbando và API, chẳng hạn như bản đồ, mã địa lý, bạn phải có một Khóa xác thực vietbando. Bạn có thể tìm thấy Khóa xác thực của bạn trong cài đặt tài khoản của bạn, nơi bạn có thể lấy thẻ hiện tại và tạo ra những cái mới. Khóa xác thực giúp bạn theo dõi việc sử dụng và giảm thiểu sự gián đoạn trong trường hợp một mã thông báo cần phải được thu hồi.

Đầu tiên, vào cài đặt tài khoản của bạn và tạo ra một Khóa xác thực mới cho Example.

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

Một khi bạn đãcó thẻ, mở file strings.xml từ ~/Example/app/src/main/res/values.

Thêm một chuỗi mới cho mã thông báo truy cập của bạn:

<resources>
    <string name="app_name">Example</string>
    <string name="accessToken">khóa xác thực của bạn</string>
</resources>

MapView

Lớp MapView là thành phần chính của thư viện. Nó hoạt động giống như các View khác và hành vi của nó có thể được thay đổi tĩnh với một file XML layout, hoặc lập trình tại runtime.

Để thêm các MapView như một yếu tố layout, thay thế mã trong file activity_main.xml từ ~/Example/app/src/main/res/layout/ với đoạn mã sau::

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:vietbando="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.vietbando.vietbandosdk.maps.MapView
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        vietbando:access_token="@string/accessToken"/>
        <!-- note the access token string created in the previous step -->
</RelativeLayout>

Sau đó, bạn có thể gọi lớp MapView được lập trình bên trong Activity:

findViewById(R.id.mapview);

Thêm bản đồ

Trong Android Studio và chuyển đến ~/app/src/main/java/com.vietbando.Example/MainActivity.java.

Screenshot

Chúng ta sẽ sử dụng mapView chúng ta thiết lập trước đó để thêm một bản đồ vietbando vào ứng dụng của chúng ta. Ứng dụng cần phải biết khi nào để thêm bản đồ, chằng hạn khi activity được khởi tạo với onCreate.

private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Create a mapView
        mapView = (MapView) findViewById(R.id.mapview);
        mapView.onCreate(savedInstanceState);
    }

Tiếp theo, sử dụng lớp mapView mới của bạn để tạo ra một đối tượng vietbandoMap. vietbandoMapcó rất nhiều phương pháp trong đó sẽ cho phép bạn áp dụng các style, thay đổi vị trí camera, thêm marker, và nhiều hơn nữa. Tạo vietbandoMap của bạn:

mapView.getMapAsync(new OnMapReadyCallback() {
    @Override
    public void onMapReady(vietbandoMap vietbandoMap) {
    // Customize map with markers, polylines, etc.
    }
});

Cấu hình MapView của bạn

Bắt đầu với phiên bản 4.0.0 của vietbando Android SDK, bạn có thể cấu hình nhiều đặc điểm của bản đồ của bạn, bao gồm cả vị trí bắt đầu camera, URL style, và Khóa xác thực, trong file layout của bạn. Thêm mục sau vào file layout của bạn, bên trong tag com.vietbando.vietbandosdk.maps.MapView:


vietbando:center_latitude="10.7773973"
vietbando:center_longitude="106.701278"
vietbando:zoom="12"
vietbando:tilt="20"

Khi bạn đã hoàn tất nhập mã ở trên, có thể bạn sẽ thấy một số văn bản cảnh báo màu đỏ từ Android Studio. Điều này là do chúng ta chưa import một số các lớp được tham chiếu trong MainActivity.java. Bạn có thể tự động nhập các lớp này bằng cách nhấn Alt + Enter (option + return trên Mac). Ngoài ra, tay thêm dòng sau vào phần đầu của file MainActivity.java:

import android.app.Activity;
import android.os.Bundle;

import com.vietbando.vietbandosdk.camera.CameraPosition;
import com.vietbando.vietbandosdk.constants.Style;
import com.vietbando.vietbandosdk.geometry.LatLng;
import com.vietbando.vietbandosdk.camera.CameraUpdateFactory;
import com.vietbando.vietbandosdk.maps.MapView;
import com.vietbando.vietbandosdk.maps.VietbandoMap;
import com.vietbando.vietbandosdk.maps.OnMapReadyCallback;

Tiếp theo, chúng ta sẽ xử lý các loại khác của các sự kiện có thể ảnh hưởng đến ứng dụng bản đồ của chúng ta:

@Override
public void onResume() {
    super.onResume();
    mapView.onResume();
}

@Override
public void onPause() {
    super.onPause();
    mapView.onPause();
}

@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
}

@Override
public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
}

@Override
protected void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
}

Nhấp vào nút Run ‘app’ để build ứng dụng. Android Studio sẽ mất một vài giây để xây dựng và nếu nó kết thúc mà không có lỗi, bạn sẽ có thể test nó trong AVD bạn thiết lập trước đó.

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

Các vietbando Android SDK đi kèm với một số các loại bản đồ, vì vậy hãy thử thay đổi nó một chút.

Gợi ý: Hãy thử gõ vietbandoMap.setStyleUrl(Style. và Android Studio sẽ cung cấp cho bạn một danh sách các kiểu có sẵn để lựa chọn.

Bên trong onCreate(), thay đổi để gán vietbandoMapstyle thành:

vietbandoMap.setStyleUrl(Style.VIETBANDO_RA_TERRAIN);