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 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 nét của tuyến đường

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

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

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

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

Google Maps cung cấp các thuộc tính có thể tuỳ chỉnh cho từng đa tuyến 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 bất kỳ giá trị tuỳ chỉnh nào.

  • Để tắt đường đa tuyế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)

Tuyến đang hoạt động và tuyến 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 các đường đa tuyến để hiển thị tuyến đường đang hoạt động và còn lại 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 còn lại là đường đi mà xe vẫn phải đi qua sau khi đi qua tuyến đang hoạt động. Khi điểm trung gian của tuyến đang hoạt động là điểm trung gian của chuyến đi cuối cùng, thì tuyến 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 đường đa giác đ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 đa tuyến có nhận biết được lưu lượng truy cập

Theo mặc định, lớp lưu lượng truy cập của đường đa tuyến sẽ bị tắt. Khi bạn bật tính năng này, trình kết xuất sẽ vẽ các đoạn trên đường đa tuyến của tuyến đường đại diện cho các đoạn đường có lưu lượng truy cập không bình thường. Giá trị này bao gồm một độ dời 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 sắc cho từng loại tốc độ.

Để bật đường đa tuyến có thể 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.
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)