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

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

Bạn tuỳ chỉnh các đường đa tuyến của tuyến đường bằng phương thức ConsumerMapStyle.setPolylineStyleOptions. Nếu bạn đặt các tuỳ chọn đường đa giác tuỳ chỉnh, các tuỳ chọn này sẽ ghi đè các giá trị mặc định do SDK 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 getPolylineStyleOptions.

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

Loại hình nhiều đường định tuyến

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

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE và REMAINING_ROUTE hiển thị trong khi chia sẻ hành trình và thể hiện tuyến đường của xe.

Các thuộc tính của đường đa tuyến

Google Maps cung cấp các thuộc tính có thể tuỳ chỉnh cho từng đường đa tuyến trong PolylineOptions.

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

  • Để chỉ định các thuộc tính tuỳ chỉnh, hãy sử dụng hàm "Setter" kiểu. Từ 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 bất kỳ giá trị tuỳ chỉnh nào.

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

Để biết thêm thông tin, 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)

Tuyến đang hoạt động và tuyến 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 hình nhiều đường để hiển thị quảng cáo đang hoạt động và tuyến đường cho xe của bạn.

  • Tuyến đang hoạt động là đường đi mà xe đang di chuyển để đến điểm trung gian 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 tuyến đường đang hoạt động 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ủa hình nhiều đường đang hoạt động và còn lại trong ứ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ụ:

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 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ạn bật tính năng này, trình kết xuất vẽ các phân đoạn phía trên hình nhiều đường biểu thị các đoạn lưu lượng truy cập không bình thường. Thông tin này bao gồm một khoản bù trừ tuỳ thuộc vào tình trạng giao thông. Xem tài liệu về Polyline dành cho nhà phát triển Android để biết thêm thông tin.

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