Tuỳ chỉnh giao diện người dùng Android

ConsumerMapStyle có các phương thức setter và getter cung cấp cho bạn khả năng tuỳ chỉnh động cho điểm đánh dấu và hình nhiều đường. Lớp này được hiển thị không đồng bộ bằng cách sử dụng ConsumerController.getConsumerMapStyle() .

Tính năng tuỳ chỉnh giao diện người dùng vẫn duy trì khi xoay thiết bị và có hiệu lực cho đến khi ConsumerController đã bị tách.

Điểm đánh dấu tuỳ chỉnh

Phương pháp đặt loại điểm đánh dấu và các thuộc tính của điểm đánh dấu là ConsumerMapStyle.setMarkerStyleOptions(). Tùy chỉnh của bạn các tuỳ chọn cho điểm đánh dấu sẽ ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp. Để khôi phục các giá trị mặc định, hãy gọi setMarkerStyleOptions() sử dụng giá trị rỗng cho tham số MarkerOptions. Truy xuất MarkerOptions đang hoạt động đang sử dụng getMarkerStyleOptions().

Các loại điểm đánh dấu

Bạn có thể tuỳ chỉnh các điểm đánh dấu sau:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

TRIP_PICKUP_POINT và TRIP_DROPOFF_POINT hiển thị trong quá trình giám sát chuyến đi.

TRIP_VEHICLE sẽ hiển thị trong quá trình giám sát chuyến đi. Biểu tượng điểm đánh dấu không thay đổi theo loại xe thực tế cho chuyến đi. Bản cập nhật SDK dành cho người tiêu dùng việc xoay biểu tượng TRIP_VEHICLE trong quá trình theo dõi chuyến đi để bắt chước hoạt động thực tế của chiếc xe khi nó đi trên tuyến đường.

Tùy chọn điểm đánh dấu

Các thuộc tính tuỳ chỉnh có sẵn cho mỗi điểm đánh dấu là tập hợp cơ sở lưu trú do Google Maps cung cấp MarkerOptions.

MarkerOptions được tạo bằng hàm khởi tạo và các thuộc tính tuỳ chỉnh được chỉ định bằng hàm "Setter" kiểu. Giá trị mặc định được cung cấp cho mỗi thuộc tính, vì vậy, bạn chỉ cần chỉ định giá trị tuỳ chỉnh.

Bạn có thể tắt một điểm đánh dấu bằng cách đặt visible thành false. Bạn phải cung cấp đủ dữ liệu để có thể sử dụng thành phần trên giao diện người dùng của riêng mình ở đúng vị trí.

Ví dụ:

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

Hình nhiều đường tuỳ chỉnh

Chế độ tuỳ chỉnh hình nhiều đường được đặt bằng phương thức ConsumerMapStyle.setPolylineStyleOptions. Đặt tuỳ chọn hình nhiều đường tuỳ chỉnh ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp. Giá trị mặc định bạn có thể khôi phục bằng cách gọi setPolylineStyleOptions với giá trị rỗng cho tham số PolylineOptions. Phương thức PolylineOptions có thể được truy xuất bằng cách sử dụng getPolylineStyleOptions.

Loại hình nhiều đường

Bạn có thể tuỳ chỉnh các loại hình nhiều đường sau đây:

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE và REMAINING_ROUTE được hiển thị trong quá trình giám sát chuyến đi và thể hiện tuyến đường của xe.

Thuộc tính hình nhiều đường

Các thuộc tính có thể tùy chỉnh có sẵn cho mỗi hình nhiều đường do Google Maps PolylineOptions cung cấp. PolylineOptions được tạo bằng hàm khởi tạo và các thuộc tính tuỳ chỉnh được chỉ định bằng hàm "Setter" kiểu. Giá trị mặc định được cung cấp cho mỗi thuộc tính, nên bạn chỉ cần chỉ định giá trị tuỳ chỉnh. Bạn có thể tắt hình nhiều đường bằng cách đặt visible thành false.

Ví dụ:

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Tuyến đường đang hoạt động và còn lại

Khi bật Chuyến đi và Tiến trình đặt hàng, ứng dụng của bạn có thể tùy chỉnh trải nghiệm của người dùng khi sử dụng hình nhiều đường cho biết xe của bạn đang hoạt động và còn lại tuyến đường.

