本文說明如何自訂地圖的外觀和風格，以及控管資料顯示設定和檢視區塊選項。您可以選擇下列其中一種操作方式：
- 使用雲端式地圖樣式設定
- 直接在自己的程式碼中設定地圖樣式選項
使用雲端式地圖樣式設定為地圖設定樣式
如要將地圖樣式套用至 JavaScript 消費者行程分享地圖，請在建立 JourneySharingMapView 時指定 mapId 和任何其他 mapOptions。
以下範例說明如何使用地圖 ID 套用樣式。
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.
});
直接在自己的程式碼中設定地圖樣式
您也可以在建立 JourneySharingMapView 時設定地圖選項，自訂地圖樣式。下列範例說明如何使用地圖選項設定地圖樣式。如要進一步瞭解可設定的地圖選項，請參閱 Google Maps JavaScript API 參考資料中的 mapOptions。
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" }
]
}
]
}
});
控管 SDK 可存取的任務資料
您可以使用顯示規則，控管地圖上特定工作物件的顯示設定。
工作資料的預設瀏覽權限
根據預設，車輛位於工作 5 個停靠點內時，系統會顯示指派給車輛的工作資料。工作完成或取消後，可見度就會終止。
下表顯示各類型工作的預設可見度。你可以自訂許多工作項目的瀏覽權限，但並非所有項目都適用。如要進一步瞭解工作類型，請參閱「排定工作」指南中的「工作類型」。
| 工作類型 | 預設顯示設定 | 可自訂？ | 說明 |
|---|---|---|---|
| 無法預訂工作 | 隱藏 | 否 | 用於駕駛人休息和加油。如果送貨路線也包含其他車輛停靠點，且該停靠點僅包含無法提供服務的工作，則系統不會顯示該停靠點。系統仍會顯示送貨任務的預計抵達時間和預計完成時間。 |
| 開啟車輛工作 | 顯示 | 是 | 工作完成或取消後，就會停止顯示。 你可以自訂未完成車輛工作的顯示設定。請參閱「自訂未完成車輛工作的顯示設定」。 |
| 已完成的車輛相關工作 | 隱藏 | 否 | 你無法自訂已完成車輛工作的顯示設定。 |
自訂未完成車輛工作的顯示設定
TaskTrackingInfo 介面提供多項工作資料元素，可透過 Consumer SDK 顯示。
| 可自訂的工作資料元素 | |
|---|---|
|
路線折線 預計抵達時間 預計完成工作所需時間 |
前往工作地點的剩餘行車距離 剩餘停靠次數 車輛位置 |
每個工作的瀏覽權限選項
您可以在 Fleet Engine 中建立或更新工作時設定 TaskTrackingViewConfig，為每個工作自訂瀏覽權限設定。使用下列顯示選項建立條件，判斷工作元素的顯示狀態：
| 瀏覽權限選項 | ||
|---|---|---|
|
剩餘停靠次數 預計到達時間前的時間長度 剩餘行車距離 |
一律顯示 不會顯示 |
|
舉例來說，假設某項自訂作業會根據下表所示條件，調整三個資料元素的顯示設定。所有其他元素都遵循預設的顯示規則。
| 要調整的資料元素 | 顯示設定 | 條件 |
|---|---|---|
| 路線折線 | 顯示 | 車輛距離你不到 3 個停靠站。 |
| 預計抵達時間 | 顯示 | 剩餘行車距離短於 5000 公尺。 |
| 剩餘停靠次數 | 永不顯示 | 車輛距離你不到 3 個停靠站。 |
以下範例顯示這項設定：
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
路線折線和車輛位置資訊顯示規則
除非車輛位置也顯示出來，否則路線折線無法顯示；否則可從折線的終點推斷車輛位置。
這些規範可協助您為路線折線和車輛位置顯示選項提供有效組合。
| 瀏覽權限選項相同 | 曝光率條件 | 指引 |
|---|---|---|
| 路線折線選項設為一律顯示。 | 將車輛位置設為一律顯示。 | |
| 車輛位置設為永不顯示。 | 將路線折線設為永不顯示。 | |
顯示設定選項包括：
|
將路線折線選項設為小於或等於車輛位置的值。例如： "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingStopCountThreshold": 5
},
}
|
|
| 不同瀏覽權限選項 | 曝光率條件 | 指引 |
| 車輛位置可供查看 | 只有在同時符合車輛位置和折線顯示選項時，才會發生這種情況。例如： "taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"vehicleLocationVisibility": {
"remainingDrivingDistanceMetersThreshold": 3000
},
}在這個範例中，只有在剩餘停靠次數至少為 3 且剩餘行車距離至少為 3000 公尺時，才會顯示車輛位置。 |
停用自動調整功能
如要停止讓地圖自動調整可視區域，以配合車輛和預期路線，請停用自動調整功能。以下範例說明如何設定行程分享地圖檢視畫面時，停用自動調整功能。
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,
...
});