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

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

Bạn tuỳ chỉnh nhiều đường trên tuyến đường bằng phương thức ConsumerMapStyle.setPolylineStyleOptions. Nếu bạn đặt các lựa chọn đa tuyến tuỳ chỉnh, thì các lựa chọn này sẽ ghi đè các giá trị mặc định do Consumer SDK cung cấp.

Để khôi phục các giá trị mặc định, hãy gọi setPolylineStyleOptions bằng 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 đường nhiều đường của tuyến đường

Bạn có thể tuỳ chỉnh các loại đường đa tuyến sau đây:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE và REMAINING_ROUTE xuất hiện khi bạn đi theo một chuyến đi và đại diện cho tuyến đường của xe.

Thuộc tính của đường nhiều đường trên tuyến đường

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

  • Để tạo PolylineOptions, hãy dùng hàm khởi tạo của nó.

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

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

Để biết thêm thông tin chi tiết, hãy xem 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)

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

Khi bạn 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 nhiều đường để cho biết 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.

  • Đường còn lại là đường mà xe vẫn phải đi qua đường đang hoạt động. Khi điểm tham chiếu tuyến đường đang hoạt động là điểm tham chiếu cuối cùng của chuyến đi, thì 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 khả năng hiển thị của các đường nhiều đoạn đ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)

Đường nhiều đoạn có thông tin giao thông

Theo mặc định, lớp lưu lượng truy cập của đường nhiều đoạn sẽ bị tắt. Khi bạn bật chế độ này, trình kết xuất sẽ vẽ các đoạn đường phía trên đường đa tuyến của tuyến đường, thể hiện những đoạn đường có lưu lượng giao thông không bình thường. Khoả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ề Polyline để biết thêm thông tin.

Google Maps thể hiện tình trạng giao thông 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 đường nhiều đoạn có nhận biết lưu lượng truy cập, 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)