NAV Navbar

建立一個新專案

首先開啟 Android Studio,[ File ] ⇒ [ New ] ⇒ [ New Project ],建立新專案,使用 Empty Activity

A 1

接著設定您的 app name,Language 使用的是 Java

A 2

最後儲存您的專案位置

安裝 Map8 SDK aar

下載 Map8AndroidSDK-release.aar https://api.map8.zone/download/maps_sdk/map8-maps-sdk-android.zip?key=您的key,將檔案放置於您的專案目錄中

A 3

開啟 Android Studio,[ File ] ⇒ [ New ] ⇒ [ New Module ]

A 4

選擇 Import .JAR/.AAR Package

A 5

最後選擇剛剛下載的 Map8AndroidSDK-release.aar 路徑位置

A 6

檢查 build.gradle 內容的完整性

參考以下描述,檢查 build.gradle 中 dependencies 區塊的完整性:

...

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    api 'com.mapbox.mapboxsdk:mapbox-android-telemetry:4.5.1'
    api 'com.mapbox.mapboxsdk:mapbox-sdk-geojson:4.8.0'
    api 'com.mapbox.mapboxsdk:mapbox-android-gestures:0.5.1'
    api 'com.mapbox.mapboxsdk:mapbox-android-accounts:0.2.0'

    implementation 'com.mapbox.mapboxsdk:mapbox-sdk-turf:4.8.0'
    implementation 'com.mapbox.mapboxsdk:mapbox-sdk-services:4.8.0'
    implementation 'com.android.support:support-annotations:4.8.0'
    implementation 'com.android.support:support-fragment:28.0.0'
    implementation 'com.squareup.okhttp3:okhttp:3.12.3'
    implementation 'com.facebook.soloader:soloader:0.6.1'

    implementation project(":Map8AndroidSDK-release")
}

...

加入定位的 permisson

AndroidManifest.xml 加入


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="zone.map8.demo">

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

    ...

    <application

    ...

    </application>

    ...

</manifest>

顯示地圖

MainActivity 中,填上以下範例程式,即可以顯示地圖:

public class MainActivity extends AppCompatActivity implements PermissionsListener {

    // Taiwan map boundary
    private static final LatLng TW_BOUND_CORNER_NE = new LatLng(33.4, 138.45858);
    private static final LatLng TW_BOUND_CORNER_SW = new LatLng(15, 105);
    private static final LatLngBounds TW_BOUNDS_AREA = new LatLngBounds.Builder()
            .include(TW_BOUND_CORNER_NE)
            .include(TW_BOUND_CORNER_SW)
            .build();

    private PermissionsManager permissionsManager;
    private MapboxMap mapboxMap;
    private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Map8.getInstance(this, "<您的 Map8 Key>");

        MapboxMapOptions options = MapboxMapOptions.createFromAttributes(this, null)
                .camera(new CameraPosition.Builder()
                        .target(new LatLng(25.03625, 121.54885))
                        .zoom(16)
                        .bearing(0)
                        .tilt(50)
                        .build());

        // create map
        mapView = new MapView(this, options);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull MapboxMap mapboxMap) {
                MainActivity.this.mapboxMap = mapboxMap;
                mapboxMap.setMaxZoomPreference(19.99);
                mapboxMap.setMinZoomPreference(6);
                mapboxMap.setLatLngBoundsForCameraTarget(TW_BOUNDS_AREA);
                mapboxMap.setStyle(new Style.Builder().fromUri("https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json"), new Style.OnStyleLoaded() {
                    @Override
                    public void onStyleLoaded(@NonNull Style style) {
                        Log.d("[Map8 SDK Demo]", "mapView.getMapAsync() > onMapReady() > setStyle() > onStyleLoaded()");
                        enableLocationComponent(style);
                    }
                });
            }
        });
        setContentView(mapView);
    }

    @SuppressWarnings( {"MissingPermission"})
    private void enableLocationComponent(@NonNull Style loadedMapStyle) {
        // Check if permissions are enabled and if not request
        if (PermissionsManager.areLocationPermissionsGranted(this)) {

            // Get an instance of the component
            LocationComponent locationComponent = mapboxMap.getLocationComponent();

            // Activate with options
            locationComponent.activateLocationComponent(
                    LocationComponentActivationOptions.builder(this, loadedMapStyle).build());

            // Enable to make component visible
            locationComponent.setLocationComponentEnabled(true);

            // Set the component's camera mode
            locationComponent.setCameraMode(CameraMode.TRACKING);

            // Set the component's render mode
            locationComponent.setRenderMode(RenderMode.COMPASS);
        } else {
            permissionsManager = new PermissionsManager(this);
            permissionsManager.requestLocationPermissions(this);
        }
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        permissionsManager.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }

    @Override
    public void onExplanationNeeded(List<String> permissionsToExplain) {
        Toast.makeText(this, "This app needs location permissions in order to show its functionality.", Toast.LENGTH_LONG).show();
    }

    @Override
    public void onPermissionResult(boolean granted) {
        if (granted) {
            mapboxMap.getStyle(new Style.OnStyleLoaded() {
                @Override
                public void onStyleLoaded(@NonNull Style style) {
                    enableLocationComponent(style);
                }
            });
        } else {
            Toast.makeText(this, "This app needs location permissions in order to show its functionality.", Toast.LENGTH_LONG).show();
            finish();
        }
    }

    // Add the mapView's own lifecycle methods to the activity's lifecycle methods
    @SuppressWarnings( {"MissingPermission"})
    @Override
    public void onStart() {
        super.onStart();
        mapView.onStart();
    }

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

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

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

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

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

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

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

A 10 A 11

恭喜!Congratulations!!! :D


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

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

非常感謝!



https://map8.zone