Tài liệu này trình bày cách tuỳ chỉnh giao diện của bản đồ cũng như cách kiểm soát các tuỳ chọn chế độ xem và chế độ hiển thị dữ liệu. Bạn có thể thực hiện việc này theo các cách sau:
- Sử dụng tính năng định kiểu bản đồ dựa trên đám mây
- Đặt tùy chọn kiểu bản đồ trực tiếp trong mã của riêng bạn
Tạo kiểu cho bản đồ bằng kiểu bản đồ dựa trên đám mây
Tuỳ chỉnh giao diện của thành phần bản đồ bằng cách sử dụng kiểu bản đồ trên đám mây. Bạn tạo và chỉnh sửa kiểu bản đồ trên bảng điều khiển Google Cloud cho bất kỳ ứng dụng nào sử dụng Google Maps mà không yêu cầu thay đổi mã. Để biết thêm thông tin, hãy xem phần Định kiểu bản đồ dựa trên đám mây.
Cả lớp ConsumerMapView
và ConsumerMapFragment
đều hỗ trợ tạo kiểu bản đồ trên đám mây.
Để sử dụng kiểu bản đồ dựa trên đám mây, hãy đảm bảo trình kết xuất bản đồ đã chọn là LATEST
. Các phần sau đây cho thấy ví dụ về cách sử dụng kiểu bản đồ dựa trên đám mây cho 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 trường mapId
trên GoogleMapOptions
và chuyển GoogleMapOptions
đến getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) hoặc 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 kiểu bản đồ dựa trên đám mây trong ConsumerMapFragments:
- Tĩnh với XML.
- Linh động bằng
newInstance
.
Tĩnh với XML
Để sử dụng 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
với mapId
được chỉ định. 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 kiểu bản đồ dựa trên đám mây bằng newInstance
trong ConsumerMapFragment
, hãy đặt trường mapId
trên GoogleMapOptions
và truyền GoogleMapOptions
đến 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
}
}
Để áp dụng kiểu bản đồ cho bản đồ chia sẻ chuyến đi của người tiêu dùng bằng JavaScript, hãy chỉ định mapId
và mọi mapOptions
khác khi bạn tạo JourneySharingMapView
.
Các ví dụ sau đây minh hoạ cách áp dụng kiểu bản đồ bằng mã bản đồ.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Tạo kiểu cho bản đồ ngay trong mã của bạn
Bạn cũng có thể tuỳ chỉnh kiểu bản đồ bằng cách đặt các tuỳ chọn bản đồ khi tạo JourneySharingMapView
. Các ví dụ sau đây cho biết cách tạo kiểu cho bản đồ bằng các tuỳ chọn bản đồ. Để biết thêm thông tin về các tuỳ chọn bản đồ mà bạn có thể đặt, hãy xem mapOptions
trong tài liệu tham khảo API JavaScript của Google Maps.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Kiểm soát chế độ hiển thị dữ liệu công việc với SDK
Bạn có thể kiểm soát chế độ hiển thị của một số đối tượng nhiệm vụ nhất định trên bản đồ bằng cách sử dụng các quy tắc hiển thị.
Chế độ hiển thị mặc định của dữ liệu công việc
Theo mặc định, dữ liệu của các nhiệm vụ được giao cho một chiếc xe sẽ hiển thị khi xe ở trong phạm vi 5 điểm dừng của nhiệm vụ. Chế độ hiển thị sẽ kết thúc khi tác vụ hoàn tất hoặc bị huỷ.
Bảng này cho thấy chế độ hiển thị mặc định cho từng loại tác vụ. Bạn có thể tuỳ chỉnh chế độ hiển thị cho nhiều tác vụ, nhưng không phải tất cả. Để biết thêm thông tin chi tiết về các loại tác vụ, hãy xem phần Loại tác vụ trong hướng dẫn về Việc cần làm đã lên lịch.
Loại việc cần làm | Chế độ hiển thị mặc định | Có thể tuỳ chỉnh không? | Mô tả |
---|---|---|---|
Việc cần làm không có sẵn | Không hiển thị | Không | Dùng khi lái xe nghỉ giải lao và tiếp nhiên liệu. Nếu một tuyến đường đến một nhiệm vụ giao hàng cũng chứa một điểm dừng xe khác, thì điểm dừng đó sẽ không xuất hiện nếu chỉ chứa các nhiệm vụ không có hàng. Thời gian đến dự kiến và thời gian hoàn thành nhiệm vụ ước tính vẫn xuất hiện của chính nhiệm vụ giao hàng đó. |
Mở nhiệm vụ trên xe | Hiển thị | Có | Chế độ hiển thị sẽ kết thúc khi tác vụ hoàn tất hoặc bị huỷ. Bạn có thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe đang mở. Xem phần Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ trên xe đang mở. |
Các tác vụ đã đóng liên quan đến xe | Không hiển thị | Không | Bạn không thể tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đã đóng liên quan đến xe. |
Tuỳ chỉnh chế độ hiển thị của các nhiệm vụ đang mở trên xe
Giao diện TaskTrackingInfo
cung cấp một số phần tử dữ liệu công việc có thể hiển thị bằng SDK người tiêu dùng.
Phần tử dữ liệu công việc có thể tuỳ chỉnh | |
---|---|
Hình nhiều đường Thời gian đến dự kiến Thời gian hoàn thành tác vụ ước tính |
Quãng đường lái xe còn lại đến nhiệm vụ Số điểm dừng còn lại Vị trí của xe |
Tuỳ chọn hiển thị cho mỗi việc cần làm
Bạn có thể tuỳ chỉnh cấu hình chế độ hiển thị theo từng nhiệm vụ bằng cách thiết lập TaskTrackingViewConfig
khi tạo hoặc cập nhật một tác vụ trong Fleet Engine. Sử dụng các tuỳ chọn chế độ hiển thị sau đây để tạo tiêu chí xác định chế độ hiển thị của một phần tử công việc:
Tuỳ chọn hiển thị | ||
---|---|---|
Số điểm dừng còn lại Thời gian cho đến thời gian đến ước tính Quãng đường lái xe còn lại |
Luôn hiển thị Không bao giờ hiển thị |
Để minh hoạ, giả sử một ví dụ về tuỳ chỉnh điều chỉnh chế độ hiển thị cho ba phần tử dữ liệu bằng cách sử dụng các tiêu chí trong bảng sau. Tất cả các phần tử khác đều tuân theo các quy tắc hiển thị mặc định.
Phần tử dữ liệu cần điều chỉnh | Chế độ hiển thị | Tiêu chí |
---|---|---|
Tuyến đường hình nhiều đường | Hiện | Xe cách 3 trạm dừng. |
ETA | Hiện | Quãng đường lái xe còn lại ngắn hơn 5.000 mét. |
Số lượng trạm dừng còn lại | Không bao giờ hiển thị | Xe cách 3 trạm dừng. |
Ví dụ sau đây cho thấy cấu hình này:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Quy tắc về chế độ hiển thị hình nhiều đường và vị trí của xe
Bạn không thể thấy đường đa tuyến của tuyến đường trừ phi vị trí của xe cũng hiển thị; nếu không, bạn có thể suy ra vị trí của xe bằng điểm cuối của đường đa tuyến.
Những nguyên tắc này giúp bạn cung cấp một tổ hợp hợp lệ cho các tuỳ chọn hình nhiều đường và chế độ hiển thị vị trí của xe.
Các chế độ hiển thị giống nhau | Tiêu chí mức độ hiển thị | Hướng dẫn |
---|---|---|
Các tuỳ chọn hình nhiều đường tuyến đường được đặt thành luôn hiển thị. | Đặt thông tin vị trí của xe thành luôn hiển thị. | |
Thông tin vị trí của xe được đặt thành không bao giờ hiển thị. | Đặt đường đa tuyến của tuyến đường thành không bao giờ hiển thị. | |
Chế độ hiển thị là bất kỳ lựa chọn nào sau đây:
|
Đặt các tuỳ chọn đường đa tuyến của tuyến đường thành một giá trị nhỏ hơn hoặc bằng giá trị được đặt cho vị trí của xe. Ví dụ: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Các chế độ hiển thị khác nhau | Tiêu chí về khả năng hiển thị | Hướng dẫn |
Vị trí của xe hiển thị | Điều này chỉ xảy ra khi cả vị trí xe và chế độ hiển thị đường đa tuyến đều được đáp ứng. Ví dụ: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Trong ví dụ này, vị trí của xe chỉ hiển thị nếu số điểm dừng còn lại ít nhất là 3 VÀ quãng đường lái xe còn lại tối thiểu là 3.000 mét. |
Tắt tính năng tự động điều chỉnh
Bạn có thể ngăn bản đồ tự động điều chỉnh khung nhìn cho phù hợp với xe và tuyến đường dự kiến bằng cách tắt tính năng điều chỉnh tự động. Ví dụ sau cho thấy cách tắt tính năng tự động điều chỉnh khi bạn định cấu hình chế độ xem bản đồ chia sẻ hành trình.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});