แก้ไข UI การนําทาง

การใช้ Navigation SDK สำหรับ Android ช่วยให้คุณสามารถปรับเปลี่ยนประสบการณ์ของผู้ใช้ในแผนที่ โดยจะกำหนดตัวควบคุมและองค์ประกอบ UI ในตัวที่จะแสดงบนแผนที่ คุณยังสามารถปรับลักษณะที่ปรากฏของ UI การนำทางได้ด้วย โปรดอ่านหน้านโยบายเพื่อดูหลักเกณฑ์เกี่ยวกับการแก้ไขที่ยอมรับได้ใน UI การนำทาง

เอกสารนี้จะอธิบายวิธีปรับเปลี่ยนอินเทอร์เฟซผู้ใช้ของแผนที่ได้ 2 วิธี ดังนี้

• การควบคุม UI ของแผนที่
• อุปกรณ์เสริม Map UI

ข้อควรระวัง: Android Navigation SDK ไม่รองรับการจัดรูปแบบแผนที่ในระบบคลาวด์ด้วยรหัสแผนที่

ตัวควบคุม UI ของแผนที่

ตัวควบคุม UI ของแผนที่จะอยู่ที่ด้านบนของมุมมองการนำทาง Navigation SDK สำหรับ Android จะย้ายตำแหน่งการควบคุมที่กำหนดเองโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงเลย์เอาต์ในตัว สำหรับแต่ละตำแหน่งของเลย์เอาต์ คุณจะตั้งค่าการควบคุมที่กำหนดเองได้ 1 รายการ โดยการควบคุมที่กำหนดเองจะเป็นองค์ประกอบ UI เดียวก็ได้ หรือหากการออกแบบต้องการมากกว่านั้น คุณก็ใช้ ViewGroup กับองค์ประกอบ UI หลายรายการได้

เมธอด setCustomControl จะระบุตำแหน่งตามที่ระบุไว้ใน enum ของ CustomControlPosition

• SECONDARY_HEADER (ปรากฏในโหมดแนวตั้งเท่านั้น)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW

รูปภาพแสดงตัวอย่างตำแหน่งต่างๆ ของตัวควบคุม UI ที่แจ้งให้คนขับทราบตำแหน่งของนักแข่ง

เพิ่มส่วนหัวรองที่กำหนดเอง

โดยค่าเริ่มต้น เลย์เอาต์หน้าจอในโหมดการนำทางจะมีตำแหน่งสำหรับส่วนหัวรองที่อยู่ใต้ส่วนหัวหลัก ส่วนหัวรองนี้จะปรากฏขึ้นเมื่อจำเป็น เช่น ต้องมีคำแนะนำช่องทาง แอปของคุณสามารถใช้ตำแหน่งส่วนหัวรองนี้ ของเลย์เอาต์สำหรับเนื้อหาที่กำหนดเองได้ เมื่อใช้ฟีเจอร์นี้ การควบคุมจะครอบคลุมเนื้อหาส่วนหัวรองเริ่มต้น หากมุมมองการนำทางมีพื้นหลังอยู่ พื้นหลังนั้น จะยังคงอยู่ในที่ซึ่งส่วนหัวรองบังอยู่ เมื่อแอปนำการควบคุมที่กำหนดเองออก ส่วนหัวรองเริ่มต้นจะปรากฏในตำแหน่งดังกล่าว

ตำแหน่งส่วนหัวรองที่กำหนดเองจะจัดแนวขอบบนให้ตรงกับขอบด้านล่างของส่วนหัวหลัก ตำแหน่งนี้ใช้ได้เฉพาะใน portrait mode ใน landscape mode ส่วนหัวรองจะใช้งานไม่ได้และเลย์เอาต์จะไม่เปลี่ยนแปลง

1. สร้าง Android View ด้วยองค์ประกอบ UI ที่กำหนดเองหรือ ViewGroup
2. ขยาย XML หรือสร้างอินสแตนซ์ที่กำหนดเองเพื่อรับอินสแตนซ์ของข้อมูลพร็อพเพอร์ตี้เพื่อเพิ่มเป็นส่วนหัวรอง

