การปรับแต่ง UI ของ Android

ConsumerMapStyle class มีเมธอด setter และ getter ที่ให้การปรับแต่งแบบไดนามิกแก่คุณ สำหรับเครื่องหมายและเส้นประกอบ ชั้นเรียนนี้จะแสดงผลแบบไม่พร้อมกันโดยใช้ ConsumerController.getConsumerMapStyle()

การปรับแต่ง UI จะคงอยู่ตลอดการหมุนอุปกรณ์และยังคงมีผลจนกว่า ConsumerController ถูกถอดออก

ตัวทำเครื่องหมายที่กำหนดเอง

วิธีกำหนดประเภทและคุณสมบัติของเครื่องหมายคือ ConsumerMapStyle.setMarkerStyleOptions() ที่กำหนดเองของคุณ ตัวเลือกเครื่องหมายจะลบล้างค่าเริ่มต้นที่ Consumer SDK ระบุไว้ หากต้องการคืนค่าเริ่มต้น ให้เรียก setMarkerStyleOptions() โดยใช้ค่าว่าง สำหรับพารามิเตอร์ MarkerOptions ดึงข้อมูล MarkerOptions ที่ใช้งานอยู่ โดยใช้ getMarkerStyleOptions()

ประเภทเครื่องหมาย

คุณสามารถปรับแต่งเครื่องหมายต่อไปนี้ได้

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

TRIP_PICKUP_POINT และ TRIP_DROPOFF_POINT จะแสดงขึ้นระหว่างการตรวจสอบการเดินทาง

TRIP_VEHICLE จอแสดงผลระหว่างการตรวจสอบการเดินทาง ไอคอนตัวทำเครื่องหมายไม่เปลี่ยนแปลง ตามประเภทยานพาหนะจริงสำหรับการเดินทาง ข้อมูลอัปเดตเกี่ยวกับ Consumer SDK การหมุนไอคอน TRIP_VEHICLE ระหว่างการตรวจสอบการเดินทางเพื่อเลียนแบบ ลักษณะการทำงานของยานพาหนะจริงที่ใช้ขณะเดินทาง

ตัวเลือกเครื่องหมาย

คุณสมบัติที่ปรับแต่งได้สำหรับเครื่องหมายแต่ละเครื่องหมายคือชุดของ ที่พักจาก Google Maps MarkerOptions

MarkerOptions สร้างขึ้นโดยใช้ตัวสร้าง และมีการระบุคุณสมบัติที่กำหนดเองโดยใช้ "Setter" สไตล์ ค่าเริ่มต้นจะมีการระบุให้กับพร็อพเพอร์ตี้แต่ละรายการ คุณจึงต้องระบุค่าที่กำหนดเองเท่านั้น

คุณปิดเครื่องหมายได้โดยตั้งค่า visible เป็น false ควรให้ข้อมูลที่เพียงพอเพื่อให้คุณสามารถใช้องค์ประกอบ UI ของคุณเองแทนที่องค์ประกอบได้

ตัวอย่าง

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

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

เส้นประกอบที่กำหนดเอง

การปรับแต่งเส้นประกอบได้รับการตั้งค่าโดยใช้เมธอด ConsumerMapStyle.setPolylineStyleOptions การตั้งค่าตัวเลือกเส้นประกอบที่กำหนดเอง ลบล้างค่าเริ่มต้นที่ Consumer SDK ระบุไว้ ค่าเริ่มต้น คุณสามารถคืนค่าได้โดยโทรไปที่ setPolylineStyleOptions มีค่า Null สำหรับพารามิเตอร์ PolylineOptions ฟิลด์ที่ใช้งานอยู่ คุณสามารถดึงข้อมูล PolylineOptions ได้โดยใช้ getPolylineStyleOptions

ประเภทเส้นประกอบ

ประเภทเส้นประกอบที่ปรับแต่งได้ดังต่อไปนี้

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE และ REMAINING_ROUTE จะแสดงขึ้นระหว่างการตรวจสอบการเดินทาง และ แสดงเส้นทางของยานพาหนะ

คุณสมบัติของโพลีไลน์

พร็อพเพอร์ตี้ที่ปรับแต่งได้ซึ่งใช้ได้กับเส้นประกอบแต่ละรายการนั้นมาจาก Google Maps PolylineOptions PolylineOptions สร้างขึ้นโดยใช้ตัวสร้าง และมีการระบุคุณสมบัติที่กำหนดเองโดยใช้ "Setter" สไตล์ ค่าเริ่มต้น สำหรับแต่ละพร็อพเพอร์ตี้ คุณจึงต้องระบุค่าที่กำหนดเองเท่านั้น คุณปิดเส้นประกอบได้โดยตั้งค่า visible เป็น false

ตัวอย่าง

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

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

เส้นทางที่ใช้งานอยู่และที่เหลืออยู่

เมื่อเปิดใช้การเดินทางและความคืบหน้าของคำสั่งซื้อ แอปของคุณสามารถปรับแต่ง ประสบการณ์ของผู้ใช้เมื่อใช้เส้นประกอบที่แสดงให้เห็นว่ายานพาหนะของคุณใช้งานอยู่และเหลืออยู่ เส้นทาง

