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

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

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

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

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

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

หมายเหตุ: การควบคุมเลย์เอาต์ตามช่องที่อธิบายไว้ในส่วนนี้ เช่น setCustomControl จะเลิกใช้งาน เราขอแนะนำให้ใช้ฟีเจอร์การปรับแต่งเลย์เอาต์เวอร์ชันทดลองแทน

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

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

• SECONDARY_HEADER (ปรากฏในโหมดภาพบุคคลเท่านั้น)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

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

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

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

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

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

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

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

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

    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 มุมมองนี้จะอยู่เหนือการ์ด ETA และ/หรือส่วนท้ายที่กำหนดเอง (หรืออยู่ด้านล่างของแผนที่หากไม่มีทั้ง 2 อย่าง) และองค์ประกอบ Nav SDK ซึ่งรวมถึงปุ่มจัดให้อยู่กึ่งกลางและโลโก้ Google จะเลื่อนขึ้นเพื่อรองรับความสูงของมุมมองการควบคุมที่กำหนดเอง ตัวควบคุมนี้จะอยู่ภายในขอบเขตของแผนที่ที่มองเห็นได้ ดังนั้นการเพิ่มระยะห่างจากขอบด้านล่างหรือขอบเริ่มต้นของแผนที่จะเปลี่ยนตำแหน่งของตัวควบคุมนี้ด้วย

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

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

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

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

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

ส่วนท้าย

ฟีเจอร์เวอร์ชันตัวอย่าง

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

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

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

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

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

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

การควบคุมที่กำหนดเองในตำแหน่ง 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.AudioGuidanceSettings;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationFragment;
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.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 NavigationFragment 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 =
                (NavigationFragment)
                    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).
                AudioGuidanceSettings audioSettings =
                    AudioGuidanceSettings.builder()
                        .setGuidanceMode(
                            AudioGuidanceSettings.GuidanceMode.VOICE_ALERTS_AND_GUIDANCE)
                        .build();
                mNavigator.setAudioGuidanceSettings(audioSettings);

                // 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;
              case ROUTING_TIMEOUT:
                displayMessage("Error starting navigation: Routing timed out.");
                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

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

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

หมายเหตุ: ความสูงของส่วนหัวเริ่มต้นเป็นแบบไดนามิกและปรับขนาดตามคำแนะนำการบังคับทิศทางที่แสดง

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

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

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
  .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));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• AUTO ช่วยให้ Navigation 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 หรือ NavigationFragment เช่น

// 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 มีกราฟิกเข็มทิศซึ่งจะปรากฏที่มุมขวาบนของแผนที่ในบางกรณีและเฉพาะเมื่อเปิดใช้เท่านั้น เมื่อผู้ใช้คลิกเข็มทิศ กล้องจะเคลื่อนไหวกลับไปยังตำแหน่งที่มีทิศทางเป็นศูนย์ (การวางแนวเริ่มต้น) และเข็มทิศจะค่อยๆ หายไปหลังจากนั้นไม่นาน

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

เพื่อหลีกเลี่ยงการเสียสมาธิของผู้ขับ เข็มทิศจะยังคงอยู่ในตำแหน่งเดิมหากส่วนหัว (ในโหมดภาพบุคคล) ขยายและขัดแย้งกับตำแหน่งเริ่มต้นของเข็มทิศ หากคุณเพิ่มการควบคุมที่กำหนดเองของส่วนหัวรองหรือมุมมองอุปกรณ์เสริมของส่วนหัว เข็มทิศจะถูกซ่อนเพื่อหลีกเลี่ยงความขัดแย้งของ 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 ของหน้ากำหนดค่าการหยุดชะงักแบบเรียลไทม์