3. ใช้ NavigationView.setCustomControl หรือ SupportNavigationFragment.setCustomControl กับ CustomControlPosition เป็น SECONDARY_HEADER

   หมายเหตุ: แอปควรเรียกใช้เมธอดนี้ในเทรด UI

   ตัวอย่างด้านล่างจะสร้างส่วนย่อยและเพิ่มการควบคุมที่กำหนดเองในตำแหน่งส่วนหัวรอง

   หมายเหตุ: โค้ดในตัวอย่างมีการแบ่งบรรทัดเพื่อให้มองเห็นได้ในเอกสาร โปรดนำออกตามความเหมาะสม

    mNavFragment.setCustomControl(getLayoutInflater().
      inflate(R.layout.your_custom_control, null),
      CustomControlPosition.SECONDARY_HEADER);
   

นำส่วนหัวรองออก

หากต้องการนำส่วนหัวรองออกและกลับไปที่เนื้อหาเริ่มต้น ให้ใช้เมธอด setCustomControl

ตั้งค่ามุมมองเป็น null เพื่อนำมุมมองออก

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

เพิ่มตัวควบคุมที่กำหนดเองที่ด้านล่างของมุมมองการนำทาง

แอปของคุณสามารถระบุตัวควบคุมที่กำหนดเองซึ่งจัดชิดขอบด้านล่างของมุมมองการนำทาง เมื่อแอปเพิ่มการควบคุมที่กำหนดเอง ปุ่มปรับกึ่งกลางใหม่และโลโก้ Google จะเลื่อนขึ้นเพื่อให้พอดีกับตัวควบคุม

1. สร้างมุมมอง Android ซึ่งมีองค์ประกอบ UI หรือกลุ่มมุมมองที่ต้องการเพิ่ม
2. สร้างมุมมองหรือส่วนย่อยสำหรับการนำทาง
3. เรียกใช้เมธอด setCustomControl ในมุมมองหรือส่วนย่อยการนำทาง และระบุการควบคุมและตำแหน่งที่จะใช้

หมายเหตุ: แอปต้องเรียกใช้เมธอดนี้ในเทรด UI

ตัวอย่างต่อไปนี้แสดง View ที่กำหนดเองซึ่งเพิ่มใน SupportNavigationFragment

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

นำการควบคุมที่กำหนดเองออก

หากต้องการนำการควบคุมที่กำหนดเองออก ให้ใช้เมธอด setCustomControl และระบุตำแหน่งของการควบคุมที่คุณต้องการนำออก

ตั้งค่ามุมมองเป็น null สำหรับตำแหน่งนั้น

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

อุปกรณ์เสริม UI ของแผนที่

การนำทาง SDK สำหรับ Android มีอุปกรณ์เสริมสำหรับ UI ที่ปรากฏขึ้นในระหว่าง การนำทางซึ่งคล้ายกับที่อยู่ในแอปพลิเคชัน Google แผนที่สำหรับ Android คุณสามารถปรับระดับการเข้าถึงหรือลักษณะที่ปรากฏของการควบคุมเหล่านี้ตามที่อธิบายไว้ในส่วนนี้ การเปลี่ยนแปลงที่คุณทำที่นี่จะมีผลระหว่างการเดินทางครั้งต่อไปของคนขับ

โปรดอ่านหน้านโยบายเพื่อดูหลักเกณฑ์เกี่ยวกับการแก้ไข UI การนำทางที่ยอมรับได้

ดูโค้ด

< > แสดง/ซ่อนโค้ด Java สำหรับกิจกรรมการนำทาง

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import com.google.android.libraries.navigation.Camera;
import com.google.android.libraries.navigation.LatLng;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.Marker;
import com.google.android.libraries.navigation.MarkerOptions;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationMap;
import com.google.android.libraries.navigation.Navigator;
import com.google.android.libraries.navigation.SimulationOptions;
import com.google.android.libraries.navigation.StylingOptions;
import com.google.android.libraries.navigation.SupportNavigationFragment;
import com.google.android.libraries.navigation.Waypoint;

/**
 * An activity that displays a map and a customized navigation UI.
 */
public class NavigationActivityCustomization extends AppCompatActivity {

    private static final String TAG = NavigationActivityCustomization.class.getSimpleName();
    private Navigator mNavigator;
    private SupportNavigationFragment mNavFragment;
    private NavigationMap mMap;
    // Define the Sydney Opera House by specifying its place ID.
    private static final String SYDNEY_OPERA_HOUSE = "ChIJ3S-JXmauEmsRUcIaWtf4MzE";
    // Set fields for requesting location permission.
    private static final int PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1;
    private boolean mLocationPermissionGranted;

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