เส้นทางที่ใช้อยู่คือเส้นทางที่ยานพาหนะกำลังเดินทางไปถึง จุดอ้างอิงถัดไปในการเดินทางที่ดำเนินอยู่ของผู้บริโภค เส้นทางที่เหลือคือ เส้นทางที่ยานพาหนะจะเดินทางผ่านเส้นทางที่ใช้งานอยู่ เมื่อเส้นทางที่ใช้งานอยู่ จุดอ้างอิงคือจุดอ้างอิงของการเดินทางจุดสุดท้าย แต่เส้นทางที่เหลือไม่มีอยู่

ปรับแต่งและควบคุมระดับการเข้าถึงได้ ตามแอปของคุณ โดยค่าเริ่มต้น เส้นทางที่ใช้งานอยู่จะปรากฏให้เห็นและเส้นทางที่เหลืออยู่ ไม่ปรากฏ

ตัวอย่าง

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

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

เส้นประกอบที่รับรู้การจราจรของข้อมูล

เลเยอร์การจราจรของเส้นประกอบจะถูกปิดใช้โดยค่าเริ่มต้น เมื่อเปิดใช้ กลุ่ม แสดงเส้นถนนของการจราจรที่ไม่ปกติซึ่งวาดอยู่เหนือเส้นประกอบของเส้นทาง ที่ z-index PolylineOptions.getZIndex() บวกด้วยออฟเซ็ตขึ้นอยู่กับสภาพการจราจร

สภาพการจราจรแสดงเป็นแบบใดแบบหนึ่ง ความเร็ว 4 ประเภท คุณสามารถปรับแต่งสีสำหรับความเร็วแต่ละประเภทได้

หากต้องการเปิดใช้ "เส้นประกอบที่รับรู้การจราจรของข้อมูล" คุณต้องสร้างออบเจ็กต์ TrafficStyle ซึ่งจะส่งผ่านไปยัง ConsumerMapStyle โดยเรียกใช้ setPolylineTrafficStyle()

ตัวอย่าง

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

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

การปรับการซูมของกล้องเพื่อโฟกัสการเดินทาง

ปุ่มตำแหน่งของฉันเริ่มต้น ในตัวของ Maps SDK จะตั้งศูนย์กลางกล้องไว้ที่ตำแหน่งของอุปกรณ์ หากมี เซสชันการเดินทางและความคืบหน้าของคำสั่งซื้อที่ดำเนินอยู่ คุณอาจต้องการจัด เพื่อโฟกัสที่การเดินทางมากกว่าตำแหน่งของอุปกรณ์

Consumer SDK สำหรับโซลูชันในตัวของ Android: กล้องอัตโนมัติ

SDK ของผู้บริโภคช่วยให้คุณมุ่งเน้นที่เส้นทางการใช้งานแทนตําแหน่งของอุปกรณ์ได้ ให้ฟีเจอร์กล้องอัตโนมัติที่เปิดใช้โดยค่าเริ่มต้น กล้องจะซูม เพื่อโฟกัสที่เส้นทางการเดินทางและความคืบหน้าของคำสั่งซื้อและจุดอ้างอิงของการเดินทางถัดไป

การปรับแต่งลักษณะการทำงานของกล้อง

หากต้องการควบคุมลักษณะการทำงานของกล้องได้มากขึ้น คุณก็ปิดใช้หรือเปิดใช้ได้ กล้องอัตโนมัติที่ใช้ ConsumerController.setAutoCameraEnabled()

ConsumerController.getCameraUpdate() แสดงผลขอบเขตกล้องที่แนะนำในขณะนั้น คุณสามารถ ให้ระบุ CameraUpdate นี้เป็นอาร์กิวเมนต์สำหรับ GoogleMap.moveCamera() หรือ GoogleMap.animateCamera()

การจัดรูปแบบแผนที่ในระบบคลาวด์

ทั้ง ConsumerMapView และ ConsumerMapFragment ชั้นเรียนจะรองรับการจัดรูปแบบแผนที่ในระบบคลาวด์ หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ โปรดตรวจสอบว่าแผนที่ที่เลือก โหมดแสดงภาพคือ LATEST ตัวอย่างต่อไปนี้จะแสดงวิธีใช้ การจัดรูปแบบแผนที่ในระบบคลาวด์พร้อมกับโปรเจ็กต์ของคุณ

ConsumerMapView

หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ใน ConsumerMapView ให้ตั้งค่า ฟิลด์ mapId บน GoogleMapOptions และส่งต่อ GoogleMapOptions ไปยัง getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

ตัวอย่าง

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

สามารถใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ได้ 2 วิธีใน ConsumerMapFragments:

1. แบบคงที่ที่มี XML
2. แบบไดนามิกด้วย newInstance

แบบคงที่ที่มี XML

หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ XML ในองค์ประกอบ ConsumerMapFragment ให้เพิ่มแอตทริบิวต์ XML map:mapId พร้อมข้อมูลที่ระบุ mapId โปรดดูตัวอย่างต่อไปนี้

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

แบบไดนามิกกับ newInstance

วิธีใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับ newInstance ใน ConsumerMapFragment ตั้งค่าช่อง mapId ใน GoogleMapOptions และส่ง GoogleMapOptions ถึง newInstance โปรดดูตัวอย่างต่อไปนี้

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}