ConsumerMapStyle
có các phương thức setter và getter cung cấp cho bạn khả năng tuỳ chỉnh động
cho điểm đánh dấu và hình nhiều đường. Lớp này được hiển thị không đồng bộ bằng cách sử dụng
ConsumerController.getConsumerMapStyle()
.
Tính năng tuỳ chỉnh giao diện người dùng vẫn duy trì khi xoay thiết bị và có hiệu lực cho đến khi
ConsumerController
đã bị tách.
Điểm đánh dấu tuỳ chỉnh
Phương pháp đặt loại điểm đánh dấu và các thuộc tính của điểm đánh dấu là ConsumerMapStyle.setMarkerStyleOptions()
. Tùy chỉnh của bạn
các tuỳ chọn cho điểm đánh dấu sẽ ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp.
Để khôi phục các giá trị mặc định, hãy gọi setMarkerStyleOptions()
sử dụng giá trị rỗng
cho tham số MarkerOptions
. Truy xuất MarkerOptions
đang hoạt động
đang sử dụng
getMarkerStyleOptions()
.
Các loại điểm đánh dấu
Bạn có thể tuỳ chỉnh các điểm đánh dấu sau:
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
TRIP_PICKUP_POINT
và TRIP_DROPOFF_POINT
hiển thị trong quá trình giám sát chuyến đi.
TRIP_VEHICLE
sẽ hiển thị trong quá trình giám sát chuyến đi. Biểu tượng điểm đánh dấu không thay đổi
theo loại xe thực tế cho chuyến đi. Bản cập nhật SDK dành cho người tiêu dùng
việc xoay biểu tượng TRIP_VEHICLE
trong quá trình theo dõi chuyến đi để bắt chước
hoạt động thực tế của chiếc xe khi nó đi trên tuyến đường.
Tùy chọn điểm đánh dấu
Các thuộc tính tuỳ chỉnh có sẵn cho mỗi điểm đánh dấu là tập hợp
cơ sở lưu trú do Google Maps cung cấp
MarkerOptions
.
MarkerOptions
được tạo bằng hàm khởi tạo và các thuộc tính tuỳ chỉnh được chỉ định bằng hàm "Setter" kiểu.
Giá trị mặc định được cung cấp cho mỗi thuộc tính, vì vậy, bạn chỉ cần chỉ định giá trị tuỳ chỉnh.
Bạn có thể tắt một điểm đánh dấu bằng cách đặt visible
thành false
.
Bạn phải cung cấp đủ dữ liệu để có thể sử dụng thành phần trên giao diện người dùng của riêng mình ở đúng vị trí.
Ví dụ:
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)
Hình nhiều đường tuỳ chỉnh
Chế độ tuỳ chỉnh hình nhiều đường được đặt bằng phương thức ConsumerMapStyle.setPolylineStyleOptions
. Đặt tuỳ chọn hình nhiều đường tuỳ chỉnh
ghi đè các giá trị mặc định do SDK người tiêu dùng cung cấp. Giá trị mặc định
bạn có thể khôi phục bằng cách gọi setPolylineStyleOptions
với giá trị rỗng cho tham số PolylineOptions
. Phương thức
PolylineOptions
có thể được truy xuất bằng cách sử dụng
getPolylineStyleOptions
.
Loại hình nhiều đường
Bạn có thể tuỳ chỉnh các loại hình nhiều đường sau đây:
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
và REMAINING_ROUTE
được hiển thị trong quá trình giám sát chuyến đi và
thể hiện tuyến đường của xe.
Thuộc tính hình nhiều đường
Các thuộc tính có thể tùy chỉnh có sẵn cho mỗi hình nhiều đường do Google Maps PolylineOptions
cung cấp.
PolylineOptions
được tạo bằng hàm khởi tạo và các thuộc tính tuỳ chỉnh được chỉ định bằng hàm "Setter" kiểu. Giá trị mặc định
được cung cấp cho mỗi thuộc tính, nên bạn chỉ cần chỉ định giá trị tuỳ chỉnh.
Bạn có thể tắt hình nhiều đường bằng cách đặt visible
thành false
.
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 đường đang hoạt động và còn lại
Khi bật Chuyến đi và Tiến trình đặt hàng, ứng dụng của bạn có thể tùy chỉnh trải nghiệm của người dùng khi sử dụng hình nhiều đường cho biết xe của bạn đang hoạt động và còn lại tuyến đường.
Tuyến đường đang hoạt động là đường mà xe hiện đang đi để đến điểm tham chiếu 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 sẽ đi qua tuyến đường đang hoạt động. Khi tuyến đường đang hoạt động điểm tham chiếu 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ác hình nhiều đường đang hoạt động và còn lại theo ứ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ật chế độ này, các phân đoạn biểu thị các đoạn giao thông bất thường được vẽ phía trên hình nhiều đường tại z-index PolylineOptions.getZIndex() cùng với một giá trị bù trừ tuỳ thuộc vào tình trạng giao thông.
Tình trạng giao thông được thể hiện dưới dạng 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 tính năng "Nhiều đường nhận biết lưu lượng truy cập", bạn phải tạo đối tượng TrafficStyle
, sau đó đối tượng này sẽ được truyền đế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)
Điều chỉnh mức thu phóng của máy ảnh để tập trung vào một hành trình
Nút Vị trí của tôi mặc định được tích hợp trong SDK Maps căn giữa máy ảnh vào vị trí thiết bị. Nếu có một phiên Chuyến đi và Tiến trình đặt hàng đang hoạt động, bạn có thể muốn đặt camera để tập trung vào hành trình thay vì vị trí của thiết bị.
SDK người dùng dành cho giải pháp tích hợp Android: AutoCamera
Để cho phép bạn tập trung vào hành trình thay vì vị trí thiết bị, SDK người tiêu dùng cung cấp tính năng AutoCamera được bật theo mặc định. Máy ảnh thu phóng để tập trung vào tuyến đường Tiến trình đặt hàng và Chuyến đi cũng như điểm tham chiếu tiếp theo của chuyến đi.
Tuỳ chỉnh hoạt động của máy ảnh
Nếu cần kiểm soát nhiều hơn hành vi của máy ảnh, bạn có thể tắt hoặc bật
AutoCamera sử dụng ConsumerController.setAutoCameraEnabled()
.
ConsumerController.getCameraUpdate()
sẽ trả về giới hạn máy ảnh được đề xuất tại thời điểm đó. Bạn có thể
sau đó cung cấp CameraUpdate
này làm đối số cho
GoogleMap.moveCamera()
hoặc GoogleMap.animateCamera()
.
Định kiểu bản đồ dựa trên đám mây
Cả hai thuộc tính
ConsumerMapView
và
ConsumerMapFragment
các lớp hỗ trợ định kiểu bản đồ trên đám mây.
Để sử dụng việc định kiểu bản đồ dựa trên đám mây, hãy đảm bảo rằng các bản đồ đã chọn
trình kết xuất là LATEST
. Các ví dụ sau đây minh hoạ cách sử dụng
định kiểu bản đồ dựa trên đám mây bằng dự án của bạn.
ConsumerMapView
Để sử dụng kiểu bản đồ dựa trên đám mây trong ConsumerMapView
, hãy đặt giá trị
Trường mapId
trên GoogleMapOptions
và truyền GoogleMapOptions
đến
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Ví dụ:
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
Có hai cách để sử dụng định kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:
- Tĩnh với XML.
- Linh hoạt nhờ
newInstance
.
Tĩnh với XML
Để sử dụng định kiểu bản đồ dựa trên đám mây bằng XML trong
ConsumerMapFragment
, hãy thêm thuộc tính XML map:mapId
bằng thuộc tính được chỉ định
mapId
. Hãy xem ví dụ sau:
<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"/>
Linh hoạt nhờ newInstance
Để sử dụng định kiểu bản đồ dựa trên đám mây bằng newInstance
trong
ConsumerMapFragment
, đặt trường mapId
trên GoogleMapOptions
và truyền
GoogleMapOptions
thành newInstance
. Hãy xem ví dụ sau:
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
}
}