        // Initialize the Navigation SDK.
        initializeNavigationSdk();
    }

    /**
     * Starts the Navigation SDK and sets the camera to follow the device's location.
     * Calls the navigateToPlace() method when the navigator is ready.
     */
    private void initializeNavigationSdk() {
        /*
         * Request location permission, so that we can get the location of the
         * device. The result of the permission request is handled by a callback,
         * onRequestPermissionsResult.
         */
        if (ContextCompat.checkSelfPermission(this.getApplicationContext(),
                android.Manifest.permission.ACCESS_FINE_LOCATION)
                    == PackageManager.PERMISSION_GRANTED) {
            mLocationPermissionGranted = true;
        } else {
            ActivityCompat.requestPermissions(this,
                    new String[] { android.Manifest.permission.ACCESS_FINE_LOCATION },
                    PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);
        }

        if (!mLocationPermissionGranted) {
            displayMessage("Error loading Navigation SDK: "
                    + "The user has not granted location permission.");
            return;
        }

        // Get a navigator.
        NavigationApi.getNavigator(this, new NavigationApi.NavigatorListener() {
                    /**
                     * Sets up the navigation UI when the navigator is ready for use.
                     */
                    @Override
                    public void onNavigatorReady(Navigator navigator) {
                        displayMessage("Navigator ready.");
                        mNavigator = navigator;
                        mNavFragment = (SupportNavigationFragment) getFragmentManager()
                                .findFragmentById(R.id.navigation_fragment);

                        // Navigate to a place, specified by Place ID.
                        navigateToPlace(SYDNEY_OPERA_HOUSE);
                    }

                    /**
                     * Handles errors from the Navigation SDK.
                     * @param errorCode The error code returned by the navigator.
                     */
                    @Override
                    public void onError(@NavigationApi.ErrorCode int errorCode) {
                        switch (errorCode) {
                            case NavigationApi.ErrorCode.NOT_AUTHORIZED:
                                displayMessage("Error loading Navigation SDK: Your API key is "
                                        + "invalid or not authorized to use the Navigation SDK.");
                                break;
                            case NavigationApi.ErrorCode.TERMS_NOT_ACCEPTED:
                                displayMessage("Error loading Navigation SDK: User did not accept "
                                        + "the Navigation Terms of Use.");
                                break;
                            case NavigationApi.ErrorCode.NETWORK_ERROR:
                                displayMessage("Error loading Navigation SDK: Network error.");
                                break;
                            case NavigationApi.ErrorCode.LOCATION_PERMISSION_MISSING:
                                displayMessage("Error loading Navigation SDK: Location permission "
                                        + "is missing.");
                                break;
                            default:
                                displayMessage("Error loading Navigation SDK: " + errorCode);
                        }
                    }
                });
    }

    /**
     * Customizes the navigation UI and the map.
     */
    private void customizeNavigationUI() {
        // Set custom colors for the navigator.
        mNavFragment.setStylingOptions(new StylingOptions()
                .primaryDayModeThemeColor(0xff1A237E)
                .secondaryDayModeThemeColor(0xff3F51B5)
                .primaryNightModeThemeColor(0xff212121)
                .secondaryNightModeThemeColor(0xff424242)
                .headerLargeManeuverIconColor(0xffffff00)
                .headerSmallManeuverIconColor(0xffffa500)
                .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
                .headerNextStepTextColor(0xff00ff00)
                .headerNextStepTextSize(20f)
                .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
                .headerDistanceValueTextColor(0xff00ff00)
                .headerDistanceUnitsTextColor(0xff0000ff)
                .headerDistanceValueTextSize(20f)
                .headerDistanceUnitsTextSize(18f)
                .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
                .headerInstructionsTextColor(0xffffff00)
                .headerInstructionsFirstRowTextSize(24f)
                .headerInstructionsSecondRowTextSize(20f)
                .headerGuidanceRecommendedLaneColor(0xffffa500));
        // Get the map.
        mMap = mNavFragment.getMap();
        // Turn off the traffic layer on the map.
        mMap.setTrafficEnabled(false);

        // Place a marker at the final destination.
        if (mNavigator.getCurrentRouteSegment() != null) {
            LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
                .getDestinationLatLng();

            Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
                    getResources(), R.drawable.ic_person_pin_48dp);

            mMap.addMarker(new MarkerOptions()
                    .position(destinationLatLng)
                    .icon(destinationMarkerIcon)
                    .title("Destination marker"));

            // Listen for a tap on the marker.
            mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
                @Override
                public void onMarkerClick(Marker marker) {
                    displayMessage("Marker tapped: "
                            + marker.getTitle() + ", at location "
                            + marker.getPosition().latitude + ", "
                            + marker.getPosition().longitude);
                }
            });
        }


        // Set the camera to follow the device location with 'TILTED' driving view.
        mNavFragment.getCamera().followMyLocation(Camera.Perspective.TILTED);
    }

    /**
     * Requests directions from the user's current location to a specific place (provided
     * by the Google Places API).
     */
    private void navigateToPlace(String placeId) {
        Waypoint destination;
        try {
            destination = Waypoint.fromPlaceId(placeId, null);
        } catch (Waypoint.UnsupportedPlaceIdException e) {
            displayMessage("Error starting navigation: Place ID is not supported.");
            return;
        }

        // Create a future to await the result of the asynchronous navigator task.
        ListenableResultFuture<Navigator.RouteStatus> pendingRoute =
                mNavigator.setDestination(destination);

        // Define the action to perform when the SDK has determined the route.
        pendingRoute.setOnResultListener(
                new ListenableResultFuture.OnResultListener<Navigator.RouteStatus>() {
                    @Override
                    public void onResult(Navigator.RouteStatus code) {
                        switch (code) {
                            case OK:
                                // Hide the toolbar to maximize the navigation UI.
                                if (getActionBar() != null) {
                                    getActionBar().hide();
                                }

                                // Customize the navigation UI.
                                customizeNavigationUI();

                                // Enable voice audio guidance (through the device speaker).
                                mNavigator.setAudioGuidance(
                                        Navigator.AudioGuidance.VOICE_ALERTS_AND_GUIDANCE);

                                // Simulate vehicle progress along the route for demo/debug builds.
                                if (BuildConfig.DEBUG) {
                                    mNavigator.getSimulator().simulateLocationsAlongExistingRoute(
                                            new SimulationOptions().speedMultiplier(5));
                                }

                                // Start turn-by-turn guidance along the current route.
                                mNavigator.startGuidance();
                                break;
                            // Handle error conditions returned by the navigator.
                            case NO_ROUTE_FOUND:
                                displayMessage("Error starting navigation: No route found.");
                                break;
                            case NETWORK_ERROR:
                                displayMessage("Error starting navigation: Network error.");
                                break;
                            case ROUTE_CANCELED:
                                displayMessage("Error starting navigation: Route canceled.");
                                break;
                            default:
                                displayMessage("Error starting navigation: "
                                        + String.valueOf(code));
                        }
                    }
                });
    }

    /**
     * Handles the result of the request for location permissions.
     */
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String permissions[],
                                           @NonNull int[] grantResults) {
        mLocationPermissionGranted = false;
        switch (requestCode) {
            case PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION: {
                // If request is canceled, the result arrays are empty.
                if (grantResults.length > 0
                        && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                    mLocationPermissionGranted = true;
                }
            }
        }
    }

    /**
     * Shows a message on screen and in the log. Used when something goes wrong.
     * @param errorMessage The message to display.
     */
    private void displayMessage(String errorMessage) {
        Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
        Log.d(TAG, errorMessage);
    }
}

