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

Lớp ConsumerMapStyle có các phương thức setter và getter giúp bạn tuỳ chỉnh động đối với đ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 phương thức ConsumerController.getConsumerMapStyle().

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

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

Phương thức để đặt loại điểm đánh dấu và các thuộc tính của loại điểm đánh dấu đó là ConsumerMapStyle.setMarkerStyleOptions(). Các tuỳ chọn điểm đánh dấu tuỳ chỉnh 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() bằng cách sử dụng giá trị rỗng cho tham số MarkerOptions. Truy xuất MarkerOptions đang hoạt động bằng cách sử dụng getMarkerStyleOptions().

Loại điểm đánh dấu

Các điểm đánh dấu sau đây có sẵn để tuỳ chỉnh:

  • 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 phương tiện thực tế của chuyến đi. SDK người tiêu dùng sẽ cập nhật chế độ xoay biểu tượng TRIP_VEHICLE trong quá trình giám sát chuyến đi để bắt chước hành vi của xe thực khi xe di chuyển trên tuyến đường.

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

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

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 phương thức kiểu "Setter". 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 cần 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.

Ví dụ:

Java

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

Kotlin

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

Bạn có thể đặt chế độ tuỳ chỉnh nhiều đường bằng phương thức ConsumerMapStyle.setPolylineStyleOptions. Việc đặt tuỳ chọn nhiều dòng tuỳ chỉnh sẽ ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp. Bạn có thể khôi phục các giá trị mặc định bằng cách gọi setPolylineStyleOptions có giá trị rỗng cho tham số PolylineOptions. Bạn có thể truy xuất PolylineOptions đang hoạt động bằng phương thức 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 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ể tuỳ chỉnh dành cho mỗi hình nhiều đường do Google Maps cung cấp PolylineOptions. 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 phương thức kiểu "Setter". 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 các 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ụ:

Java

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

Kotlin

// 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à tuyến đường còn lại

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

Tuyến đường đang hoạt động là đường dẫn mà xe hiện đang di chuyển để đế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 điểm tham chiếu tuyến đường đang hoạt động là điểm tham chiếu chuyến đi cuối cùng, tuyến đường còn lại sẽ không tồn tại.

Bạn có thể tuỳ chỉnh và kiểm soát chế độ hiển thị bằng ứng dụng của mình cũng như các hình nhiều đường đang hoạt động và nhiều đường còn lại. 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ụ:

Java

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

Kotlin

// 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 giao thông

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

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

Để bật "Hình nhiều đường nhận biết lưu lượng truy cập", bạn phải tạo một đố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ụ:

Java

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

Kotlin

// 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 để lấy nét trong hành trình

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

Giải pháp tích hợp sẵn SDK người dùng cho 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 dùng cung cấp tính năng AutoCamera được bật theo mặc định. Máy ảnh thu phóng để lấy tiêu điểm là tuyến đường Chuyến đi và Tiến trình đặt hàng cũng như điểm tham chiếu chuyến đi tiếp theo.

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

Nếu cần kiểm soát nhiều hơn đối với hoạt động của máy ảnh, bạn có thể tắt hoặc bật tính năng AutoCamera bằng cách sử dụng ConsumerController.setAutoCameraEnabled().

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