Tuỳ chỉnh hình nhiều đường

Chọn nền tảng: Android iOS JavaScript

Bạn có thể tuỳ chỉnh hình nhiều đường của tuyến đường bằng phương thức ConsumerMapStyle.setPolylineStyleOptions. Nếu bạn đặt các tuỳ chọn hình nhiều đường tuỳ chỉnh, thì các tuỳ chọn đó 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 setPolylineStyleOptions với null cho tham số PolylineOptions.

Để truy xuất PolylineOptions đang hoạt động, hãy sử dụng phương thức getPolylineStyleOptions.

Để biết thêm thông tin, hãy xem ConsumerMapStyle.setPolylineStyleOptions.

Các loại hình nhiều đường thể hiện tuyến đường

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

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE và REMAINING_ROUTE hiển thị khi theo dõi một chuyến đi và thể hiện tuyến đường của xe.

Thuộc tính của đường đa tuyến tuyến đường

Google Maps cung cấp các thuộc tính có thể tuỳ chỉnh cho từng hình nhiều đường trong PolylineOptions.

  • Để tạo PolylineOptions, hãy sử dụng hàm khởi tạo của lớp này.

  • Để chỉ định các thuộc tính tuỳ chỉnh, hãy sử dụng các phương thức kiểu "Setter". Vì phương thức này cung cấp các giá trị mặc định cho mỗi thuộc tính, nên bạn chỉ cần chỉ định các giá trị tuỳ chỉnh.

  • Để tắt hình nhiều đường, hãy đặt visible thành false.

Để biết thêm thông tin, hãy xem phần PolylineOptions trong tài liệu dành cho nhà phát triển Android.

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 chia sẻ hành trình, ứ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 hình nhiều đường để cho thấy tuyến đường đang hoạt động và tuyến đường còn lại cho xe của bạn.

  • Tuyến đường đang hoạt động là tuyến đường mà xe đ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 vẫn phải đi qua tuyến đường đang hoạt động. Khi điểm tham chiếu của tuyến đường đang hoạt động là điểm tham chiếu cuối cùng của chuyến đi, 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ị của các hình nhiều đường đang hoạt động và còn lại trong ứng dụng. 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 tình hình giao thông

Lớp giao thông của hình nhiều đường được tắt theo mặc định. Khi bạn bật tính năng này, trình kết xuất sẽ vẽ các đoạn phía trên hình nhiều đường của tuyến đường để thể hiện các đoạn đường có tình trạng giao thông không bình thường. Thời gian này bao gồm cả độ lệch tuỳ thuộc vào tình trạng giao thông. Hãy xem tài liệu dành cho nhà phát triển Android về Đường đa tuyến để biết thêm thông tin.

Google Maps thể hiện tình trạng giao thông bằ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 đường đa tuyến nhận biết tình hình giao thông, hãy tạo một đối tượng TrafficStyle rồi truyền đối tượng đó đến ConsumerMapStyle bằng cách gọi setPolylineTrafficStyle().

Ví dụ

Java

// TrafficStyle is part of the Consumer SDK.
int orange = Color.rgb(255, 165, 0);
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW, orange)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val orange = Color.rgb(255, 165, 0)
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GRAY)
    .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW, orange)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)