แก้ไขส่วนหัวของการนำทาง

ใช้ SupportNavigationFragment.setStylingOptions() หรือ NavigationView.setStylingOptions() เพื่อเปลี่ยนธีมของส่วนหัวการนำทางและสัญญาณบอกสถานะสำหรับเลี้ยวถัดไปซึ่งปรากฏใต้ส่วนหัว หากมี

คุณตั้งค่าแอตทริบิวต์ต่อไปนี้ได้

ประเภทแอตทริบิวต์	Attributes
สีพื้นหลัง	โหมดวันหลัก - สีเวลากลางวันของส่วนหัวของการนำทาง โหมดวันรอง - สีเวลากลางวันของสัญญาณบอกสถานะเลี้ยวถัดไป โหมดกลางคืนหลัก - สีเวลากลางคืนของส่วนหัวของการนำทาง โหมดกลางคืนรอง - สีเวลากลางคืนของสัญญาณบอกสถานะเลี้ยวถัดไป
องค์ประกอบของข้อความสำหรับวิธีการ	สีของข้อความ แบบอักษร ขนาดข้อความของแถวแรก ขนาดข้อความของแถวที่ 2
องค์ประกอบของข้อความสำหรับขั้นตอนถัดไป	แบบอักษร สีข้อความของค่าระยะทาง ขนาดข้อความของค่าระยะทาง สีข้อความของหน่วยระยะทาง ขนาดข้อความของหน่วยระยะทาง
ไอคอนบังคับทิศทาง	สีของไอคอนเคลื่อนที่ขนาดใหญ่ สีของไอคอนเครื่องมือสลับขนาดเล็ก
คำแนะนำช่องทาง	สีของช่องทางที่แนะนำ

