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

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

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

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

หมายเหตุ: ในกรณีส่วนใหญ่ เราขอแนะนำให้ใช้ SupportNavigationFragment, ซึ่งเป็น Wrapper สำหรับ NavigationView, แทนการโต้ตอบกับ NavigationView โดยตรง ดูข้อมูลเพิ่มเติมได้ที่ แนวทางปฏิบัติแนะนำสำหรับการโต้ตอบกับแผนที่นำทาง .

การควบคุม UI ของแผนที่

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

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

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

ตำแหน่งการควบคุมที่กำหนดเองสำหรับการวางแนวตั้ง

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

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

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

3. ใช้ NavigationView.setCustomControl หรือ SupportNavigationFragment.setCustomControl กับตำแหน่งการควบคุมที่กำหนดเองที่เลือกจาก CustomControlPosition enum

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

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

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

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

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

หากต้องการนำการควบคุมที่กำหนดเองออก ให้เรียกเมธอด setCustomControl ด้วยพารามิเตอร์มุมมอง null และตำแหน่งการควบคุมที่กำหนดเองที่เลือก

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

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

ส่วนหัวรอง

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

หากต้องการใช้ตำแหน่งการควบคุมที่กำหนดเองนี้ ให้ส่งตำแหน่ง CustomControlPosition.SECONDARY_HEADER ไปยัง setCustomControl

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

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

ด้านซ้ายล่าง

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

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

หากต้องการใช้ตำแหน่งการควบคุมที่กำหนดเองนี้ ให้ส่งตำแหน่ง CustomControlPosition.BOTTOM_START_BELOW ไปยัง setCustomControl

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

ด้านขวาล่าง

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

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

หากต้องการใช้ตำแหน่งการควบคุมที่กำหนดเองนี้ ให้ส่งตำแหน่ง CustomControlPosition.BOTTOM_END_BELOW ไปยัง setCustomControl

ตำแหน่งการควบคุมที่กำหนดเองนี้จะอยู่ที่มุมขวาล่างของแผนที่ ใน portrait mode ตำแหน่งนี้จะอยู่เหนือการ์ดเวลาถึงโดยประมาณและ/หรือส่วนท้ายที่กำหนดเอง (หรืออยู่ด้านล่างของแผนที่หากไม่มีการ์ดเวลาถึงโดยประมาณและส่วนท้ายที่กำหนดเอง) แต่ใน landscape mode ตำแหน่งนี้จะจัดแนวให้ตรงกับด้านล่างของแผนที่ องค์ประกอบ Nav SDK ที่มองเห็นได้ตามด้านขวา (ด้านขวาในภาษาที่เขียนจากซ้ายไปขวา) จะเลื่อนขึ้นเพื่อชดเชยความสูงของมุมมองการควบคุมที่กำหนดเอง การควบคุมนี้จะอยู่ในขอบเขตของแผนที่ที่มองเห็นได้ ดังนั้นการเพิ่มระยะห่างจากขอบด้านล่างหรือขอบด้านขวาของแผนที่ก็จะเปลี่ยนตำแหน่งของการควบคุมนี้ด้วย

ส่วนท้าย

ฟีเจอร์เวอร์ชันเบต้า

ตำแหน่งการควบคุมที่กำหนดเองของส่วนท้ายสำหรับการวางแนวตั้ง

ตำแหน่งการควบคุมที่กำหนดเองของส่วนท้ายสำหรับการวางแนวนอน

หากต้องการใช้ตำแหน่งการควบคุมที่กำหนดเองนี้ ให้ส่งตำแหน่ง CustomControlPosition.FOOTER ไปยัง setCustomControl

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

ใน portrait mode ส่วนท้ายที่กำหนดเองจะมีความกว้างเต็ม การควบคุมที่กำหนดเองในตำแหน่ง CustomControlPosition.BOTTOM_START_BELOW และ CustomControlPosition.BOTTOM_END_BELOW รวมถึงองค์ประกอบ UI ของ Nav SDK เช่น ปุ่มจัดกึ่งกลางและโลโก้ Google จะอยู่ในตำแหน่งเหนือส่วนท้ายของการควบคุมที่กำหนดเอง ตำแหน่งเริ่มต้นของ Chevron จะพิจารณาความสูงของส่วนท้ายที่กำหนดเอง