Tuyến đường đang hoạt động là đường mà xe hiện đang đi để đến điểm tham chiếu tiếp theo trong chuyến đi đang hoạt động của người tiêu dùng. Tuyến đường còn lại là đường mà xe sẽ đi qua tuyến đường đang hoạt động. Khi tuyến đường đang hoạt động điểm tham chiếu là điểm tham chiếu cuối cùng, tuyến đường còn lại không tồn tại.

Bạn có thể tuỳ chỉnh và kiểm soát chế độ hiển thị các hình nhiều đường đang hoạt động và còn lại theo ứng dụng của bạn. Theo mặc định, tuyến đường đang hoạt động sẽ hiển thị và tuyến đường còn lại sẽ không hiển thị.

Ví dụ:

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Hình nhiều đường nhận biết lưu lượng truy cập

Theo mặc định, lớp giao thông của hình nhiều đường bị vô hiệu hoá. Khi bật chế độ này, các phân đoạn biểu thị các đoạn giao thông bất thường được vẽ phía trên hình nhiều đường tại z-index PolylineOptions.getZIndex() cùng với một giá trị bù trừ tuỳ thuộc vào tình trạng giao thông.

Tình trạng giao thông được thể hiện dưới dạng một trong bốn loại tốc độ. Bạn có thể tuỳ chỉnh màu cho từng loại tốc độ.

Để bật tính năng "Nhiều đường nhận biết lưu lượng truy cập", bạn phải tạo đối tượng TrafficStyle, sau đó đối tượng này sẽ được truyền đến ConsumerMapStyle bằng cách gọi setPolylineTrafficStyle().

Ví dụ:

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Điều chỉnh mức thu phóng của máy ảnh để tập trung vào một hành trình

Nút Vị trí của tôi mặc định được tích hợp trong SDK Maps căn giữa máy ảnh vào vị trí thiết bị. Nếu có một phiên Chuyến đi và Tiến trình đặt hàng đang hoạt động, bạn có thể muốn đặt camera để tập trung vào hành trình thay vì vị trí của thiết bị.

SDK người dùng dành cho giải pháp tích hợp Android: AutoCamera

Để cho phép bạn tập trung vào hành trình thay vì vị trí thiết bị, SDK người tiêu dùng cung cấp tính năng AutoCamera được bật theo mặc định. Máy ảnh thu phóng để tập trung vào tuyến đường Tiến trình đặt hàng và Chuyến đi cũng như điểm tham chiếu tiếp theo của chuyến đi.

Tuỳ chỉnh hoạt động của máy ảnh

Nếu cần kiểm soát nhiều hơn hành vi của máy ảnh, bạn có thể tắt hoặc bật AutoCamera sử dụng ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() sẽ trả về giới hạn máy ảnh được đề xuất tại thời điểm đó. Bạn có thể sau đó cung cấp CameraUpdate này làm đối số cho GoogleMap.moveCamera() hoặc GoogleMap.animateCamera().

Định kiểu bản đồ dựa trên đám mây

Cả hai thuộc tính ConsumerMapView và ConsumerMapFragment các lớp hỗ trợ định kiểu bản đồ trên đám mây. Để sử dụng việc định kiểu bản đồ dựa trên đám mây, hãy đảm bảo rằng các bản đồ đã chọn trình kết xuất là LATEST. Các ví dụ sau đây minh hoạ cách sử dụng định kiểu bản đồ dựa trên đám mây bằng dự án của bạn.

ConsumerMapView

Để sử dụng kiểu bản đồ dựa trên đám mây trong ConsumerMapView, hãy đặt giá trị Trường mapId trên GoogleMapOptions và truyền GoogleMapOptions đến getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Ví dụ:

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Có hai cách để sử dụng định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:

1. Tĩnh với XML.
2. Linh hoạt nhờ newInstance.

Tĩnh với XML

Để sử dụng định kiểu bản đồ dựa trên đám mây bằng XML trong ConsumerMapFragment, hãy thêm thuộc tính XML map:mapId bằng thuộc tính được chỉ định mapId. Hãy xem ví dụ sau:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Linh hoạt nhờ newInstance

Để sử dụng định kiểu bản đồ dựa trên đám mây bằng newInstance trong ConsumerMapFragment, đặt trường mapId trên GoogleMapOptions và truyền GoogleMapOptions thành newInstance. Hãy xem ví dụ sau:

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}