ตัวอย่างต่อไปนี้จะแสดงวิธีตั้งค่าตัวเลือกการจัดรูปแบบ

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

ปิดเลเยอร์การจราจร

ใช้ GoogleMap.setTrafficEnabled() เพื่อเปิดหรือปิดเลเยอร์การจราจรบนแผนที่ การตั้งค่านี้ส่งผลต่อตัวบ่งชี้ความหนาแน่นของการจราจรโดยรวมที่แสดงบนแผนที่ แต่จะไม่ส่งผลกับสัญญาณบอกสถานะการจราจรบนเส้นทางที่เครื่องนำทางวางแผนไว้

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

เปิดไฟจราจรและป้ายหยุด

คุณเปิดใช้ไฟจราจรและป้ายหยุดได้ใน UI ของแผนที่ ฟีเจอร์นี้ช่วยให้คนขับสามารถแสดงไฟจราจรหรือไอคอนป้ายหยุดระหว่างทางได้ ซึ่งจะให้บริบทที่ดียิ่งขึ้นสำหรับการเดินทางที่มีประสิทธิภาพและแม่นยำยิ่งขึ้น

ไฟจราจรและป้ายหยุดจะปิดใช้ใน Navigation SDK โดยค่าเริ่มต้น หากต้องการเปิดใช้ฟีเจอร์นี้ ให้เรียกใช้ DisplayOptions สำหรับแต่ละฟีเจอร์แยกกัน

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

เพิ่มเครื่องหมายที่กำหนดเอง

ตอนนี้ Navigation SDK สำหรับ Android ใช้ Google Maps API สำหรับเครื่องหมายแล้ว ดูข้อมูลเพิ่มเติมในเอกสารประกอบเกี่ยวกับ Maps API

ข้อความแบบลอย

คุณสามารถเพิ่มข้อความแบบลอยที่ตำแหน่งใดก็ได้ในแอป ในกรณีที่ข้อความไม่ครอบคลุมการระบุแหล่งที่มาของ Google การนำทาง SDK ไม่รองรับการตรึงข้อความกับละติจูด/ลองจิจูดบนแผนที่หรือกับป้ายกำกับ ไปที่หน้าต่างข้อมูลสำหรับข้อมูลเพิ่มเติม

แสดงขีดจำกัดความเร็ว

คุณแสดงหรือซ่อนไอคอนการจำกัดความเร็วได้แบบเป็นโปรแกรม ใช้ NavigationView.setSpeedLimitIconEnabled() หรือ SupportNavigationFragment.setSpeedLimitIconEnabled() เพื่อแสดงหรือซ่อนไอคอนจำกัดความเร็ว เมื่อเปิดใช้ ไอคอนการจำกัดความเร็ว จะแสดงที่มุมด้านล่างในระหว่างการนำทาง ไอคอนแสดงขีดจำกัดความเร็วของถนนที่รถวิ่งอยู่ ไอคอนนี้จะปรากฏในตำแหน่งที่มีข้อมูลขีดจำกัดความเร็วที่เชื่อถือได้เท่านั้น

// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);

ไอคอนจำกัดความเร็วจะซ่อนไว้ชั่วคราวเมื่อปุ่มจัดกึ่งกลางใหม่ปรากฏขึ้น

หมายเหตุ: คนขับต้องปฏิบัติตามป้ายที่ติดไว้ทั้งหมดบนถนน ข้อมูลที่โพสต์ในไอคอนขีดจำกัดความเร็ว จะใช้เป็นข้อมูลอ้างอิงเท่านั้น เรารับประกันความถูกต้องของข้อมูลขีดจำกัดความเร็วไม่ได้ คุณสามารถรายงานความไม่ถูกต้องในข้อมูลขีดจำกัดความเร็วของเราได้โดยส่งเคสในหน้าการสนับสนุนของ Google Cloud

ตั้งค่าโหมดกลางคืน