ใน landscape mode ส่วนท้ายที่กำหนดเองจะมีความกว้างครึ่งหนึ่งและจัดแนวให้ตรงกับด้านซ้าย (ด้านซ้ายในภาษาที่เขียนจากซ้ายไปขวา) เช่นเดียวกับการ์ดเวลาถึงโดยประมาณของ Nav SDK การควบคุมที่กำหนดเองในตำแหน่ง CustomControlPosition.BOTTOM_START_BELOW และองค์ประกอบ UI ของ Nav SDK เช่น ปุ่มจัดกึ่งกลางและโลโก้ Google จะอยู่ในตำแหน่งเหนือส่วนท้ายของการควบคุมที่กำหนดเอง การควบคุมที่กำหนดเองในตำแหน่ง CustomControlPosition.BOTTOM_END_BELOW และองค์ประกอบ UI ของ Nav SDK ตามด้านขวา (ด้านขวาในภาษาที่เขียนจากซ้ายไปขวา) จะจัดแนวให้ตรงกับด้านล่างของแผนที่ ตำแหน่งเริ่มต้นของ Chevron จะไม่เปลี่ยนแปลงเมื่อมีส่วนท้ายที่กำหนดเอง เนื่องจากส่วนท้ายไม่ได้ขยายไปถึงด้านขวาของแผนที่

การควบคุมที่กำหนดเองในตำแหน่ง CustomControlPosition.BOTTOM_START_BELOW และ CustomControlPosition.BOTTOM_END_BELOW รวมถึงองค์ประกอบ UI ของ Nav SDK เช่น ปุ่มจัดกึ่งกลางและโลโก้ Google จะอยู่ในตำแหน่งเหนือส่วนท้ายของการควบคุมที่กำหนดเอง

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

Navigation SDK สำหรับ Android มีอุปกรณ์เสริม UI ที่ปรากฏขึ้นระหว่างการนำทาง ซึ่งคล้ายกับอุปกรณ์เสริมที่พบในแอป Google Maps สำหรับ 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.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CameraPerspective;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
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 GoogleMap 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)
                    getSupportFragmentManager().findFragmentById(R.id.navigation_fragment);

            // Get the map.
            mNavFragment.getMapAsync(
                new OnMapReadyCallback() {
                  @Override
                  public void onMapReady(GoogleMap map) {
                    mMap = map;
                    // 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));

    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(BitmapDescriptorFactory.fromBitmap(destinationMarkerIcon))
              .title("Destination marker"));

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

              // The event has been handled.
              return true;
            }
          });
    }

    // Set the camera to follow the device location with 'TILTED' driving view.
    mMap.followMyLocation(CameraPerspective.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.builder().setPlaceIdString(placeId).build();
    } 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);
  }
}

การไฮไลต์ปลายทางและทางเข้า

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

หากต้องการสร้างปลายทางด้วย placeID ให้ใช้ Waypoint.Builder.setPlaceIdString() เมธอด

หมายเหตุ: Navigation SDK ไม่รองรับการนำทางในอาคาร หากต้องการใช้แผนที่ในอาคารที่ไม่มีการนำทาง ให้ใช้คลาส indoorBuilding และ indoorLevel ของ Maps SDK สำหรับ Android

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

ใช้ 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));

เปิดใช้สัญญาณไฟจราจรและป้ายหยุด

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

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

หมายเหตุ: สัญญาณไฟจราจรอาจปรากฏบนแผนที่ในโหมดที่ไม่ใช่การนำทางด้วย ตัวเลือกในการกำหนดค่าการแสดงสัญญาณไฟจราจรโดยใช้ DisplayOptions จะส่งผลต่อสัญญาณไฟจราจรในโหมดการไปยังส่วนต่างๆ ที่ใช้งานอยู่เท่านั้น

ตัวอย่างต่อไปนี้แสดงการซ่อนสัญญาณไฟจราจรและป้ายหยุด

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

