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

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

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

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

วิธีตั้งประเภทเครื่องหมายและคุณสมบัติของเครื่องหมายคือ ConsumerMapStyle.setMarkerStyleOptions() ตัวเลือกเครื่องหมายที่กำหนดเองจะลบล้างค่าเริ่มต้นที่ Consumer SDK ระบุไว้ หากต้องการคืนค่าเริ่มต้น ให้เรียก setMarkerStyleOptions() โดยใช้ Null สำหรับพารามิเตอร์ 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 ในระหว่างการตรวจสอบการเดินทางเพื่อเลียนแบบลักษณะการทำงานของยานพาหนะจริงขณะที่เดินทางในเส้นทาง

หมายเหตุ: เพื่อให้ได้ผลลัพธ์ภาพเคลื่อนไหวที่สมจริงที่สุด TRIP_VEHICLE ควรเป็นมุมมองด้านบนโดยให้ด้านหน้าของยานพาหนะหันขึ้น

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

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

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

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

ตัวอย่าง

Java

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

Kotlin

// 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 สร้างขึ้นโดยใช้ตัวสร้าง และจะมีการระบุคุณสมบัติที่กำหนดเองโดยใช้เมธอดรูปแบบ "ตัวตั้งค่า" ค่าเริ่มต้นจะให้ไว้สำหรับแต่ละพร็อพเพอร์ตี้ ฉะนั้นคุณเพียงแค่ระบุค่าที่กำหนดเองเท่านั้น คุณปิดเส้นประกอบได้โดยตั้งค่า visible เป็น false

ตัวอย่าง

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)

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

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

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

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

ตัวอย่าง

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)

โพลีไลน์ที่รับรู้การจราจร

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

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

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

ตัวอย่าง

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)

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

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

SDK สำหรับผู้บริโภคสำหรับโซลูชันในตัวของ Android: Autocamera

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

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

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

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