คุณควบคุมการทำงานของโหมดกลางคืนได้โดยใช้โปรแกรม ใช้ NavigationView.setForceNightMode() หรือ SupportNavigationFragment.setForceNightMode() เพื่อเปิดหรือปิดโหมดกลางคืน หรือให้ Navigation SDK สำหรับ Android ควบคุม

• AUTO ให้ SDK การนำทางกำหนดโหมดที่เหมาะสมตามตำแหน่งของอุปกรณ์และเวลาท้องถิ่น
• FORCE_NIGHT บังคับให้เปิดโหมดกลางคืน
• FORCE_DAY บังคับให้เปิดโหมดวัน

ตัวอย่างต่อไปนี้แสดงการบังคับให้เปิดโหมดกลางคืนภายในส่วนการนำทาง

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

แสดงรายการเส้นทาง

ขั้นแรก ให้สร้างข้อมูลพร็อพเพอร์ตี้และเพิ่มลงในลำดับชั้น

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

อย่าลืมส่งต่อเหตุการณ์ในวงจรไปยัง DirectionsListView เช่นเดียวกับที่ใช้กับ NavigationView เช่น

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

ซ่อนเส้นทางอื่น

คำเตือน: ปัจจุบันฟีเจอร์นี้ใช้งานร่วมกับฟีเจอร์เส้นทางที่สั้นที่สุด/เร็วที่สุดไม่ได้ การใช้ทั้ง 2 ฟีเจอร์พร้อมกันอาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด

เมื่ออินเทอร์เฟซผู้ใช้เต็มไปด้วยข้อมูลมากเกินไป คุณสามารถลดความยุ่งเหยิงได้โดยการแสดงเส้นทางอื่นให้น้อยกว่าค่าเริ่มต้น (2 เส้นทาง) หรือไม่แสดงเส้นทางอื่นเลย คุณกำหนดค่าตัวเลือกนี้ได้ก่อนที่จะดึงข้อมูลเส้นทางด้วยการเรียกใช้เมธอด RoutingOptions.alternateRoutesStrategy() ด้วยค่าการแจกแจงค่าใดค่าหนึ่งต่อไปนี้

ค่าการแจงนับ	คำอธิบาย
AlternateRoutesStrategy.SHOW_ALL	ค่าเริ่มต้น แสดงเส้นทางเลือกได้สูงสุด 2 เส้นทาง
AlternateRoutesStrategy.SHOW_ONE	แสดงเส้นทางสำรอง 1 เส้นทาง (ถ้ามี)
AlternateRoutesStrategy.SHOW_NONE	ซ่อนเส้นทางอื่น

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีซ่อนเส้นทางอื่นโดยสิ้นเชิง

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

แถบความคืบหน้าของการเดินทาง

แถบความคืบหน้าของการเดินทางเป็นแถบแนวตั้งที่ปรากฏอยู่ตามขอบขวาท้ายของแผนที่เมื่อการนำทางเริ่มต้นขึ้น เมื่อเปิดใช้ ภาพจะแสดงภาพรวมของการเดินทางทั้งหมด พร้อมจุดหมายและตำแหน่งปัจจุบันของคนขับ

ช่วยให้ผู้ขับขี่สามารถคาดการณ์ปัญหาที่กำลังจะตามมาได้อย่างรวดเร็ว เช่น การจราจร โดยไม่ต้องซูมเข้า จากนั้นคุณสามารถเปลี่ยนเส้นทางการเดินทาง หากจำเป็น ถ้าคนขับเปลี่ยนเส้นทางการเดินทาง แถบความคืบหน้าจะรีเซ็ต เหมือนการเดินทางใหม่เริ่มต้นจากจุดนั้น

แถบความคืบหน้าของการเดินทางจะแสดงสัญญาณบอกสถานะต่อไปนี้

• เส้นทางที่ผ่านไปแล้ว - ส่วนที่ผ่านไปแล้วของการเดินทาง

• ตำแหน่งปัจจุบัน - ตำแหน่งปัจจุบันของคนขับในการเดินทาง

• สถานะการจราจร - สถานะของการเข้าชมที่ใกล้จะมาถึง

• จุดหมายสุดท้าย - จุดหมายของการเดินทางสุดท้าย

หมายเหตุ: แถบความคืบหน้าของการเดินทางจะแสดงในโหมดแนวตั้งเท่านั้น

เปิดใช้แถบความคืบหน้าของการเดินทางโดยเรียกใช้เมธอด setTripProgressBarEnabled() ใน NavigationView หรือ SupportNavigationFragment ได้ เช่น

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);