เมธอด showTrafficLights(boolean) และ showStopSigns(boolean) เลิกใช้งานแล้วและจะถูกนำออกในเวอร์ชันหลักถัดไป และระบบจะแสดงสัญญาณไฟจราจรและป้ายหยุดโดยค่าเริ่มต้น

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

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

ข้อความลอย

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

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

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

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

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

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

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

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

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

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

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

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

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

ความสูงหน้าจอ	การมองเห็นแถบความคืบหน้าของการเดินทาง	ความสูงแถบความคืบหน้าของการเดินทาง	ตำแหน่งแกน Y ของแถบความคืบหน้าของการเดินทาง
เล็ก: 0 dp - 551 dp	ไม่แสดง	ไม่มี	ไม่มี
ปานกลาง: 552 dp - 739 dp	แสดง	130 dp	เหนือการควบคุมด้านซ้าย (เครื่องวัดความเร็ว / โลโก้ Google / ปุ่มจัดกึ่งกลาง)
ใหญ่: 740 dp ขึ้นไป	แสดง	290 dp	เหนือการควบคุมด้านซ้าย (เครื่องวัดความเร็ว / โลโก้ Google / ปุ่มจัดกึ่งกลาง)

หมายเหตุ: ค่าความสูงหน้าจอที่แสดงในตารางด้านบนใช้ได้กับ Navigation SDK เวอร์ชัน 6.2.1 ขึ้นไป สำหรับเวอร์ชัน 6.2.0 หน้าจอขนาดเล็กกำหนดไว้ที่ 0 dp - 519 dp หน้าจอขนาดกลางกำหนดไว้ที่ 520 dp - 599 dp และหน้าจอขนาดใหญ่กำหนดไว้ที่ 600 dp ขึ้นไป ระดับการมองเห็น ความสูง และตำแหน่งแกน Y ของแถบความคืบหน้าของการเดินทางจะเหมือนกัน
• หากแถบความคืบหน้าของการเดินทางซ้อนทับกับการ์ดการเลี้ยวหรือองค์ประกอบ UI อื่นๆ ของการนำทาง แถบนี้จะปรากฏใต้องค์ประกอบอื่นๆ เหล่านั้น

เข็มทิศ

Navigation SDK มีกราฟิกเข็มทิศซึ่งจะปรากฏที่มุมขวาบนของแผนที่ในบางกรณีและเมื่อเปิดใช้เท่านั้น เมื่อผู้ใช้คลิกเข็มทิศ กล้องจะเคลื่อนไหวกลับไปยังตำแหน่งที่มีทิศทางเป็น 0 (การวางแนวเริ่มต้น) และเข็มทิศจะจางหายไปหลังจากนั้นไม่นาน

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

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

เข็มทิศรองรับโหมดกลางวันและโหมดกลางคืน รวมถึงโหมดมืด

เข็มทิศจะเปิดใช้อยู่โดยค่าเริ่มต้น คุณสามารถตั้งค่าว่าจะเปิดใช้เข็มทิศหรือไม่ โดยใช้ compassEnabled เมธอดในคลาส GoogleMapOptions

ปิดสิ่งปลูกสร้าง 3 มิติ

สำหรับอุปกรณ์ที่มีข้อจำกัดด้านประสิทธิภาพ คุณสามารถปิดการแสดงสิ่งปลูกสร้าง 3 มิติ ได้โดยเรียก GoogleMap.setBuildingsEnabled(false)

Prompt Visibility API (เวอร์ชันทดลอง)

ฟีเจอร์เวอร์ชันเบต้า

Prompt Visibility API ช่วยให้คุณหลีกเลี่ยงความขัดแย้งระหว่างองค์ประกอบ UI ที่สร้างโดย Navigation SDK กับองค์ประกอบ UI ที่กำหนดเองได้โดยการเพิ่ม Listener เพื่อรับ Callback ก่อนที่องค์ประกอบ UI ของ Navigation SDK จะปรากฏขึ้นและทันทีที่องค์ประกอบถูกนำออก ดูข้อมูลเพิ่มเติม รวมถึงตัวอย่างโค้ดได้ในส่วน Prompt Visibility API ของหน้า Configure real-time-disruptions