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 ของคุณเองแทนที่องค์ประกอบได้
ตัวอย่าง
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
สร้างขึ้นโดยใช้ตัวสร้าง และมีการระบุคุณสมบัติที่กำหนดเองโดยใช้ "Setter" สไตล์ ค่าเริ่มต้น
สำหรับแต่ละพร็อพเพอร์ตี้ คุณจึงต้องระบุค่าที่กำหนดเองเท่านั้น
คุณปิดเส้นประกอบได้โดยตั้งค่า 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 จะตั้งศูนย์กลางกล้องไว้ที่ตำแหน่งของอุปกรณ์ หากมี เซสชันการเดินทางและความคืบหน้าของคำสั่งซื้อที่ดำเนินอยู่ คุณอาจต้องการจัด เพื่อโฟกัสที่การเดินทางมากกว่าตำแหน่งของอุปกรณ์
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)
ตัวอย่าง
Java
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);
}
}
}
Kotlin
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:
- แบบคงที่โดยใช้ XML
- แบบไดนามิกด้วย
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
โปรดดูตัวอย่างต่อไปนี้
Java
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;
}
}
Kotlin
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
}
}